酒浓码浓 - 前端视频之PC端

video标签

<video></video>标签

简介：

<video src=“地址” controls=“ controls“>您的浏览器不支持video标签</video>

最好如下方式：浏览器并不是都支持所有的格式，所以你可Source 提供多个视频源，然后浏览器将会使用它所支持的第一个源。

<video controls="controls" width="500">

 <Source src="move.ogg" type="video/ogg">

 <Source src="move.mp4" type="video/mp4">

 <Source src="move.webm" type="video/webm">

 <track label="Deutsch" kind="subtitles" srclang="de" src="123.vtt">  字幕文件

</video>

 

详情请查阅如下文档：

W3C基础文档

W3C属性文档

W3C事件文档

微信相关文档及支持格式

移动端开发问题请查阅如下链接：

移动端H5开发

微信浏览器自动播放

 

兼容性：

 

Chrome

webkit（Safari5.1/Chrome15）：

element. webkitRequestFullScreen（）全屏

document. webkitCancelFullScreen（）退出全屏

Firefox（works in nightly）：

element. mozRequestFullScreen（）全屏

document. mozCancelFullScreen（）退出全屏

W3C提议：

element. RequestFullScreen（）/ launchFullScreen（）全屏

document. exitCancelFullScreen（）退出全屏

 

常用属性：

videoWidth 视频文件的宽，不是video标签的宽，高同理

audioTracks 返回可用的音轨列表（Multiple  TrachList对象 ）

autoplay 媒体加载后自动播放

buffered 返回缓冲部件的时间范围（TimeRanges对象）

controller 返回当前的媒体控制器（MediaController对象）

controls 显示播控控件

crossDrigin CORS设置

currentSrc 返回当前媒体的URL

currentTime 当前播放的时间，单位秒

defaultMuted 缺省是否静音

defaultPlaybackRate 播控的缺省倍速

duration 返回媒体的播放总时长 单位秒

ended 返回当前播放是否结束标志

error 返回当前播放是否结束标志

initialTime 返回初始播放的位置

loop 是否循环播放

mediaGroup 当前音视频所属媒体组（用来链接多个视频标签）

muted 是否静音

networkState 返回当前网络状态

paused 是否暂停

playbackRate 播放的倍速（加速，减速播放）

played 当前播放部件已经播放的时间范围（TimeRanges对象）

preload 页面加载时是否同时加载音视频

readyState 返回当前的准备状态

seekable 返回当前可跳转部件的时间范围 （TimeRanges对象）

seeking 返回用户是否做了跳转操作

src 当前音视频频源的URL

startOffsetTime 返回当前的时间偏移（Date对象）

textTracks 返回可用的文本轨迹（TextTrackList对象）

videoTracks 返回可用的视频轨迹 （video TrackList对象）

volume 音量值

 

常用事件：

abort 当音频加载被异常终止时产生该事件

canplay 当浏览器可以开始播放该音视频时产生该事件

canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件

durationchange 当媒体的总时长改变时产生事件

emptied 当前播放列表为空时产生该事件

ended 当前播放列表结束时产生该事件

error 当加载媒体发生错误时

loadeddata 当加载媒体数据时产生该事件

loadedmetadata 当收到总时长，分辨率和字轨等 metadata时...

loadstart 当开始查找媒体数据时产生该事件

pause 当暂停时

play 当播放时

playing 当因缓冲而引起的暂停和停止恢复到播放时

progress 当获取到媒体数据时

ratechange 当播放倍数改变时

seeked 当用户完成跳转

seeking 正执行跳转时

stalled 试图获取媒体数据 但数据还不可用时

suspend 当获取不到数据时

timeupdate 当前播放位置发生改变时产生该事件

volumechange 当音量发生改变时

waiting 当视频因缓冲下一帧而停止时