H5之视频

Posted 2020-09-03 JasmineLily

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常用相关属性及方法

事件	描述
canplaythrough	表示资源缓冲完毕，可以播放
durationchange	资源长度改变，执行一次
play	资源实际开始播放，autoplay和play()都会触发play事件
playing	同上 执行一次
pause	pause()时触发
progress	资源播放过程中多次执行
ended	结束时触发 loop时不触发该事件

 

 

 

 

 

 

 

属性	描述
currentSrc	返回资源地址
currentTime	返回当前播放进度，可设置
duration	返回资源总时长
paused	资源是否已停止
ended	资源是否已播完

 

 

 

 

 

方法	描述
play()	播放资源
pause()	暂停资源
load()	重新加载src指定的资源

 

 

 

 

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