H5之视频

标签：line   add   str   标签   time   多次   blog   循环播放   加载   

1、基本概念

想在H5中灵活运用视频，必须对video相关的属性、Api有个大致的了解，这里首先对最基本的进行普及一下。

1） <video>标签属性

• src ：视频地址

• width height ：视频宽高(px) h5中可指定为当前设备屏幕宽高

• poster：视频封面，没有播放时显示的图片

• preload：预加载

• autoplay：自动播放

• loop：循环播放

• controls：浏览器自带的控制条

• webkit-playsinline="true" | playsinline ： 禁止 iPhone Safari 视频自动全屏

• x-webkit-airplay="true"支持Airplay的设备（如：音箱、Apple TV)播放

  <video id="video" src="mov.mp4" preload="auto" poster="" currenttime=0 webkit-playsinline="true" playsinline loop x-webkit-airplay="true" controls autoplay>

2） video DOM常用相关属性及方法

2、常见坑

1）自动全屏播放

IOS解决：在<video>标签下添加属性webkit-playsinline="true"和playsinline

Android解决：部分可通过这两个解决，但有些还是不行

2）不自动播放

IOS解决：需手动播放，可JS中添加如下

　　//是否自动播放视频 
    var media = document.getElementById("mainvideo");
    media.src = "media/0307.mp4";
    //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
    media.play();
    //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
        media.play();
    }, false);

Android解决：在<video>标签下添加属性 autoplay

H5之视频

标签：line   add   str   标签   time   多次   blog   循环播放   加载   

原文地址：http://www.cnblogs.com/JasmineLily/p/6527269.html