html5 视频标签中的 Mp4 视频无法在移动 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) 中都不起作用。但它适用于 "every" 浏览器（使用 Safari、Chrome、Firefox 测试）在桌面和移动 firefox (Android Phone) 上。

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

编辑： 添加此代码：

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

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

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

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

Answer 1

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

我使用一个技巧（或显示一些弹出窗口来使用事件）：

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）。自动播放已禁用，webrtc ... 他们想要完美运行的设备。自动播放在加载时可能很危险。在不久的将来，我希望在所有移动设备上完全支持 html5 激活。

新更新：我发现这是肯定的答案：

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

html5 视频标签中的 Mp4 视频无法在移动 chrome 和移动 safari 中播放

Mp4 video in html5 video tag not playing in mobile chrome and mobile safari

android

html

mobile-safari

mp4

mobile-chrome