音视频实例
视频属性及方法实例：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>video属性测试</title> <script type="text/javascript"> window.onload = function(){ var el = document.getElementsByTagName('video'); for(var i = 0 ; i < el.length ; i++){ /*点击该视频获取视频如下信息*/ el[i].index = i; el[i].onclick = function(e){ var e = event || event.window; var timer = '媒体总时长 = ' + this.duration, curTime = '当前播放的时长 = ' + this.currentTime, end = '媒体是否播放完 = ' + this.ended, paused = '媒体是否被暂停 = ' + this.paused, startT = '媒体最早的播放时间 = ' + this.startTime, errorMsg = '发生错误情况下返回的错误代码 = ' + this.error, curSrc = '返回当前正在播放或已加载的文件 = ' + this.currentSrc, muted = '当前媒体是否静音 = ' + this.muted, video =this.index + '\n' + timer + '\n' + curTime + '\n' + end + '\n' + paused + '\n' + startT + '\n' + errorMsg + '\n' + curSrc + '\n' + muted ; console.log( video ); e.cancelBubble = true ; } /*视频开始播放时触发的事件*/ el[i].addEventListener('play',function(){ alert('某个视频已开始播放') }) /*视频暂停时触发的事件*/ el[i].addEventListener('pause',function(){ alert('某个视频已暂停播放') }) /*视频播放完毕后触发的事件*/ el[i].addEventListener('ended',function(){ alert('某个视频已播放完毕') }) /*视频加载时触发的事件*/ el[i].addEventListener('progress',function(){ console.log('某个视频正在加载'); }) /*视频等待加载下一帧时触发的事件*/ el[i].addEventListener('waiting',function(){ alert('网速不给力呀'+'某个视频卡克了'); }) /*视频加载完成时间与总字节数时触发*/ el[i].addEventListener('loadedmetadata',function(){ alert('某个视频已加载完毕') }) /*当前媒体正在播放时触发的事件 此事件只触发一次*/ el[i].addEventListener('playing',function(){ console.log('某个视频正在播放，亲不要急') }) /*当视频音量改变或静音时触发*/ el[i].addEventListener('volumechange',function(){ console.log('亲，某个视频音量在改变哟'); }) el[i].addEventListener('error',function(){ alert('亲，很遗憾某个视频加载失败了'); }) } var h5Video = document.getElementById('h5_video'); //点击document是 h5Video 此视频加载 document.onclick = function(){ alert('此时第四个视频将加载'); h5Video.load(); } //点击 此 h5Video 视频 时， 如果暂停就播放，如果播放就暂停 h5Video.onclick = function(e){ var e = event || event.window; //判断视频当前的状态 if(this.paused){ //暂停后再播放让当前视频 currentTime 的此属性值为零，这样就可以从头播放了 //this.currentTime = 50; this.play(); }else{ this.pause(); } e.cancelBubble = true ; } /*监听当前视频播放*/ h5Video.addEventListener('timeupdate',function(){ console.log(h5Video.currentTime); }) /*播放开始时触发的事件*/ } </script> <style type="text/css"> body{ background: rgba(0,0,0,0.9); color:#fff; } video{ display: block; width:400px; margin:10px auto; } p{ text-align: center; } </style> </head> <body> <b>查看此页面是请打开控制台，很多数据会有变化显示。请随意点击视频，谢谢。点击document时，第四个视频加载。</b> <p>什么属性都不加</p> <video src="video/test1.mp4"> 该浏览器不支持视频 </video> <p>controls ：显示控制条，播放中控制条隐藏，鼠标放上显示</p> <video src="http://www.5942.name/h5_video.mp4" controls></video> <p>autoplay ：视频载入完成后自动播放</p> <video src="http://www.5942.name/h5_video.mp4" autoplay></video> <p>preload ：页面载入后载入视频 。取值：auto-载入视频 、 metadata-载入视频信息（时间、尺寸、第一帧、曲目等）、none-不载入</p> <video src="http://www.5942.name/h5_video.mp4" controls preload id="h5_video"></video> <p>loop ：重播</p> <video src="http://www.5942.name/h5_video.mp4" loop autoplay></video> <p>poster ：视频文件播放前显示图片</p> <video src="http://www.5942.name/h5_video.mp4" poster ></video> </body> </html>
以上为音视频常用属性及事件，还有一些属性没有写出来，具体请观看W3CHTML。
实例展示请点击。
通常在做音视频的时候都要考虑一个问题，那就是浏览器是否支持你的媒体资源的格式。
所以很多时候我们都需要先去检测一下这个问题，这个时候就用到了canPlayType() 。
此方法可以检测浏览器是否能播放指定的音频/视频类型，跟随的返回值：
"probably" - 浏览器最可能支持该音频/视频类型
"maybe" - 浏览器也许支持该音频/视频类型
"" - （空字符串）浏览器不支持该音频/视频类型
实例：
var video=document.getElementById("video"); var support=video.canPlayType('video/mp4; codecs="theora, vorbis"');
alert(support)
此方法参数取值：
规定要检测的音频/视频类型。
常用值：
video/ogg
video/mp4
video/webm
audio/mpeg
audio/ogg
audio/mp4
常用值，包括编解码器：
video/ogg; codecs="theora, vorbis"
video/mp4; codecs="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
audio/mp4; codecs="mp4a.40.5"
注释：如果包含编解码器，则只能返回 "probably"。
参考文档：W3SCHOOL
