html5 音頻和視頻（audio And video）

時間 2019-11-10

標籤 html5 html 音頻視頻 audio video 欄目 HTML5 简体版

原文原文鏈接

一、音頻和視頻html

Web 上的視頻
直到如今，仍然不存在一項旨在網頁上顯示視頻的標準。
今天，大多數視頻是經過插件（好比 Flash）來顯示的。然而，並不是全部瀏覽器都擁有一樣的插件。
HTML5 規定了一種經過 video 元素來包含視頻的標準方法。

視頻格式
當前，video 元素支持三種視頻格式：
格式　　 IE 　　 Firefox 　　 Opera 　　Chrome 　　Safari
Ogg 　　 No 　　 3.5+ 　　 10.5+ 　　 5.0+ 　　　　No
MPEG4 　　9.0+ 　 No No 　　　　 5.0+ 　　　　3.0+
WebM 　　 No 　 4.0+ 　　 10.6+ 　　　6.0+ 　　　　No
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件html5

補充：在火狐最新版本下發現其是支持MP4視頻格式的，感謝樓主@正在緩衝的補充！canvas

Web 上的音頻
直到如今，仍然不存在一項旨在網頁上播放音頻的標準。
今天，大多數音頻是經過插件（好比 Flash）來播放的。然而，並不是全部瀏覽器都擁有一樣的插件。
HTML5 規定了一種經過 audio 元素來包含音頻的標準方法。
audio 元素可以播放聲音文件或者音頻流。

音頻格式
當前，audio 元素支持三種音頻格式：
　　　　　　　　IE 9 　　Firefox 3.5 　　 Opera 10.5 　　 Chrome 3.0 　　 Safari 3.0
Ogg Vorbis 　　　　　　 √ 　　　　　　　　 √ 　　　　　　 √
MP3　　　　　　 √ 　　　　　　　　　　　　　　　　　　　　 √ 　　　　　 √
Wav 　　　　　　　　　 √ 　　　　　　　　 √ 　　　　　　　　　　　　　　 √瀏覽器

簡單的video元素建立ide

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" controls>
        您的瀏覽器不支持video元素
</video>

視頻默認的大小是300*150
controls：顯示視頻的默認的控件函數

video標籤的使用（帶字幕文件）oop

<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg"> 
        <!--此處添加字幕文件-->
        <track label="English" kind="subtitles" srclang="en" src="./test.vtt" default>
        您的瀏覽器不支持html5 video
    </video>

<!--字幕文件的格式以下：-->
    <pre>
        WEBVTT
        1
        00:00:00.240 --> 00:00:04.130
        你們好 最近 Visual Studio 2013 作了一些更新

        2
        00:00:04.140 --> 00:00:08.110
        那咱們今天請到 twMVC 的 Dino
        來爲咱們介紹這個更新裏面關於 SASS Editor 的部分

        3
        00:00:18.120 --> 00:00:19.280
    </pre>

audio元素建立post

<audio controls src="http://www.w3school.com.cn/i/song.mp3">
</audio>

controls:顯示通用的用戶控件，包括開始，中止，跳播，以及音量控制編碼

audio source元素url

<audio controls>
        <source src="http://www.w3school.com.cn/i/song.mp3">
        <source src="http://www.w3school.com.cn/i/song.ogg">
    </audio>

source提供多個音頻元素，供瀏覽器自身播放能力自動選擇，若是支持的不知一種，瀏覽器會選擇第一個來源。

媒體的控制自動播放

<audio autoplay controls>
        <source src="http://www.w3school.com.cn/i/song.mp3">
        您的瀏覽器不支持audio
    </audio>

autoplay:設置音頻自動播放

二、可腳本話的視頻和音頻

判斷瀏覽器支持狀況

  //    判斷瀏覽器是否支持audio或者video元素最簡單的辦法是用腳本動態建立它，而後檢測特定的函數是否存在
        var hasVideo = !!(document.createElement('video').canPlayType);

js中控制音頻或者視頻的內置的方法

　　　　　　load() 　　　　　　　加載音頻或者視頻文件，爲播放作準備。一般狀況下不須要調用，除非是動態建立的的元素，用來在在播放前加載
        　play() 　　　　　　　加載（若是還未加載完成）並播放音頻或視頻文件，除非音頻或視頻已經暫停在其餘位置了，不然從頭開始
       　 pause() 　　　　　　 暫停處於播放的視頻或者音頻文件
        　canPlayType(type)  試video元素是否支持給定MIME類型的文件

js中控制音頻或者視頻的內置只讀屬性

