在移动版Chrome和Safari浏览器中，HTML5视频标签中的MP4视频无法播放。

Question

我有这段代码可以在 HTML5 页面中播放视频：

  <video autoplay loop id="bgvid">
    <source src="video-background.mp4" poster="/poster.png" type="video/mp4">
  </video>

问题是它在移动版Chrome（Android手机）和移动版Safari（iPhone）上无法工作。但它在”每一个“浏览器中（已在桌面版的Safari、Chrome、Firefox以及移动版的Firefox（Android手机）上测试过）都可以工作。

我该如何解决这个问题？

编辑：添加了以下代码：

  var myVideo = document.getElementById("bgvid");

  function playVid() {
      myVideo.play();
  }

  function pauseVid() {
      myVideo.pause();
  }

如果我添加一个按钮来触发playVid()函数，它就会起作用。所以我认为问题在于自动播放。我试图使用load事件来触发该函数，但它不起作用。

- Mario

---

可能是HTML5视频在移动浏览器上自动播放的重复问题。 - Alvaro Montoro

你找到了这个问题的解决方案吗？我也有同样的问题。 - George

海报应该放在视频元素上，而不是源元素上。你可以有多个源，但不能有多个海报！ - Brunis

你找到解决方案了吗？我这里也遇到同样的问题... - John Doe

Answer 1

很简单，在移动Safari上不支持自动播放。请测试所有安卓浏览器。

我使用一种缓冲技巧（展示一些弹出窗口，强制用户进行初始的第一次点击任何标签/文档 - 使用接受cookies或使用条款弹窗是明智的）：

var ONLYONETIME_EXECUTE = null;
window.addEventListener('load', function(){ // on page load
 
      document.body.addEventListener('touchstart', function(e){
    
    if (ONLYONETIME_EXECUTE == null) {   

        video.play();

        //if you want to prepare more than one video/audios use this trick :             
          video2.play();
          video2.pause();
          // now video2 is buffering and you can play it programmability later 
          // My personal testing was maximum 6 video/audio for android 
          // and maybe 3 max for iOS using single click or touch.
          // Every next click also can prepare more audios/videos.

        ONLYONETIME_EXECUTE = 0;
    }

  }, false)
 
}, false)


// It is very usually that user touch screen  ...

审查：

我不理解iOS HTML5策略。他们停止支持JavaScript控制台记录器（我猜现在是从5.1版本开始的）。自动播放被禁用，WebRTC也是...他们希望设备能够完美运行。自动播放可能会在加载时产生危险。在不久的将来，我期望所有移动设备都能激活完整的HTML5支持。

最新更新： 我发现了这个积极的答案：

自从发布iOS 10以来，苹果允许静音视频自动播放：https://webkit.org/blog/6784/new-video-policies-for-ios/

- Nikola Lukic

---

YouTube如何能够自动播放带有音频的视频？ - moeseth

在安卓或者iOS系统上，使用Chrome或Safari浏览器吗？请勿错过Google高权限应用程序。我们仅寻找浏览器。 - Nikola Lukic

在iOS Safari上，它能够自动播放带有音频的视频。 - moeseth

从我的记忆中是的。 - Nikola Lukic

脚本为什么写成video2了？ - John Doe

是的，因为您可以使用初始用户点击来准备多个视频以从代码中播放... - Nikola Lukic