在使用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可自行搜索下載！