h5video微信自动播放

① html5如何实现自动播放视频

我们使抄用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

② 如何在网页中自动播放视频

HTML5 是下一代的 HTML， 提供了展示视频的标准，规定了一种通过 video 元素来包含视频的标准方法。

纯H5页面在手机端中是无法实现自动播放，移动端浏览器大部分是禁用video和audio的autoplay功能并且，很多移动浏览器也不支持首次js调用play方法进行播放（只有用户手动点播放后暂停，然后用代码进行play可以）。

这样做主要是为了防止不必要的自动播放浪费流量。

以下代码是实现用户第一次触摸后实现的播放和微信app下自动播放

XML/HTML Code复制内容到剪贴板

• functionautoPlayMusic(){

• /*自动播放音乐效果，解决浏览器或者APP自动播放问题*/

• functionmusicInBrowserHandler(){

• musicPlay(true);

• document.body.removeEventListener('touchstart',musicInBrowserHandler);

• }

• document.body.addEventListener('touchstart',musicInBrowserHandler);

• /*自动播放音乐效果，解决微信自动播放问题*/

• functionmusicInWeixinHandler(){

• musicPlay(true);

• document.addEventListener("WeixinJSBridgeReady",function(){

• musicPlay(true);

• },false);

• document.removeEventListener('DOMContentLoaded',musicInWeixinHandler);

• }

• document.addEventListener('DOMContentLoaded',musicInWeixinHandler);

• }

• functionmusicPlay(isPlay){

• varmedia=document.getElementById('myMusic');

• if(isPlay&&media.paused){

• media.play();

• }

• if(!isPlay&&!media.paused){

• media.pause();

• }

• }

Video有以下的属性。

height pixels 设置视频播放器的高度。

loop loop 如果出

现该属性，则当媒介文件完成播放后再次开始播放。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

如果使用 "autoplay"，则忽略该属性。

src url 要播放的视频的 URL。

width pixels 设置视频播放器的宽度。

其中，如果想要实现自动播放，可以在Video里面加上autoplay属性就可以了。