blocks|key|449426|text|我不认为自动播放可以在Android上运行，但让视频播放可能会非常棘手。我建议阅读这篇文章：Making+HTML5+Video+work+on+Android+phones。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|449427|entityMap|0|LINK|mutability|MUTABLE|url|http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/^0|1A|15|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I don't think autoplay works on Android, but getting a video to play can be annoyingly tricky. I suggest giving this article a read: <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/" rel="noreferrer">Making HTML5 Video work on Android phones</a>.

blocks|key|449464|text|自动播放仅在第二次通过时才起作用。在android+4.1%2B上，你必须有某种用户事件才能让第一个play()起作用。一旦发生这种情况，自动启动就会起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449465|这是为了让用户知道他们正在使用带宽。|449466|还有另一个问题可以回答这个问题。Autostart+html5+video+using+android+4+browser|offset|length|449467|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/11758651/autostart-html5-video-using-android-4-browser^0|0|0|G|19|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

Autoplay only works the second time through. 
on android 4.1+ you have to have some kind of user event to get the first play() to work. Once that has happened then autostart works.

This is so that the user is acknowledging that they are using bandwidth.

There is another question that answers this .
<a href="https://stackoverflow.com/questions/11758651/autostart-html5-video-using-android-4-browser">Autostart html5 video using android 4 browser</a>

blocks|key|663789|text|在Android4.1和4.2中，我使用以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|663790|++++evt.initMouseEvent(+"click",+true,true,window,0,0,0,0,0,false,false,false,false,0,+true+);
++++var+v+=+document.getElementById("video");
++++v.dispatchEvent(evt);|code-block|syntax|javascript|663791|其中html是|663792|++++<video+id="video"+src="sample.mp4"+poster="image.jpg"+controls></video>|663793|这样做效果很好。但在Android4.4中，它不起作用。|663794|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In Android 4.1 and 4.2, I use the following code.

<pre><code> evt.initMouseEvent( "click", true,true,window,0,0,0,0,0,false,false,false,false,0, true );
 var v = document.getElementById("video");
 v.dispatchEvent(evt);
</code></pre>

where html is

<pre><code> &lt;video id="video" src="sample.mp4" poster="image.jpg" controls&gt;&lt;/video&gt;
</code></pre>

This works well. But In Android 4.4, it does not work.

blocks|key|449528|text|与KNaito的答案类似，下面的代码可以帮我解决这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449529|function+simulateClick()+{
++var+event+=+new+MouseEvent('click',+{
++++'view':+window,
++++'bubbles':+true,
++++'cancelable':+true
++});
++var+cb+=+document.getElementById('player');+
++var+canceled+=+!cb.dispatchEvent(event);
++if+(canceled)+{
++++//+A+handler+called+preventDefault.
++++alert("canceled");
++}+else+{
++++//+None+of+the+handlers+called+preventDefault.
++++alert("not+canceled");
++}
}|code-block|syntax|javascript|449530|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

similar to KNaito's answer, the following does the trick for me

<pre><code>function simulateClick() {
 var event = new MouseEvent('click', {
 'view': window,
 'bubbles': true,
 'cancelable': true
 });
 var cb = document.getElementById('player'); 
 var canceled = !cb.dispatchEvent(event);
 if (canceled) {
 // A handler called preventDefault.
 alert("canceled");
 } else {
 // None of the handlers called preventDefault.
 alert("not canceled");
 }
}
</code></pre>

blocks|key|663892|text|我使用了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|663893|//+get+the+video
var+video+=+document.querySelector('video');
//+use+the+whole+window+and+a+*named+function*
window.addEventListener('touchstart',+function+videoStart()+{
++video.play();
++console.log('first+touch');
++//+remove+from+the+window+and+call+the+function+we+are+removing
++this.removeEventListener('touchstart',+videoStart);
});|code-block|syntax|javascript|663894|似乎再也没有自动启动的方法了。|663895|这样，当他们第一次触摸屏幕时，视频就会播放。它还会在第一次运行时自动删除，这样您就可以避免将多个侦听器加在一起。|663896|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I used the following code:

<pre><code>// get the video
var video = document.querySelector('video');
// use the whole window and a *named function*
window.addEventListener('touchstart', function videoStart() {
 video.play();
 console.log('first touch');
 // remove from the window and call the function we are removing
 this.removeEventListener('touchstart', videoStart);
});
</code></pre>

There doesn't seem to be a way to auto-start anymore.

This makes it so that the first time they touch the screen the video will play. It will also remove itself on first run so that you can avoid multiple listeners adding up.