　　　　　duration    整個媒體文件的播放時長，以s爲單位，若是沒法獲取時長返回NaN
        paused        若是媒體文件當前被暫停，則返回true,若是還未開始播放也返回true
        ended        若是媒體文件已經播放完畢。返回true
        startTime    返回最先的播放起始時間，通常是0.0，除非是從緩衝過的文件，而且一部分已經不在緩衝區了！
        error        在發生錯誤的時候返回的錯誤代碼
        currentSrc    以字符串的形式返回當前正在播放的或已經加載的文件，對應於瀏覽器就是source選擇的文件

js中可被腳本修改並影響播放的部分媒體元素的特性

　　　　 autoplay        將媒體文件設置爲建立後自動播放，或者查詢是否已經設置autoplay
        loop            若是媒體文件已經播放完畢後能從新播放則返回true,或者媒體將媒體文件設置爲循環播放
        currentTime        以s爲單位返回從開始播放到如今所用的時間，在播放過程當中，設置currentTime來進行搜索，並定位到媒體文件特定的位置
        controls        顯示或隱藏用戶控制界面，或者查詢用戶控制界面當前是否可見
        volume            在0.0到1.0以前設置音頻音量的值，或者查詢當前音量的相對值
        muted            爲音頻文件設置靜音或者消除靜音，或者檢測當前是否爲靜音
        autobuffer        通知播放器在媒體文件開始播放前是否進行緩衝加載，若是媒體文件設置autoplay,則忽略該屬性

video元素的額外特性

　　　　poster                    在視頻加載完成以前，表明視頻內容的圖片的url地址，該屬性可讀可寫，能夠隨意修改
        width,height             取或設置顯示的尺寸。若是設置的寬度與視頻自己大小不匹配，可能致使四周會出現黑色區域
        videoWidth,videoHeight   返回視頻固有的寬度和高度，只讀

三、html5經過canvas抓取視頻（實例演示）

<!doctype html>
<meta charset="utf-8">
<html>
    <title></title>
    <body>
        <video id="movies" src="test.mp4" controls="controls" autobuffer="true" oncanplay="startVideo()" onended="stopTimeLine()" width="1920px" height="758px">
        </video>
        <canvas id="timeLine" width="1920px" height="758px">
        </canvas>
    </body>
    <script>    
        var updataInterval = 100;//抓取幀的時間間隔
        var frameWidth = 1920;//時序中幀的尺寸
        var frameHeight = 758;
        //時序中總的幀數
        var frameRows = 4;
        var frameColumns = 4;
        var frameGrid = frameRows*frameColumns;
       //當前幀
        var frameCount = 0;
        //播放完取消計時器
        var intervalid;
        var videoStart = false;
        //添加updateFrame函數
        function updateFrame(){
            var video = document.getElementById('movies');
            console.log(video.videoWidth);
            console.log(video.videoHeight);
            var timeline = document.getElementById('timeLine');
            var cxt = timeline.getContext('2d');
            //根據幀數計算出當前播放的播放的位置
            //而後以視頻爲輸入參數繪製圖像
            var framePos = frameCount%frameGrid;
            var frameX = (framePos%frameColumns)*frameWidth;
            var frameY = (framePos%frameRows)*frameHeight;
            cxt.drawImage(video,0,0,1920,758,frameX,frameY,frameWidth,frameHeight);
            frameCount++;
        }
        function startVideo(){
            if(videoStart){
                return;
            }
            videoStart = true;
            updateFrame();
            intervalId = setInterval(updateFrame,updataInterval);
        }
        //處理用戶輸入
        var timeLine = document.getElementById('timeLine');
        timeLine.onclick = function(evt){
            var offX = evt.layerX - timeLine.offsetLeft;
            var offY = evt.layerY - timeLine.offsetTop;
            var clickedFrame = Math.floor(offY/frameHeight)*frameRows;
                clickedFrame += Math.floor(offX/frameWidth);    
            var seekedFramed = (((Math.floor(frameCount/frameGrid)*frameGrid)) + clickedFrame);
            if(clickedFrame > (frameCount%16)){
                seekedFramed = frameGrid;
            }
            if(seekedFramed < 0){
                return;
            }
            var video =  document.getElementById('movies');
            video.currentTime = seekedFramed*updataInterval/1000;
            frameCount = seekedFramed;
        }
        function stopTimeLine(){
            clearInterval(intervalId);
        }
    </script>
</html>

html5的audio和video元素的引入，讓html5在媒體選擇上能夠不須要經過引入插件的形式來播放音頻和視頻文件，此外音頻和視頻的集成API方法也能夠方便咱們控制音頻和視頻！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。