首页 > 代码库 > H5之视频

H5之视频

2024-09-07 19:23:49   216人阅读

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

H5之视频


联系
我们