blocks|key|449668|text|Android实际上有一个API来解决这个问题！方法是setMediaPlaybackRequiresUserGesture()。我在对视频自动播放进行了大量的研究之后找到了它，并尝试了很多来自SO的黑客攻击。这里有一个来自blair+vanderhoof的例子|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|449669|package+com.example.myProject;

import+android.os.Bundle;
import+org.apache.cordova.*;
import+android.webkit.WebSettings;

public+class+myProject+extends+CordovaActivity+
{
++++@Override
++++public+void+onCreate(Bundle+savedInstanceState)
++++{
++++++++super.onCreate(savedInstanceState);
++++++++super.init();
++++++++//+Set+by+<content+src="index.html"+/>+in+config.xml
++++++++super.loadUrl(Config.getStartUrl());
++++++++//super.loadUrl("file:///android_asset/www/index.html");

++++++++WebSettings+ws+=+super.appView.getSettings();
++++++++ws.setMediaPlaybackRequiresUserGesture(false);
++++}
}|code-block|syntax|javascript|449670|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.android.com/reference/android/webkit/WebSettings.html#setMediaPlaybackRequiresUserGesture(boolean))|1|https://gist.github.com/blairvanderhoof/9380545^0|R|11|0|34|G|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

Android actually has an API for this! The method is <a href="http://developer.android.com/reference/android/webkit/WebSettings.html#setMediaPlaybackRequiresUserGesture(boolean)">setMediaPlaybackRequiresUserGesture()</a>. I found it after a lot of digging into video autoplay and a lot of attempted hacks from SO. Here's an example from <a href="https://gist.github.com/blairvanderhoof/9380545">blair vanderhoof</a>:

<pre><code>package com.example.myProject;

import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebSettings;

public class myProject extends CordovaActivity 
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 super.init();
 // Set by &lt;content src="index.html" /&gt; in config.xml
 super.loadUrl(Config.getStartUrl());
 //super.loadUrl("file:///android_asset/www/index.html");

 WebSettings ws = super.appView.getSettings();
 ws.setMediaPlaybackRequiresUserGesture(false);
 }
}
</code></pre>

blocks|key|449736|text|这里有一个PhoneGap插件，它为我解决了这个问题：https://build.phonegap.com/plugins/1031|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|449737|我只是把它包含在我的config.xml中|449738|entityMap|0|LINK|mutability|MUTABLE|url|https://build.phonegap.com/plugins/1031^0|R|13|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Here is a plugin for PhoneGap which solved the problem for me:
<a href="https://build.phonegap.com/plugins/1031" rel="nofollow">https://build.phonegap.com/plugins/1031</a>

I simply included it in my config.xml

blocks|key|449789|text|在Android4.4及更高版本中，只要HTML5视频组件还在您自己的WebView中，您就不需要用户手势了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449790|webview.setWebChromeClient(new+WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);|code-block|syntax|javascript|449791|要让视频自动播放，您仍然需要向video元素添加autoplay：|449792|<video+id='video'+controls+autoplay>
++<source+src='http://192.xxx.xxx.xx/XXXXVM01.mp4'+type='video/mp4;+codecs="avc1.42E01E,+mp4a.40.2"'+>
</video>|449793|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In Android 4.4 and above you can remove the need for a user gesture so long as the HTML5 Video component lives in your own WebView

<pre><code>webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);
</code></pre>

To get the video to autoplay, you'd still need to add autoplay to the video element:

<pre><code>&lt;video id='video' controls autoplay&gt;
 &lt;source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' &gt;
&lt;/video&gt;
</code></pre>

blocks|key|664136|text|Chrome已将其禁用。甚至jQuery+play()都被阻止了。他们希望用户启动它，这样就可以节省带宽。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|664137|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Chrome has disabled it. <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=159336" rel="nofollow">https://bugs.chromium.org/p/chromium/issues/detail?id=159336</a>
Even the jQuery play() is blocked. They want user to initiate it so bandwidth can be saved.

blocks|key|664187|text|您可以将“静音”和“自动播放”属性添加在一起，以启用android设备的自动播放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|664188|例如：|664189|​|664190|<video+id="video"+class="video"+autoplay+muted+>|code-block|syntax|javascript|664191|664192|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Q|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

You can add the 'muted' and 'autoplay' attributes together to enable autoplay for android devices. 

e.g. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video id="video" class="video" autoplay muted &gt;</code></pre>
</div>
</div>

blocks|key|449899|text|<video+autoplay+controls+id='video1'+width='100%25'+poster='images/top_icon.png'+webkitEnterFullscreen+poster+preload='true'>
<source+src='http://192.xxx.xxx.xx/XXXXVM01.mp4'+type='video/mp4;+codecs='avc1.42E01E,+mp4a.40.2'+>
</video>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|449900|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'&gt;
&lt;source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' &gt;
&lt;/video&gt;
</code></pre>

