手机网页视频背景自动播放记录

#摘记：踩了两天的坑，阅文章无数，再次特别感谢本篇博主
https://segmentfault.com/a/1190000020674521
感谢jsmpeg插件提供者

运行场景：

网站需要视频作为背景播放，兼容PC，微信。

解决问题：

1、手机某些浏览器会将视频弹出
2、微信点开视频不播放或者不加载

直接上代码，不懂可留言问我

        <div class="pc_video">
            <video id="my-video" muted loop class="full_video" src=""></video>
        </div>

        <div class="mobile_video">
            <!-- For iOS -->
            <video src=""  playsinline webkit-playsinline loop id="iosvideo"></video>
            <!-- For Android -->
            <canvas></canvas>
        </div>

js

 // PC video
    video_dom.src = "/static/img/myvideo.mp4"
    video_dom.play();
    var player
    var video = document.getElementById('iosvideo')
    var canvas = document.querySelector('canvas')

    function initVideo() {
        var isAndroid = window.navigator.userAgent.match(/android/ig)
        if (isAndroid) { // 安卓
            var src = "/static/img/movie.ts"
            player = new JSMpeg.Player(src, {
                canvas: canvas,
                autoplay: true,
                progressive: false,
                loop: true,
                onVideoDecode: function() {
                    canvas.style.display = 'block'
                    canvas.style.height = "100%"
                    canvas.style.width = "100%"
                }
            })
        } else { // iOS
            player = video;
            player.src = "/static/img/myvideo.mp4";
            player.muted = true;
            player.play();
            video.style.display = 'block'
        }
    }

    window.onload = function() {
        initVideo()
        // 自动播放
        document.addEventListener('WeixinJSBridgeReady', () => {
            player.play()
        })
    }

注意事项

1、所有html中的video标签（ISO和pc）不要写src地址，否则在手机浏览器仍会弹出层，将视频地址在js中赋值。
2、微信加载事件需要加载这个js

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

3、安卓视频需要是ts格式，具体转换自行百度或者参照开篇的链接

来源网络，奉献网络，热爱编程