Mp4视频在html5视频标签不播放在移动chrome和移动safari

Question

我有这个代码在html5页面中播放视频:

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

问题是它不能在移动chrome (Android Phone)和移动safari (iPhone)中工作。但它可以在"所有"浏览器(包括Safari、Chrome、Firefox)和移动Firefox (Android Phone)上运行。

我怎样才能克服这个问题?

编辑:

添加了以下代码:

  var myVideo = document.getElementById("bgvid");
  function playVid() {
      myVideo.play();
  }
  function pauseVid() {
      myVideo.pause();
  }

如果我添加一个按钮，触发函数playVid()它的工作。所以我认为问题出在自动播放上。我试图触发函数与加载事件，但它不工作

Answer 1

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

我使用缓冲的一个技巧(显示一些弹出窗口来强制用户初始第一次点击任何标签/文档-使用accept cookies或term of use弹出窗口是明智的):

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版ios)，自动播放禁用，web…他们想要完美的设备。自动播放可能是危险的负载。在不久的将来，我希望在所有移动设备上激活完整的html5支持。

新更新:我发现这是一个积极的答案:

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