blocks|key|449977|text|重要提示:请注意，如果在Chrome的设置中启用了Google+Chrome数据保护程序，则将禁用自动播放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|449978|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Important Note: Be aware that if Google Chrome Data Saver is enabled in Chrome's settings, then Autoplay will be disabled.

blocks|key|450226|text|我简化了Javascript以触发视频开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|450227|​|450228|+var+bg+=+document.getElementById+("bg");+
+function+playbg()+{
+++bg.play();+
+}|code-block|syntax|javascript|450229|<video+id="bg"+style="min-width:100%25;+min-height:100%25;"++playsinline+autoplay+loop+muted+onload="playbg();+"><source+src="Files/snow.mp4"+type="video/mp4"></video>
</td></tr>
</table>|450230|450231|*“Files/nowle.mp4”只是示例url|450232|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

I simplified the Javascript to trigger the video to start.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var bg = document.getElementById ("bg"); 
 function playbg() {
 bg.play(); 
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video id="bg" style="min-width:100%; min-height:100%;" playsinline autoplay loop muted onload="playbg(); "&gt;&lt;source src="Files/snow.mp4" type="video/mp4"&gt;&lt;/video&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>


*"Files/snow.mp4" is just sample url

blocks|key|664465|text|可以添加muted标签。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|664466|<video+autoplay+muted>
++<source+src="video.webm"+type="video/webm"+/>
++<source+src="video.mp4"+type="video/mp4"+/>
</video>|code-block|syntax|javascript|664467|参考https://developers.google.com/web/updates/2016/07/autoplay|664468|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/updates/2016/07/autoplay^0|4|5|0|0|2|1M|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Can add <code>muted</code> tag.

<pre><code>&lt;video autoplay muted&gt;
 &lt;source src="video.webm" type="video/webm" /&gt;
 &lt;source src="video.mp4" type="video/mp4" /&gt;
&lt;/video&gt;
</code></pre>

reference <a href="https://developers.google.com/web/updates/2016/07/autoplay" rel="nofollow noreferrer">https://developers.google.com/web/updates/2016/07/autoplay</a>

blocks|key|664512|text|不要单独使用"mute“，在下面的代码中使用muted="true”：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|664513|<video+id="videoPlayer"+[muted]="true"+autoplay+playsinline+loop+style="width:100%25;+height:+100%25;">
<source+type="video/mp4"+src="assets/Video/Home.mp4">
<source+type="video/webm"+src="assets/Video/Home.webm">
</video>|code-block|syntax|javascript|664514|我在更多的Android和ios上进行了测试|664515|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

don't use &quot;mute&quot; alone, use [muted]=&quot;true&quot; for example following code:
<pre><code>&lt;video id=&quot;videoPlayer&quot; [muted]=&quot;true&quot; autoplay playsinline loop style=&quot;width:100%; height: 100%;&quot;&gt;
&lt;source type=&quot;video/mp4&quot; src=&quot;assets/Video/Home.mp4&quot;&gt;
&lt;source type=&quot;video/webm&quot; src=&quot;assets/Video/Home.webm&quot;&gt;
&lt;/video&gt;
</code></pre>
I test in more Android and ios

I had developed a mobile page by asp.net to play mp4 video.

I know iOS had disabled the autoplay function to minimize user bandwidth, so how can i 
autoplay HTML5 mp4 video on Android ? 

I had already put autoplay in HTML5 code, but it doesn't work.

The following is my code:

<pre><code>&lt;video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'&gt;
&lt;source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' &gt;
&lt;/video&gt;
</code></pre>

Moreover, I had fixed the problem that user click on the image overlay can play the video.
Thanks Karthi

here are the code:

<pre><code>&lt;script type="text/javascript"&gt;
 $(document).ready(function() {
 $("#video1").bind("click", function() {
 var vid = $(this).get(0);
 if (vid.paused) { vid.play(); }
 else { vid.pause(); }
 }); 
}); 
&lt;/script&gt;
</code></pre>

Thanks

Joe

How to autoplay HTML5 mp4 video on Android?

数据保护

PhoneGap

Android

jQuery

HTML5

我用asp.net开发了一个手机页面来播放mp4视频。我知道iOS关闭了自动播放功能以最小化用户带宽，那么我如何在安卓上自动播放HTML5 mp4视频？我已经在HTML5代码中设置了自动播放，但它不起作用。以下是我的代码：<video autoplay controls id='video1' width='100%'...

问如何在安卓系统上自动播放HTML5 mp4视频？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在安卓系统上自动播放HTML5 mp4视频？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在安卓系统上自动播放HTML5 mp4视频？
EN