标签:wav min 原型 div ons 效果 ide cancel 外挂
<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:完全支持 |
全屏:
element.webkitRequestFullScreen();
( webkit)element.mozRequestFullScreen();
(Firefox )element.requestFullscreen();
(W3C )退出全屏:
document.webkitCancelFullScreen()
; (webkit )document.mozCancelFullScreen()
; (Firefox)document.exitFullscreen();
(W3C)
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
HTML5支持的音频格式:
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
是否等加载完再播放
src
要播放的音频的 URL
标签:wav min 原型 div ons 效果 ide cancel 外挂
原文地址:http://www.cnblogs.com/Lv2017/p/7046014.html