Mobile Video

  自用笔记:今天我们就来说一说,移动端视频Video的使用兼容问题。略测试了一下,移动端是个重灾区。

基础知识

属性 描述
autoplay 自动开始播放,不会停下来等着数据载入结束。
preload 视频预加载
controls 出现控制条
loop 循环播放
src 视频URL
poster 用于在用户播放或者跳帧之前展示
width 指定视频宽度(通常在css中指定)
height 指定视频高度(通常在css中指定)
buffered 读取到哪段时间范围内的媒体被缓存了
height
属性 描述
play 视频开始播放触发的事件(触发此事件,但是视频不一定可以播放)
playing 视频可以播放触发的事件
timeupdate 音频/视频(audio/video)的播放位置发生改变时触发
pause 视频停止播放触发的事件
ended 视频播放结束或中断触发的事件

durationchange
progress

监听事件

ended

1
2
3
this.$refs.video.addEventListener('ended', () => {
console.log('ended')
})

兼容问题

视频截图

没有设置poster时,由于移动端设备多样,部分浏览器不支持

是否显示播放按钮

移动端

Android微信端使用的是微信自带的播放器插件

x5-video-player-type=”h5”,播放时不适用微信的播放器。

iOS全屏播放

没有添加playsinline【webkit-playsinline】,点击播放会弹出iphone自带的播放器,全屏播放。

扩展阅读

×

纯属好玩

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 基础知识
  2. 2. 监听事件
    1. 2.1. ended
  3. 3. 兼容问题
    1. 3.1. 视频截图
    2. 3.2. 是否显示播放按钮
    3. 3.3. Android微信端使用的是微信自带的播放器插件
    4. 3.4. iOS全屏播放
  4. 4. 扩展阅读
,