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

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

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

還沒試過ios的谷歌和safari
和android內(nèi)建瀏覽器和谷歌瀏覽器

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

回答

編輯回答

舊酒館

PC端的自動播放應該都是比較兼容的吧；關鍵屬性就是 autoplay；
但手機端是無法做到真正意義上同PC端一樣的的自動播放video的；
最多可以加個touch的監(jiān)聽事件，整個屏幕有被觸摸的時候就開始播放；（iOS下兼容比較好，Android好像有些設備不行）；
之前嘗試過很多辦法，只能做到這樣了；
有些時候還是需要需求方面進行一些妥協(xié)，做不到就是做不到，只能更換方向了；

補充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>

2017年2月18日 22:12

編輯回答