HTML5 视频标签的方法、属性和事件

来源：互联网发布：零售药店软件编辑：程序博客网时间：2024/06/01 13:33

HTML5视频API控件

    获得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>

方法描述addTextTrack()为音视频加入一个新的文本轨迹canPlayType()检查指定的音视频格式是否得到支持load()重新加载音视频标签play()播放音视频pause()暂停播放当前的音视频

属性

属性描述audioTracks返回可用的音轨列表（MultipleTrackList对象）autoplay媒体加载后自动播放buffered返回缓冲部件的时间范围(TimeRanges对象)controller返回当前的媒体控制器（MediaController对象）controls显示播控控件crossOriginCORS设置currentSrc返回当前媒体的URLcurrentTime当前播放的时间，单位秒defaultMuted缺省是否静音defaultPlaybackRate播控的缺省倍速duration返回媒体的播放总时长，单位秒ended返回当前播放是否结束标志error返回当前播放的错误状态initialTime返回初始播放的位置loop是否循环播放mediaGroup当前音视频所属媒体组 (用来链接多个音视频标签)muted是否静音networkState返回当前网络状态paused是否暂停playbackRate播放的倍速played当前播放部件已经播放的时间范围(TimeRanges对象)preload页面加载时是否同时加载音视频readyState返回当前的准备状态seekable返回当前可跳转部件的时间范围(TimeRanges对象)seeking返回用户是否做了跳转操作src当前音视频源的URLstartOffsetTime返回当前的时间偏移(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

当视频因缓冲下一帧而停止时产生该事件

0 0