h5手机端video autoplay兼容苹果的做法

最新推荐文章于 2022-12-03 08:26:11 发布

feifeiwuxian

最新推荐文章于 2022-12-03 08:26:11 发布

阅读量1.2k

点赞数 2

分类专栏：前端H5

本文链接：https://blog.csdn.net/feifeiwuxian/article/details/111633643

版权

1.主要是加入

x5-video-player-fullscreen="true" 
    x5-playsinline 
    playsinline 
    webkit-playsinline

这几个属性。

2.如果需要微信中支持，只能引入wx的js. 在

//必须在weixin JSAPI的WeixinJSBridgeReady才能生效
         document.addEventListener('WeixinJSBridgeReady',() => {
            // alert('1111')
            video.play()
          },false);

这里面才生效

3.第二种兼容微信的方法。

由于上面的办法只会调用一次。微信是禁止自动播放的。必须有交互产生才可以播放。所以监听触摸事件。

// 微信中第二种方案
        // document.addEventListener('touchstart', function () {
        //     function audioAutoPlay() {
        //         var audio = document.getElementById('shakeVideo');
        //             audio.play();
        //     }
        //     audioAutoPlay();
        //  });

下面是demo完整代码

<!DOCTYPE html>
<html lang

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

feifeiwuxian

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
h5手机端video autoplay兼容苹果的做法

1.主要是加入x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline这几个属性。2.如果需要微信中支持，只能引入wx的js. 在//必须在weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener('WeixinJSBridgeReady',() => { ..
复制链接

扫一扫