大家好,又见面了,我是你们的朋友全栈君。
一、虽然有的属性是boolean类型,但仍旧建议按照XHTML书写(属性名=”属性值”)格式,避免出现错误 (下面加粗的属性为常用属性)
属性 |
值 |
功能描述 |
controls |
controls |
是否显示播放控件 |
autoplay |
autoplay |
设置是否打开浏览器后自动播放 |
width |
Pilex(像素) |
设置播放器的宽度 |
height |
Pilex(像素) |
设置播放器的高度 |
loop |
loop |
设置视频是否循环播放(即播放完后继续重新播放) |
preload |
preload |
设置是否等加载完再播放 |
src |
url |
设置要播放视频的url地址 |
poster |
imgurl |
设置播放器初始默认显示图片 |
autobuffer |
autobuffer |
设置为浏览器缓冲方式,不设置autoply才有效 |
演示:
<video controls="controls" width="500px" height="500px" loop autoplay poster="imgUrl">
<source src="黑客之都.mp4" type="video/mp4"/>
<track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/>
</video>
二、.video标签API方法:Video标签也提供了比较人性化的API接口方法,供写JS时直接调用,方便简单
API |
事件说明 |
addTextTrack() |
向音频/视频添加新的文本轨道。 |
play |
video.play(); 播放视频 |
pause |
video.pause(); 暂停播放视频 |
load |
video.load(); 将全部属性回复默认值,视频恢复重新开始状态 |
canPlayType |
var support = videoid.canPlayType(‘video/mp4’); 判断浏览器是否支持当前类型的视频格式 返回值: 空字符串:不支持 Maybe:可能支持 Probably:完全支持 |
关于video标签的API接口在JS中用法如下:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 video::cue{ 6 background-color:transparent; 7 color:white; 8 font-size:20px; 9 line-height: 100px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <video controls="controls" id="video1"> 16 <source src="黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/> 17 <track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/> 18 </video> 19 <button onclick="isPlay(this)">播放</button> 20 <button onclick="replay()">重新播放</button> 21 <button onclick="isPlayType()">浏览器支持</button> 22 23 <script> 24 var video1 = document.getElementById("video1"); //括号内为video标签的id 25 //播放视频(点击播放按钮,后变成暂停) 26 function isPlay(obj1){ 27 if(video1.paused){ //paused属于视频api属性 28 obj1.innerHTML="暂停"; 29 video1.play(); 30 }else{ 31 obj1.innerHTML="播放"; 32 video1.pause(); 33 } 34 } 35 36 //重新从开头播放 37 function replay(){ 38 video1.load(); 39 } 40 41 //判断要播放的视频格式当前浏览器是否支持 42 function isPlayType(){ 43 var support = video1.canPlayType("video/mp4"); 44 console.log(support); //返回结果:空字符串、maybe(可能支持)、probably(支持) 45 } 46 </script> 47 </body> 48 </html>
三、video标签API属性: Video不仅提供了API接口,还提供了许多的API属性,方便在JS中做判断,如下:大部分属性通过boolean值判断
API属性 |
事件说明 |
duration |
返回媒体的播放总时长,单位秒 |
loop |
是否循环播放 |
muted |
是否静音 |
paused |
是否暂停 |
currentTime |
当前播放时间(单位:秒) |
volume |
音量值(0~1) |
networkState |
返回当前网络状态 |
playbackRate |
播放的倍速(加速、减速播放)(-2~2) |
src |
当前视频源的URL |
ended |
返回当前播放是否结束标志 |
error |
返回当前播放的错误状态 |
initialTime |
返回初始播放的位置 |
mediaGroup |
当前音视频所属媒体组 (用来链接多个音视频标签) |
played |
当前播放部件已经播放的时间范围(TimeRanges对象) |
preload |
页面加载时是否同时加载音视频 |
readyState |
返回当前的准备状态 |
seekable |
返回当前可跳转部件的时间范围(TimeRanges对象) |
audioTracks |
返回可用的音轨列表(MultipleTrackList对象) |
autoplay |
媒体加载后自动播放 |
buffered |
返回缓冲部件的时间范围(TimeRanges对象) |
controller |
返回当前的媒体控制器(MediaController对象) |
controls |
显示播控控件 |
crossOrigin |
CORS设置 |
currentSrc |
返回当前媒体的URL |
defaultMuted |
缺省是否静音 |
defaultPlaybackRate |
播控的缺省倍速 |
seeking |
返回用户是否做了跳转操作 |
startOffsetTime |
返回当前的时间偏移(Date对象) |
textTracks |
返回可用的文本轨迹(TextTrackList对象) |
videoTracks |
返回可用的视频轨迹(VideoTrackList对象) |
演示:
1 <script> 2 function setting(){ 3 video1.muted=true; //设置静音 4 video1.volume=0.2; //设置音量,1等于100% 5 video1.playbackRate=2; //2倍播放速度 6 video1.controls=false; //不显示播控控件 7 } 8 </script>
四、音频/视频事件
事件 | 描述 |
abort | 当音频/视频的加载已放弃时触发。 |
canplay | 当浏览器可以开始播放音频/视频时触发。 |
canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
durationchange | 当音频/视频的时长已更改时触发。 |
emptied | 当目前的播放列表为空时触发。 |
ended | 当目前的播放列表已结束时触发。 |
error | 当在音频/视频加载期间发生错误时触发。 |
loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
loadstart | 当浏览器开始查找音频/视频时触发。 |
pause | 当音频/视频已暂停时触发。 |
play | 当音频/视频已开始或不再暂停时触发。 |
playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
progress | 当浏览器正在下载音频/视频时触发。 |
ratechange | 当音频/视频的播放速度已更改时触发。 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时触发。 |
suspend | 当浏览器刻意不获取媒体数据时触发。 |
timeupdate | 当目前的播放位置已更改时触发。 |
volumechange | 当音量已更改时触发。 |
waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155505.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...