解决安卓微信video标签标签劫持

最新推荐文章于 2024-09-13 17:57:30 发布

晓晓攻城师

最新推荐文章于 2024-09-13 17:57:30 发布

阅读量3k

点赞数

分类专栏： js 文章标签：微信视频播放 video被劫持安卓微信

本文链接：https://blog.csdn.net/qq_26245325/article/details/99636000

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

解决安卓微信video标签标签劫持

需求

期望网页中的video标签，不在安卓微信中被劫持播放。

代码

可能视频地址失效，换个视频地址，再测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    hello test
</div>
<video id="h" src="http://cdn1.h5mugeda.com/c/uj_g/q1ob/videos/5c7f848decb65e22376710c3.mp4" playsinline=""  x-webkit-airplay="" webkit-playsinline="" x5-playsinline preload="auto"  style="width: 100%;"></video>


<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>

    // IOS  webkit-playsinline="true" playsinline="true"
    // 安卓  x5-playsinline="" 且 需要执行 play() 方法

    //--创建页面监听，等待微信端页面加载完毕 触发音频播放
    document.addEventListener('DOMContentLoaded', function () {
        function audioAutoPlay() {
            var audio = document.getElementById('h');
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
            }, false);
        }
        audioAutoPlay();
    });
    //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
    document.addEventListener('touchstart', function () {
        function audioAutoPlay() {
            var audio = document.getElementById('h');
            audio.play();
        }

        audioAutoPlay();
    });
</script>
</body>
</html>