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

发布于 2022-09-07 20:58:15 字数 370 浏览 26 评论 0

<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代碼輔助？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沉睡月亮 2022-09-14 20:58:15

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>

回复收藏 0