Last active
May 13, 2021 07:19
-
-
Save mraiguo/e205fda702bdb3a8d813275c8040a2e4 to your computer and use it in GitHub Desktop.
h5 的 video 在微信和普通浏览器自动播放
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>ChimePlayer Demo1234</title> | |
| <meta charset="utf-8"> | |
| <meta name="description" content="ChimePlayer Demo"> | |
| <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <link rel="stylesheet" type="text/css" href="./index.css"> | |
| <link rel="stylesheet" href="./chimee-mobile-player.browser.css"> | |
| <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> | |
| <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script> | |
| <script> | |
| // init vConsole | |
| var vConsole = new VConsole(); | |
| </script> | |
| <style> | |
| chimee-control { | |
| display: none !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="dym"> | |
| <section style="height: 200px; width: 300px" id="wrapper" class="chimee-container"> | |
| <video id="home_video" | |
| poster="//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg" playsinline | |
| webkit-playsinline loop tabindex="-1"></video> | |
| </section> | |
| </div> | |
| <!-- <video controls muted poster="//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg" | |
| src="https://static.shikehuyu.com/vincent/wx-video-demo/movie.mp4" playsinline x5-playsinline="" | |
| x5-video-player-fullscreen="true" x5-video-orientation="landscape|portrait" x-webkit-airplay="true" loop | |
| x-webkitAirplay="true" preload='auto' tabindex="-1"> | |
| </video> --> | |
| </body> | |
| <script src="./chimee-mobile-player.browser.js"></script> | |
| <script src="https://s.ssl.qhres.com/static/af3c1d4b462cc178/jquery.js"></script> | |
| <script src="https://s5.ssl.qhres.com/static/588b46b97caa0749.js"></script> | |
| <!-- <script src="./index.js"></script> --> | |
| <script> | |
| window.onload = function () { | |
| // { | |
| // // 1. 如果是动态插入 video 标签，那么无法在 setTimeout 22ms 后动态插入的 video 标签上自动播放 | |
| // setTimeout(function() { | |
| // $('#dym').html('<section style="height: 200px; width: 300px" id="wrapper1" class="chimee-container"><video id="home_video" poster="//gcdncs.101.com/v0.1/static/fish/script/swfupload/a801236bjw1ez812gy3g8j20rs0rs0z5.jpg" playsinline webkit-playsinline loop tabindex="-1"></video> </section>') | |
| // var player = new ChimeeMobilePlayer({ | |
| // wrapper: '#wrapper1', // video dom 容器 | |
| // src: '//gcdncs.101.com/v0.1/static/fish/media/ocean.mp4', | |
| // controls: true, | |
| // playsInline: true, | |
| // preload: 'none', | |
| // x5VideoPlayerFullscreen: true, | |
| // x5VideoOrientation: 'landscape|portrait', | |
| // xWebkitAirplay: true, | |
| // muted: true, | |
| // // removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState'], | |
| // }); | |
| // setTimeout(function() { | |
| // player.play() | |
| // }, 2000) | |
| // }, 22) | |
| // document.addEventListener('WeixinJSBridgeReady', () => { | |
| // setTimeout(function () { | |
| // player.play() | |
| // }, 3000) | |
| // }) | |
| // } | |
| { | |
| // 2. iOS 低电量模式下不能自动播放( stackoverflow 有一些hack 的方案，但是感觉不靠谱,且测试了一下没有用) | |
| // 3. 异步初始化的情况下， 无法自动播放，需要在页面一进入就进行初始化( 如果异步的时间够短，在fish-h5 上测试跳转路由，didMount 时直接初始化又可以播放，虽然也是本质来说路由跳转也是异步插入的，也许和 url 变化有关) | |
| setTimeout(function() { | |
| // location.hash = "part5"; | |
| var player = new ChimeeMobilePlayer({ | |
| wrapper: '#wrapper', // video dom 容器 | |
| src: '//gcdncs.101.com/v0.1/static/fish/media/ocean.mp4', | |
| controls: true, | |
| playsInline: true, | |
| preload: 'none', | |
| x5VideoPlayerFullscreen: true, | |
| x5VideoOrientation: 'landscape|portrait', | |
| xWebkitAirplay: true, | |
| muted: true, | |
| // removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState'], | |
| }); | |
| setTimeout(function() { | |
| player.play() | |
| }, 3000) | |
| }, 1000) | |
| // // iOS 微信下自动播放，但是实测不加这个也可 | |
| // // document.addEventListener('WeixinJSBridgeReady', () => { | |
| // // setTimeout(function () { | |
| // // player.play() | |
| // // }, 2000) | |
| // // }) | |
| } | |
| // { | |
| // var player | |
| // var video = document.querySelector('video') | |
| // function initVideo() { | |
| // player = video | |
| // video.style.display = 'block' | |
| // } | |
| // initVideo() | |
| // // 自动播放 | |
| // document.addEventListener('WeixinJSBridgeReady', () => { | |
| // // 3. 使用原生的不能 在 setTimeout 后再去 play, 不知道 chimee 做了什么可以 | |
| // setTimeout(function () { | |
| // player.play() | |
| // }, 2000) | |
| // }) | |
| // setTimeout(function() { | |
| // player.play() | |
| // }, 2000) | |
| // } | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment