在使用html5 的audio,video播放語音，視頻的一些總結心得

A.Audio標籤播放音樂

　　使用audio播放音樂時，由於提供有調用的函數play(),pause()等函數，直接進行封裝就好，我使用了定時器來控制語音的時間。直接上代碼：

　　1.下面是html代碼：

<div class="yuyin">
    <a class="start" href="#" title="" alt="播放"></a>
    <a class="stop" href="#" title="" alt="暫停"></a>
    <!-- loop循環播放 preload="auto" -->
    <audio autoplay  id="audio1">
      <source src="./audio/music.mp3" type="audio/mpeg" />
      <source src="./audio/music.ogg" type="audio/ogg"/>
      您的瀏覽器不支持音頻播放。
    </audio>
    <progress id="process_1" value="0" max="100"></progress>
    <p class="time">4.23</p>
</div>.

　　2.Js控制播放，這是定時器監聽progress(圖省事，沒去用自定義process)

　　

$(function(){
            //播放完畢
            $('#audio1').on('ended', function() {
                console.log("音頻已播放完成");
                $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
            });
            //播放器控制
            var audio = document.getElementById('audio1');
            var times;
            // 設置音量30%
            audio.volume = .6;
            // $('.btn-audio').click(function() {
            //     event.stopPropagation();//防止冒泡
            //     if(audio.paused){ //若是當前是暫停狀態
            //         $('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
            //         audio.play(); //播放
            //         return;
            //     }else{//當前是播放狀態
            //         $('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
            //         audio.pause(); //暫停
            //     }
            // });

            // 當前是暫停狀態，點擊播放
            $('.start').click(function() {
                event.stopPropagation();//防止冒泡
                audio.play(); //播放
                // i播放進度  times總時間
                time_all=Math.ceil(audio.duration);
                var i = document.getElementById("process_1").value;
                progressListen(time_all,i);
                return;
            });

             // 當前是播放狀態，點擊暫停
            $('.stop').click(function() {
                event.stopPropagation();//防止冒泡
                audio.pause(); //暫停

            });

     


            // 在safri on ios裏面已經明確指出等待用戶的交互動做後才能播放media（解決自動播放）
            $('html').one('touchstart',function(){
                audio.play();
            });

            // 加載音頻資源是異步的，還沒加載完成的音頻資源，duration會返回NaN
            $("#audio1").on("canplay",function(){
                times=Math.ceil(audio.duration);
                console.log(times);
                var m = Math.floor(times/60);
                var second = Math.ceil(times%60);

                $('.yuyin>.time').text(m+"."+second);
                progressListen(times,0);
            });

            function progressListen(time,jindu) {
                var process_1 = document.getElementById("process_1");
                var audio = document.getElementById('audio1');
                
                // 間隔時間促發
                var i=jindu;
                // 1.73秒轉換爲setInterval的秒數（*1000）
                var time_jiange = (time/100)*1000;
                console.log(time_jiange+"進度條事件觸發");

                var timer = setInterval(function () {
                    // 每間隔總秒數/100 progress的value+1
                     i += 1;
                     process_1.value = i;

                    if(audio.paused){ //若是當前是暫停狀態
                        i=process_1.value;
                        clearInterval(timer);
                    }
                     if (100 == i) {
                         clearInterval(timer);
                         console.log("進度條監聽播放完畢");
                     }
                     console.log("當前進度i:"+i);
                    
                },time_jiange);
            }        
        })

上面我用了setInterval去控制，語音的開始與暫停的事件，讓暫停時，時間也暫停，再次點擊開始時從暫停的位置開始播放。固然也能夠有其餘的方法。因爲我是用兩個按鈕控制語音的播放和暫停，徹底能夠用一個按鈕控制，對視頻的狀態進行判斷。來相應處理暫停播放等。

下面是audio標籤的一些經常使用屬性和事件方法：

經常使用的控制函數：

1. load()：加載音頻、視頻軟件
2. play()：加載並播放音頻、視頻文件或從新播放暫停的的音頻、視頻
3. pause()：暫停出於播放狀態的音頻、視頻文件
4. canPlayType(obj)：測試是否支持給定的Mini類型的文件
5. canplay() 當異步視頻加載完畢時

只讀的媒體屬性：

1. duration獲取媒體文件的播放時長，以s爲單位，若是沒法獲取，則爲NaN
2. paused若是媒體文件被暫停，則返回true，不然返回false
3. ended若是媒體文件播放完畢，則返回true
4. startTime返回起始播放時間
5. error返回錯誤代碼
6. currentSrc以字符串形式返回正在播放或已加載的文件

可腳本控制的屬性值：

1. autoplay：自動播放已經加載的的媒體文件
2. loop爲true：的時候則設定爲自動播放
3. currentTime：以s爲單位返回從開始播放到目前所花的時間
4. controls：顯示或者隱藏用戶控制界面
5. volume：音量值,從0.0至1.0之間
6. muted：設置是否靜音
7. autobuffer：是否進行緩衝加載

 

B.video標籤播放視頻

　　html代碼：

<video width="430" height="270" controls autobuffer>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持 video 標籤。
 </video>            

　　在使用過程當中，若是在本地能夠播放，上傳服務器以後，在確保獲取的視頻路徑沒錯的狀況下，若是不能夠播放，能夠參考下我上一篇博客，是不是mime類型的緣由，固然緣由可能有不少。具體問題具體分析。

<video>標籤的屬性

---

• src ：視頻的屬性
• poster：視頻封面，沒有播放時顯示的圖片
• preload：預加載
• autoplay：自動播放
• loop：循環播放
• controls：瀏覽器自帶的控制條
• width：視頻寬度
• height：視頻高度

還有具體的請參考此簡書內容：http://www.jianshu.com/p/404d01b8e713/

 

兼容性的解決：

固然在使用的過程當中可能會有兼容性問題參考張鑫旭大神的這篇文章：http://www.zhangxinxu.com/wordpress/2010/03/every-browser-support-html5-video/

使用方法：
總的來講要想讓主流瀏覽器都支持HTML5標籤，使用很是簡單，只要連接一個js文件就能夠了。因此，只要您的頁面上（頭部或底部）有這麼段代碼：

<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script>

就能夠了。

html5media.min.js可自行搜索下載！