html5 video 在網頁上如何自動播放且適用所有瀏覽器和裝置？

<video playsinline autoplay controls muted>
 <source src="xxx">
</video>

我發現在macOS版谷歌瀏覽器可以，但是RWD谷歌瀏覽器竟然不行
safari也可以，RWD的safari可以
RWD就是我有設定 @media screen and (max-width: 1100px){ 以下就是RWD
很怪，代碼都是一樣的，但是谷歌RWD竟然不行

還沒試過ios的谷歌和safari
和android內建瀏覽器和谷歌瀏覽器

有大神知道適用所有瀏覽器和裝置的代碼嗎？需要添加什麼js代碼輔助？

阅读 2.9k

PC端的自动播放应该都是比较兼容的吧；关键属性就是 autoplay；
但手机端是无法做到真正意义上同PC端一样的的自动播放video的；
最多可以加个touch的监听事件，整个屏幕有被触摸的时候就开始播放；（iOS下兼容比较好，Android好像有些设备不行）；
之前尝试过很多办法，只能做到这样了；
有些时候还是需要需求方面进行一些妥协，做不到就是做不到，只能更换方向了；

补充touchstart测试源码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>TEST</title>
  <style>
  #video{
    width: 80%;
    height: 80%;
    margin: 10% auto;
  }
  </style>
 </head>
 <body>
  <video id='video' playsinline autoplay controls muted>
    <source src="http://yun.it7090.com/video/XHLaunchAd/video01.mp4">
  </video>
  <div id='inp'></div>
  <script>
    function load (){
        document.addEventListener('touchstart',touch, false);
        document.addEventListener('touchmove',touch, false);
        document.addEventListener('touchend',touch, false);
        function touch (event){
            var event = event || window.event;
            var oInp = document.getElementById("inp");
            switch(event.type){
                case "touchstart":
                    document.getElementById("video").play();
                    oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                    break;
                case "touchend":
                    oInp.innerHTML = "<br/>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                    break;
                case "touchmove":
                    event.preventDefault();
                    oInp.innerHTML = "<br/>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                    break;
            }
            
        }
    }
    window.addEventListener('load',load, false);
  </script>
 </body>
</html>

html5 video 在網頁上如何自動播放且適用所有瀏覽器和裝置？

补充touchstart测试源码如下：

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

mac 访达 finder 搜索功能出来的结果为什么是完全不相关的？

为什么会出现CORS error？