HTML5多媒体接口使用

2020-04-22  本文已影响0人  八月飞花

原因

每个浏览器的多媒体的页面展示各不相同,
我们需要自定义样式,使其样式统一
  主要涉及到播放界面的控制按钮的统一定制
   全屏先的统一定制

多媒体操作的常见事件/属性/方法

事件

事件 说明
oncanplay() 当用户可以开始播放音视频时触发
ontimeupdata() 当播放时间发生改变时触发,可以用于制作播放进度条
oended() 播放完成时的操作

方法(参考w3school说明)

方法 说明
addTextTrack() 向音视频添加新的文本轨道
canPlayType() 检查浏览器能否播放指定的音频/视频类型
load() 重新加载音视频
play() 播放音视频
pause() 暂停播放音视频
上述方法可以完成基本的播放/暂停,重新加载等操作

属性(同样参考w3school)

属性 说明
autoplay 音视频是否在加载完以后立即播放
currentTime 设置或返回音视频中的当前播放时间
duration 当前音视频的总长度
paused 获取当前的播放/暂停状态
canplay 当浏览器可以播放音视频时
ended 在目前的播放列表已经结束时
timeupdate 当播放位置改变时

分析哔哩哔哩的视频播放窗口

视频文件 - 副本.png

视频区

通过video标签制作,要求顶宽,定高

控制框

包括
  开始结束切换按钮
  下一个视频切换按钮
  播放时间和总时间显示
  分享图标:弹出分享详细界面
  音量控制:弹出滑动条
  视频质量控制按钮:弹出视频的清晰度选项
  设置按钮:弹出设置框
  循环切换按钮:开启或关闭单视频循环
  画中画按钮:开启画中画功能:通过显示一个可拖拽的弹窗,同时暂停主视频中的视频,
  宽屏按钮,让视频模块充满当前所在行,进行等比例放大
  网页全屏:利用H5新曾标签实现
  最大化按钮:同上

未完

上一篇 下一篇

猜你喜欢

热点阅读