有一点爱的设计空间

博客

Blogs

video自动播放的一些问题

发布时间:2019-05-24

客户要求页面上的视频能自动播放,本来以为加个 autoplay就行了,没想到在chrome里却不管用,后来搞明白现在的高级浏览器基本都禁用音频视频的自动播放了,要给video加muted,让视频静音才可以自动播放。

昨天客户又说在mac的safari里视频不能自动播放,身边没有mac,让朋友用他们的mac测试,发现safari12可以自动播放,而客户的safari版本是6,版本太旧了,但也不能让客户升级版本吧,客户要求在低版本的safari上也能自动播放。

找遍各种方法都不合适,最后还是回到之前chrome不能自动播放视频时想到的解决思路,就是打开页面让用户点击页面任何地方触发视频播放,如果用户不点击呢?就不能实现自动播放了,此方法不够完美,要求是一打开页面就能让视频自动播放。

最后的实现代码如下:

html部分:

<video autoplay preload muted>

        <source type="video/mp4" src="http://www.interval-architects.cn/uploadfile/ueditor/video/20190509/1557373282365323.mp4">

</video>

js部分:

    (function() {

        var audioEl = $("video");

        function forceSafariPlayAudio() {

            audioEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效

            audioEl.play(); // iOS 7/8 仅需要 play 一下

        }

        // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,

        // 因此我们通过一个用户交互事件来主动 play 一下 audio.

        window.addEventListener('ready', forceSafariPlayAudio, false);      

    })();

去掉metud,发现打开新页面可以带声音自动播放了。

演示地址:http://www.uedai.com/html/media.html