如何在 Android 上自动播放 HTML5 mp4 视频？

Question

我通过asp.net开发了一个移动页面来播放mp4视频。

我知道 iOS 已禁用自动播放功能以最大限度地减少用户带宽，那么我该如何 在 Android 上自动播放 HTML5 mp4 视频？

我已经在 HTML5 代码中添加了自动播放功能，但它不起作用。

以下是我的代码：

<video autoplay controls id='video1' width='100%' 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>

此外，我还修复了用户单击图像叠加层可以播放视频的问题。 谢谢卡蒂，

这是代码：

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

谢谢

乔

Answer 1

不要单独使用“mute”，使用 [muted]="true" 例如以下代码：

<video id="videoPlayer" [muted]="true" autoplay playsinline loop style="width:100%; height: 100%;">
<source type="video/mp4" src="assets/Video/Home.mp4">
<source type="video/webm" src="assets/Video/Home.webm">
</video>

我在更多 Android 和 ios 中进行测试

Answer 2

Chrome 已禁用它。 https://bugs.chromium.org/p/chromium/issues/detail ?id=159336
甚至 jQuery play() 也被阻止。他们希望用户启动它，以便节省带宽。

Answer 3

您可以将“静音”和“自动播放”属性添加在一起，以启用 Android 设备的自动播放功能。

例如

<video id="video" class="video" autoplay muted >

Answer 4

我使用了以下代码：

// 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);
});

似乎没有办法再自动启动了。

这使得他们第一次触摸屏幕时就会播放视频。它还会在第一次运行时删除自身，以便您可以避免多个侦听器添加。

Answer 5

Android 实际上有一个 API 可以实现这一点！该方法是 setMediaPlaybackRequiresUserGesture()。我在深入研究视频自动播放并尝试了很多来自 SO 的黑客攻击后发现了它。以下是 blair vanderhoof 的示例：

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);
    }
}

Answer 6

我认为自动播放在 Android 上不起作用，但播放视频可能会非常棘手。我建议阅读这篇文章： 让 HTML5 视频在 Android 手机上运行。

Answer 7

在 Android 4.4 及更高版本中，只要 HTML5 视频组件位于您自己的 WebView 中，您就可以消除对用户手势的需要。

webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);

要使视频自动播放，您仍然需要向视频元素添加自动播放：

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

Answer 8

重要提示：请注意，如果在 Chrome 设置中启用了 Google Chrome 数据保护程序，则自动播放功能将被禁用。

Answer 9

自动播放仅在第二次时有效。
在 android 4.1+ 上，你必须有某种用户事件才能让第一个 play() 工作。一旦发生这种情况，自动启动就会起作用。

这样用户就知道他们正在使用带宽。

还有另一个问题可以回答这个问题。
使用 android 4 浏览器自动启动 html5 视频

Answer 10

与 KNaito 的答案类似，以下内容对我有用

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");
  }
}

Answer 11

在Android 4.1和4.2中，我使用以下代码。

    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);

其中 html 是

    <video id="video" src="sample.mp4" poster="image.jpg" controls></video>

这效果很好。但在Android 4.4中，它不起作用。

Answer 12

这是 PhoneGap 的一个插件，它解决了我的问题：
https://build.phonegap.com/plugins/1031

我只是将其包含在我的配置中。 XML

Answer 13

<video autoplay controls id='video1' width='100%' 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>

Answer 14

我简化了 JavaScript 来触发视频开始。

 var bg = document.getElementById ("bg"); 
 function playbg() {
   bg.play(); 
 }

<video id="bg" style="min-width:100%; min-height:100%;"  playsinline autoplay loop muted onload="playbg(); "><source src="Files/snow.mp4" type="video/mp4"></video>
</td></tr>
</table>

*“Files/snow.mp4”只是示例网址

Answer 15

可以添加muted标签。

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

参考https://developers.google.com/web/updates/2016/07 /自动播放