HTML5對音視頻的處理

時間 2019-12-11

原文原文鏈接

前言javascript

如今網上有許多的框架和插件，可以知足程序猿的各類需求，慢慢的，就有些忽視最基礎的東西。css

好比，大多數視頻是經過插件（好比 Flash）來顯示的。然而，並不是全部瀏覽器都擁有一樣的插件。html

HTML5 規定了一種經過 video 元素來包含視頻的標準方法。java

因此，今天影子向你們介紹的，就是HTML5對音視頻的處理。web

　

1、優點

1 關於視頻不用插件播放，點擊就能看
2 跨平臺、好升級、好維護，開發成本相對原生APP低不少
3 對移動的良好支持，支持手勢，本地存儲和視頻續播等，經過H5就能夠把本身的網站移動化。
4 更爲簡潔的代碼，更好的交互
5 支持遊戲開發瀏覽器

2、兼容性

<video id="video">
    <source src="movie/chenai.mp4"></source>
     您的瀏覽器不支持 HTML5 video 標籤。
</video>

註釋：框架

　　<video> 與</video> 標籤之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。ide

　　即，若是，瀏覽器不支持，則會顯示" 您的瀏覽器不支持 HTML5 video 標籤。 "。oop

3、兩種方式

 // 方式一 <video src="movie/chenai.mp4h"loop="loop"></video> // 方式二 <video width="320" height="240">
       <source src="movie/chenai.mp4"></source>
    </video>

註釋：網站

　　<video> 元素元素提供了 width 和 height 屬性控制視頻的尺寸.若是設置的高度和寬度，所需的視頻空間會在頁面加載時保留。。若是沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。

4、video標籤的新增屬性

  一、controls：給視頻添加播放控件。如：開始。暫停
  二、autoplay：視頻就緒後立刻播放
  三、loop：表示循環播放
  四、muted：表示視屏靜音輸出

5、用於操做DOM的方法和屬性

5.1用於操做DOM的方法

　一、play():表示視頻播放
二、pause():表示視頻暫停

5.2用於操做DOM的屬性

一、paused：設置或返回音視頻是否被暫停
  二、autoplay：設置或返回音視頻加載完以後是否當即播放
  三、controls：設置或返回音視頻是否添加控件
  四、duration：獲取音視頻的總時間，單位：秒
  五、currentTime：獲取當前播放時間
  六、defaultMuted：設置音視頻是否靜音輸出 true -- 靜音默認false，不靜音
  七、muted：設置或返回當前播放音視頻是不是靜音輸出。true -- 靜音 false --- 不是靜音
  八、playbackRate：設置音視頻播放速度。1.0表示正常；0.5表示半速；2.0表示倍速
  九、loop：設置是否循環播放。true -- 循環播放   false -- 不循環播放
  十、volume：設置或返回音視頻的音量。介於1~0之間的數
  十一、ended：返回音視頻是否播放結束。false -- 未結束 true -- 已結束

6、實例

6.1內代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            video{
                width: 600px;
                height:500px;
            }
        </style>
    </head>
    <body>
    
        <!--<video src="movie/chenai.mp4h"loop="loop"></video>-->
        <video id="video">
            <source src="movie/chenai.mp4"></source>
              您的瀏覽器不支持 HTML5 video 標籤。
        </video>
        
        <br />
        <button onclick="bofang()">點擊播放/暫停</button>
        <button onclick="timeAll()">點擊獲取總時間 </button>
        <button onclick="timeBf()">點擊獲取當前時間 </button>
        <button onclick="jingyin()">點擊靜音 </button>
        <button onclick="yinliang()">點擊獲取音量 </button>
        <button onclick="end()">是否播放結束 </button>
    </body>
    <script type="text/javascript">
                
        var video = document.getElementById("video");
        
        //點擊播放或暫停
        function bofang(){
            if (video.paused) {//播放狀態:是否暫停
                video.play();
            }else video.pause();
        }
        video.autoplay = true;
        video.controls = false;
        
        function timeAll(){
            alert(video.duration); // -- 音視頻的總時間
        }
        
        function timeBf(){
            alert(video.currentTime);// -- 當前時間
        }
        
        video.defaultMuted = false;
        
        
        function jingyin(){
            if (video.muted == false) video.muted = true;
            else video.muted = false;
        }
        
        video.playbackRate = 1.0;  // -- 改變播放速度
        video.loop = true;        // -- 是否循環播放
        
        function yinliang(){
            
            video.volume = 0.5;
            alert(video.volume);
        }
        
        function end(){
            alert(video.ended);
        }
    </script>
</html>