自制video播放器

w3c来源

兼容问题

之间插入的内容是供不支持 video 元素的浏览器显示的

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

api属性

controls
controlslist="nodownload" 无下载按钮
playsinline x5-playsinline webkit-playsinline 解决默认全屏

autoplay
preload属性设置或返回是否在页面加载后立即加载音频/视频：auto|metadata|none

auto    指示一旦页面加载，则开始加载音频/视频。
metadata    指示当页面加载后仅加载音频/视频的元数据。
none    指示页面加载后不应加载音频/视频。

多数浏览器将auto作为默认值

played 属性返回 TimeRanges 对象

currentTime

ended 返回音频/视频的播放是否已结束

paused 属性返回音频/视频是否已暂停

loop设置或返回音频/视频是否应该在结束时再次播放。

muted 属性设置或返回音频/视频是否应该被静音（关闭声音）

volume 属性设置或返回音频/视频的当前音量。1为最高

networkState 属性返回音频/视频的当前网络状态

buffered//返回表示音频/视频已缓冲部分的 TimeRanges 对象

currentSrc 属性返回当前音频/视频的 URL

currentTime 属性设置或返回音频/视频播放的当前位置

defaultMuted 属性设置或返回音频/视频是否默认静音（只有chrome支持）
defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度（只有chrome支持）

duration 属性返回当前音频/视频的长度，以秒计

readyState 属性返回音频/视频的当前就绪状态
0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
1 = HAVE_METADATA - 关于音频/视频就绪的元数据
2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

seekable 属性返回 TimeRanges 对象 可寻址范围指的是用户在音频/视频中可寻址（移动播放位置）的时间范围

seeking 属性返回用户目前是否在音频/视频中寻址

事件

loadstart 当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件

durationchange 当音频/视频的时长已更改时

loadedmetadata 当指定的音频/视频的元数据已加载时

loadeddata 当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时

progress 浏览器正在下载指定的音频/视频时

oncanplay当浏览器可以播放音频/视频时

canplaythrough当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，

ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发
onended

方法

play()
pause()
load()//重新加载视频
canPlayType()//方法浏览器是否能播放指定的音频/视频类型

手写自制原生播放器forpc事件

00:00/12:0000:00/12:00

for移动端 事件

00:00/12:0000:00/12:00

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！