事件 内容 html vtt 每一个 reload 编码 titles
- <video id="media" src="123.mp4" width="500" poster="examp1.jpg" >
- 您的浏览器不支持video
- </video>
标签,浏览器会从第一个开始识别,如果第一个不被识别,则会继续识别第二个;如果第一个识别成功,则会直接播放第一种格式视频
- source
- <video controls=" controls">
- <source src="1.mp4" type="video/mp4" />
- //src属性写到source标签中,要指定视频的type类型,例如MP4的即为type="video/mp4"
- <source src=" 2.ogg" type="video/ogg" />
- //ogg格式
- <source src="3.webm" type="video/webm" />
- //webm格式
- </video>
属性 (常用) | 值 | 功能描述 |
---|---|---|
controls | controls | 是否显示播放控件 |
autoplay | autoplay | 设置是否打开浏览器后自动播放 |
width | Pilex(像素) | 设置播放器的宽度 |
height | Pilex(像素) | 设置播放器的高度 |
loop | loop | 设置视频是否循环播放(即播放完后继续重新播放) |
preload | preload | 设置是否等加载完再播放 |
src | url | 设置要播放视频的 url 地址 |
poster | imgurl | 设置播放器初始默认显示图片 |
autobuffer | autobuffer | 设置为浏览器缓冲方式,不设置 autoply 才有效 |
API | 事件说明 |
---|---|
play | video.play(); 播放视频 |
pause | video.pause(); 暂停播放视频 |
load | video.load(); 将全部属性回复默认值,视频恢复重新开始状态 |
canPlayType | var support = videoid.canPlayType('video/mp4′); 判断浏览器是否支持当前类型的视频格式返回值:空字符串:不支持 Maybe:可能支持 Probably:完全支持 |
(webkit)
- element.webkitRequestFullScreen();
(Firefox)
- element.mozRequestFullScreen();
(W3C)
- element.requestFullscreen();
; (webkit)
- document.webkitCancelFullScreen()
; (Firefox)
- document.mozCancelFullScreen()
(W3C)
- document.exitFullscreen();
html5 video 外挂字幕英文简称 webVTT【video text track 网络视频文本轨道】,是一个以. vtt 结尾的纯文本文件,里面会包含以下几种视频信息:
这里有一个标准的示例:
- WEBVTT
- 1
- 00:00:13.000 --> 00:00:16.100
- 这里是字幕
- 2
- 00:00:16.100 --> 00:00:20.100
- 这里是第二行字幕
webvtt 文件中的每一项为一个 cue,每一个 cue 以箭头分割的开始时间和结束时间,cue 对应的文本在下一行,每一个 cue 可以有一个 id, cue 的时间格式为 hours:minutes:seconds:milliseconds,必须严格遵守,时分秒必须为两位数字,不足的以 0 填补,毫秒必须是三位数字。
这个里有个. vtt 文件的格式校验器 https://quuz.org/webvtt/?spm=5176.100239.blogcont4269.7.kKaynO
、
- ACC
、
- MP3
- Vorbis
免费 支持的浏览器:
- Ogg
、
- C
、
- F
- O
收费 支持的浏览器:
- MP3
、
- I
、
- C
- S
收费 支持的浏览器:
- Wav
、
- F
、
- O
- S
- <audio controls src="123.mp3">
- </audio>
audio source 元素
- <audio controls>
- <source src="123.mp3">
- <source src="123.ogg">
- </audio>
自动播放
- autoplay
向用户显示播放控件
- controls
循环
- loop
是否等加载完再播放
- preload
要播放的音频的 URL
- src
H5 视频 / 音频
来源: http://www.bubuko.com/infodetail-2127251.html