H5視訊、音訊詳解
阿新 • • 發佈：2018-12-14
<body> <!-- 視訊:video source 音訊:audio 媒體元素： 1.controls:顯示或隱藏使用者控制介面 2.autoplay:媒體是否自動播放 3.loop:是否迴圈播放 4.currentTime:開始到播放現在所用的時間 5.duration:持續總時間(只讀 true false) 6.volume:0.0-1.0的音量相對值 7.muted:是否靜音(只讀 true false) 8.autobuffer:開始的時候是否快取載入，autoplay忽略此屬性 9.paused:媒體是否暫停(只讀 true false) 10.ended:媒體是否播放完畢(只讀 true false) 11.error:媒體發生錯誤，返回錯誤程式碼(只讀 true false) 12.currentSrc:以字串的形式返回媒體地址(只讀 true false) 視訊格式包括：.avi.flv.mp4.mkv.ogv 三個js方法 1.play() 媒體播放 2.pause() 媒體暫停 3.load() 重新載入媒體 Video 額外特性(js) poster:視訊播放前的預覽圖片 width、height：設定視訊尺寸(寫行間) 例：<video controls="controls" width="500" height="500"> videoWidth、videoHeight:視訊的實際尺寸(只讀) --> <audio src=".mp3" controls="controls" autoplay="autoplay" loop="loop" type="video/mp3"></audio> <audio src=".mp3" controls autoplay loop type="video/mp3"></audio><!--簡寫--> <video src=".mp4" controls autoplay type="video/mp4"></video> <video width="500" height="250" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> 您的瀏覽器不支援此種視訊格式。 <!-- 在ios和android都可以播放 --> <!-- 自動識別瀏覽器支援格式 --> </video> <!-- //////////////////////////////////////////////// --> <!--另外兩種播放程式碼 1、多--> <iframe src="http://static.video.qq.com/TPout.swf?vid=n03287p1xbx&auto=0" width="640" height="498" frameborder="0" allowfullscreen=""></iframe> <embed id="mv" width="100" height="100" controls="controls" loop="" src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf? max_age=86400&v=20161117&vid=a0786tkmfk1&auto=0" type="video/mp4"> <!-- //////////////////////////////////////////////// --> <audio id="al" src=".mp3" controls autoplay type="video/mp3"></audio> <script type="text/javascript"> var oA = document.getElementById('al'); /*setInterval(function(){ console.log(oA.currentTime); },1000)*/ oA.currentTime = 60;// 設定時間 從60s開始 console.log(oA.duration);//返回 true false console.log(oA.volume);//1 console.log(oA.muted);//返回 true false </script> <!-- 三個js方法 1.play() 媒體播放 2.pause() 媒體暫停 3.load() 媒體載入 --> <video id="mv" controls="controls" width="500" height="500"> <!-- <source src="movie.ogg" type="video/ogg"> --> <source src="Intermission-Walk-in_512kb.mp4" type="video/mp4"> 您的瀏覽器不支援此種視訊格式。 <!-- 在ios和android都可以播放 --> <!-- 自動識別瀏覽器支援格式 --> </video> <script type="text/javascript"> var oV = document.getElementById('mv'); var oS = document.getElementsByTagName('source'); //設定視訊播放前的預覽圖片 oV.poster = "2.png"; //視訊預設多大就是多大、設定視訊的大小 oV.width = 500; oV.height = 500; //獲取視訊的實際尺寸 console.log(oV.videoWidth); console.log(oV.videoHeight); //滑鼠移入視訊播放 oV.onmouseover = function(){ this.play(); } //滑鼠移出視訊暫停 oV.onmouseout = function(){ this.pause(); } // load()方法 btn.onclick = function(){ oS[0].src = 'xxx.mp4' oV.load(); } </script> </body>