HTML5视频API控件
方法描述:
addTextTrack()为音视频加入一个新的文本轨迹canPlayType()检查指定的音视频格式是否得到支持load()重新加载音视频标签play() 播放音视频pause()暂停播放当前的音视频属性属性描述audioTracks返回可用...
获得video标签,这里是DOM对象
var video = document.getElementById('videoID');
也可以通过jQuery的方法,如下:
var video = $('#videoID').get(0);
载入视频:load(),
播放视频:play(),
暂停:pause(),
快进10秒:currentTime+=10
播放速度增加:playbackRate++
播放速度增加0.1:playbackRate+=0.1
音量增加:volume+=0.1
静音:muted=true
方法描述:
addTextTrack()为音视频加入一个新的文本轨迹canPlayType()检查指定的音视频格式是否得到支持load()重新加载音视频标签play() 播放音视频pause()暂停播放当前的音视频属性属性描述audioTracks返回可用...
方法<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>PHP100 HTML5视频教程-视频播放功能-简易版</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 指定对象video的id 通过jquery获得的是一个数组
var video = $('#php100100');
// 每个功能id执行的事件
$("#play").click(function(){ video[0].play(); });
$("#pause").click(function(){ video[0].pause(); });
$("#go10").click(function(){ video[0].currentTime+=10; });
$("#back10").click(function(){ video[0].currentTime-=10; });
$("#rate1").click(function(){ video[0].playbackRate+=2; });
$("#rate0").click(function(){ video[0].playbackRate-=2; });
$("#volume1").click(function(){ video[0].volume+=0.1; });
$("#volume0").click(function(){ video[0].volume-=0.1; });
$("#muted1").click(function(){ video[0].muted=true; });
$("#muted0").click(function(){ video[0].muted=false; });
$("#full").click(function(){
video[0].webkitEnterFullscreen(); // webkit类型的浏览器
video[0].mozRequestFullScreen(); // FireFox浏览器
});
});
</script>
</head>
<video id="php100100" width="400" poster="load.jpg">
<source src="video.webm" type="video/webM" />
<source src="video.ogv" type="video/ogg" />
<source src="php100-html5-22-1.mp4" type="video/mp4" />
你的浏览器不支持html5
</video>
<hr>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="go10">快进10秒</button>
<button id="back10">快退10秒</button>
<button id="rate1">播放速度+</button>
<button id="rate0">播放速度-</button>
<button id="volume1">声音+</button>
<button id="volume0">声音-</button>
<button id="muted1">静音</button>
<button id="muted0">解除静音</button>
<button id="full">全屏</button>
</body>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>PHP100 HTML5视频教程-视频播放功能-简易版</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 指定对象video的id 通过jquery获得的是一个数组
var video = $('#php100100');
// 每个功能id执行的事件
$("#play").click(function(){ video[0].play(); });
$("#pause").click(function(){ video[0].pause(); });
$("#go10").click(function(){ video[0].currentTime+=10; });
$("#back10").click(function(){ video[0].currentTime-=10; });
$("#rate1").click(function(){ video[0].playbackRate+=2; });
$("#rate0").click(function(){ video[0].playbackRate-=2; });
$("#volume1").click(function(){ video[0].volume+=0.1; });
$("#volume0").click(function(){ video[0].volume-=0.1; });
$("#muted1").click(function(){ video[0].muted=true; });
$("#muted0").click(function(){ video[0].muted=false; });
$("#full").click(function(){
video[0].webkitEnterFullscreen(); // webkit类型的浏览器
video[0].mozRequestFullScreen(); // FireFox浏览器
});
});
</script>
</head>
<video id="php100100" width="400" poster="load.jpg">
<source src="video.webm" type="video/webM" />
<source src="video.ogv" type="video/ogg" />
<source src="php100-html5-22-1.mp4" type="video/mp4" />
你的浏览器不支持html5
</video>
<hr>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="go10">快进10秒</button>
<button id="back10">快退10秒</button>
<button id="rate1">播放速度+</button>
<button id="rate0">播放速度-</button>
<button id="volume1">声音+</button>
<button id="volume0">声音-</button>
<button id="muted1">静音</button>
<button id="muted0">解除静音</button>
<button id="full">全屏</button>
</body>
</body>
</html>
方法 | 描述 |
---|---|
addTextTrack() | 为音视频加入一个新的文本轨迹 |
canPlayType() | 检查指定的音视频格式是否得到支持 |
load() | 重新加载音视频标签 |
play() | 播放音视频 |
pause() | 暂停播放当前的音视频 |
属性
属性 | 描述 |
---|---|
audioTracks | 返回可用的音轨列表(MultipleTrackList对象) |
autoplay | 媒体加载后自动播放 |
buffered | 返回缓冲部件的时间范围(TimeRanges对象) |
controller | 返回当前的媒体控制器(MediaController对象) |
controls | 显示播控控件 |
crossOrigin | 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 | 返回可用的视频轨迹(VideoTrackList对象) |
volume | 音量值 |
事件
事件 | 描述 |
---|---|
abort | 当音视频加载被异常终止时产生该事件 |
canplay | 当浏览器可以开始播放该音视频时产生该事件 |
canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
durationchange | 当媒体的总时长改变时产生该事件 |
emptied | 当前播放列表为空时产生该事件 |
ended | 当前播放列表结束时产生该事件 |
error | 当加载媒体发生错误时产生该事件 |
loadeddata | 当加载媒体数据时产生该事件 |
loadedmetadata | 当收到总时长,分辨率和字轨等metadata时产生该事件 |
loadstart | 当开始查找媒体数据时产生该事件 |
pause | 当媒体暂停时产生该事件 |
play | 当媒体播放时产生该事件 |
playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
progress | 当获取到媒体数据时产生该事件 |
ratechange | 当播放倍数改变时产生该事件 |
seeked | 当用户完成跳转时产生该事件 |
seeking | 当用户正执行跳转时操作的时候产生该事件 |
stalled | 当试图获取媒体数据,但数据还不可用时产生该事件 |
suspend | 当获取不到数据时产生该事件 |
timeupdate | 当前播放位置发生改变时产生该事件 |
volumechange | 当前音量发生改变时产生该事件 |
waiting | 当视频因缓冲下一帧而停止时产生该事件 |