html5 音頻和視頻（audio And video）

時間 2019-11-10

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

原文原文鏈接

一、音頻和視頻

Web 上的視頻javascript

直到如今，仍然不存在一項旨在網頁上顯示視頻的標準。html

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

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

視頻格式web

當前，video 元素支持三種視頻格式：sql

格式 IE Firefox Opera Chrome Safaricanvas

Ogg No 3.5+ 10.5+ 5.0+ No瀏覽器

MPEG4 9.0+ No No 5.0+ 3.0+bash

WebM No 4.0+ 10.6+ 6.0+ Noide

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

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元素建立

        您的瀏覽器不支持video元素

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

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

 
        
        
        您的瀏覽器不支持html5 video

WEBVTT100:00:00.240 --> 00:00:04.130你們好 最近 Visual Studio 2013 作了一些更新200:00:04.140 --> 00:00:08.110那咱們今天請到 twMVC 的 Dino來爲咱們介紹這個更新裏面關於 SASS Editor 的部分300:00:18.120 --> 00:00:19.280

audio元素建立

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

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

audio source元素

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

媒體的控制自動播放

        
        您的瀏覽器不支持audio

autoplay:設置音頻自動播放

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

判斷瀏覽器支持狀況

  
         hasVideo = !!(document.createElement().canPlayType);

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

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

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

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

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

     autoplay        將媒體文件設置爲建立後自動播放，或者查詢是否已經設置autoplay
        loop            若是媒體文件已經播放完畢後能從新播放則返回,或者媒體將媒體文件設置爲循環播放
        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>