?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ????<meta charset="UTF-8"> ?5 ????<title>AV</title> ?6 </head> ?7 <body> ?8 ????<div class="content"> ?9 ????????<p>注意:audio标签设置controls="controls"才可以再页面中显示</p> 10 ????????<p>IE9开始支持</p> 11 ????????<div class="audio"> 12 ????????????<audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop> 13 ????????????????不支持audio 14 ????????????</audio> 15 ????????</div> 16 ????????<div class="video"> 17 ????????????<video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement"> 18 ????????????????不支持video 19 ????????????</video> 20 ????????</div> 21 ????????<div class="networkState"></div> 22 ????????<button id="getVideoURL">getVideoURL</button> 23 ????????<button id="palyVideo">palyVideo</button> 24 ????????<button id="pauseVideo">pauseVideo</button> 25 ????</div> 26 ????<script> 27 ????????var page = { 28 ????????????init : function(){ 29 ????????????????this.listener(); 30 ????????????}, 31 ????????????listener : function(){ 32 ????????????????var video = document.getElementById(‘videoElement‘); 33 ?34 ????????????????//error属性：不能正常读取，使用媒体数据 35 ????????????????video.addEventListener(‘error‘, function(){ 36 ????????????????????var error = video.error; 37 ????????????????????switch(error.code){ 38 ????????????????????????case 1 : 39 ????????????????????????????alert("视频的下载过程被中止"); 40 ????????????????????????????break; 41 ????????????????????????case 2 : 42 ????????????????????????????alert("网络发生故障，视频的下载过程被中止"); 43 ????????????????????????????break; 44 ????????????????????????case 3 : 45 ????????????????????????????alert(‘解码失败‘); 46 ????????????????????????????break; 47 ????????????????????????case 4 : 48 ????????????????????????????alert("媒体资源不可用或是媒体格式不被支持"); 49 ????????????????????} ?50 ????????????????},false); 51 ?52 ?53 ????????????????//networkState属性:加载过程使用networkState属性读取当前网络状态 54 ????????????????video.addEventListener(‘progress‘,function(e){ 55 ????????????????????var networkStateDisplay = document.getElementById(‘networkState‘); 56 ????????????????????if(video.networkState === 2){ 57 ????????????????????????//计算已加载的字节数与总字节数 58 ????????????????????????networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "byte]"; 59 ????????????????????} 60 ????????????????????else if(video.networkState === 3){ 61 ????????????????????????networkStateDisplay.innerHTML = "加载失败"; 62 ????????????????????} 63 ????????????????},false); 64 ?65 ????????????????//使用currentSrc属性：读取媒体数据的URL地址(只读) 66 ????????????????var videoURL ???= video.currentSrc, 67 ????????????????????videoURLBtn = document.getElementById(‘getVideoURL‘); 68 ????????????????videoURLBtn.onclick = function(){ 69 ????????????????????//这里是空的，还不知道为什么??? 70 ????????????????????console.log(videoURL); 71 ????????????????} 72 ????????????????//buffered属性 73 ?74 ????????????????//readState属性 75 ?76 ????????????????//seeking属性与seekable属性 77 ?78 ????????????????//currenTime属性 79 ????????????????//startTime属性 80 ?81 ????????????????//duration属性 82 ?83 ????????????????//play属性(开始时间,结束时间) 84 ????????????????//paused属性(true_暂停，false_播放) 85 ????????????????//ended属性(true_播放完毕，false_未完毕) 86 ?87 ????????????????//defaultPlaybackRate,playbackRate属性 88 ?89 ????????????????//volume,muted属性 90 ?91 ????????????????/* 92 ????????????????????方法： 93 ????????????????????play(),播放 94 ????????????????????pause(),暂停 95 ????????????????????load(),重新载入 96 ????????????????*/ 97 ?98 ????????????????//监听视频播放结束事件 99 ????????????????//注意这里不设置loop循环播放100 ????????????????video.addEventListener(‘ended‘,function(){101 ????????????????????alert("播放结束");102 ????????????????},true)103 104 ????????????????var palyVideoBtn ???= document.getElementById(‘palyVideo‘),105 ????????????????????pauseVideoBtn ??= document.getElementById(‘pauseVideo‘);106 ????????????????//播放视频play()107 ????????????????palyVideoBtn.onclick = function(){108 ????????????????????video.play();109 ????????????????}110 ????????????????//暂停视频pause()111 ????????????????pauseVideoBtn.onclick = function(){112 ????????????????????video.pause();113 ????????????????}114 115 ????????????????/*116 ????????????????????canPlayType方法:117 ????????????????????空字符串——不支持118 ????????????????????maybe——可能支持119 ????????????????????probably：支持120 ????????????????*/121 ????????????????var support = video.canPlayType("video/mp4");122 ????????????????console.log(support);//maybe123 124 ????????????????/*125 ????????????????????在媒体读取和播放的过程中，还有一系列的事件。126 ????????????????????对这些事件的捕捉：127 ????????????????????(1)监听的方式128 ????????????????????(2)获取事件句柄129 ????????????????*/130 131 ????????????}132 ????????}133 ????????window.onload = page.init();134 ????</script>135 </body>136 </html>HTML5 多媒体video，autio使用示例
原文地址：https://www.cnblogs.com/LinSL/p/8671040.html