#摘記：踩了兩天的坑，閱文章無數，再次特別感謝本篇博主
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 videovideo_dom.src = "/static/img/myvideo.mp4"video_dom.play();var playervar 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 { // iOSplayer = 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格式，具體轉換自行百度或者參照開篇的鏈接

來源網絡，奉獻網絡，熱愛編程

總結

以上是生活随笔為你收集整理的手机网页视频背景自动播放记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。