HTML5多媒体接口使用
作者:
八月飞花 | 来源:发表于
2020-04-22 10:58 被阅读0次
原因
每个浏览器的多媒体的页面展示各不相同，
我们需要自定义样式，使其样式统一
主要涉及到播放界面的控制按钮的统一定制
全屏先的统一定制
多媒体操作的常见事件/属性/方法
事件
| 事件 |
说明 |
| oncanplay() |
当用户可以开始播放音视频时触发 |
| ontimeupdata（） |
当播放时间发生改变时触发，可以用于制作播放进度条 |
| oended（） |
播放完成时的操作 |
方法（参考w3school说明）
| 方法 |
说明 |
| addTextTrack() |
向音视频添加新的文本轨道 |
| canPlayType() |
检查浏览器能否播放指定的音频/视频类型 |
| load() |
重新加载音视频 |
| play() |
播放音视频 |
| pause() |
暂停播放音视频 |
上述方法可以完成基本的播放/暂停，重新加载等操作
属性（同样参考w3school）
| 属性 |
说明 |
| autoplay |
音视频是否在加载完以后立即播放 |
| currentTime |
设置或返回音视频中的当前播放时间 |
| duration |
当前音视频的总长度 |
| paused |
获取当前的播放/暂停状态 |
| canplay |
当浏览器可以播放音视频时 |
| ended |
在目前的播放列表已经结束时 |
| timeupdate |
当播放位置改变时 |
分析哔哩哔哩的视频播放窗口
视频文件 - 副本.png
视频区
通过video标签制作，要求顶宽，定高
控制框
包括
开始结束切换按钮
下一个视频切换按钮
播放时间和总时间显示
分享图标：弹出分享详细界面
音量控制：弹出滑动条
视频质量控制按钮：弹出视频的清晰度选项
设置按钮：弹出设置框
循环切换按钮：开启或关闭单视频循环
画中画按钮：开启画中画功能：通过显示一个可拖拽的弹窗，同时暂停主视频中的视频，
宽屏按钮，让视频模块充满当前所在行，进行等比例放大
网页全屏：利用H5新曾标签实现
最大化按钮：同上
未完
本文标题：HTML5多媒体接口使用
本文链接：https://www.haomeiwen.com/subject/tbubihtx.html
网友评论