video標簽是HTML5新增的用于定義視頻的標簽
在標簽之間放置文本內容，這樣老的瀏覽器就在訪問時就會顯示文本內容。
<video scr=data/test.mp4"">您的瀏覽器版本過低不能訪問，請升級</video>

支持格式

mp4、webm、ogv

• safari瀏覽器和IE9以上瀏覽器只支持mp4
• IE8以下不支持
• IE9以上瀏覽器可以使用source標簽支持解決兼容性

<video src="data/test.webm">
    <source src="data/test.ogv">
    <source src="data/test.mp4">
您的瀏覽器版本過低不能訪問，請升級
</video>

如果播放失敗會繼續下一個，全都不行則提示文本

• WebM由Google提出，是一個開放、免費的媒體文件格式。WebM 影片格式其實是以 Matroska（即 MKV）容器格式為基礎開發的新容器格式，里面包括了VP8影片軌和 Ogg Vorbis 音軌，其中Google將其擁有的VP8視頻編碼技術以類似BSD授權開源，Ogg Vorbis 本來就是開放格式。
  關于webm格式詳細
• Ogg是一個自由且開放標準的容器格式，由Xiph Org 基金會所維護。Ogg格式并不受到軟體專利的限制，并設計用於有效率地串流媒體和處理高品質的數位多媒體。
  「Ogg」意指一種檔案格式，可以納入各式各樣自由和開放原始碼的編解碼器，包含音效、視訊、文字（像字幕）與後設資料的處理。
  關于ogv格式詳細

屬性

width寬度/height高度
<video controls src="data/test.mp4" width="400"></video>
<video controls src="data/test.mp4" height="400"></video>

• 單獨設定width、hight可以直接改變播放器的寬度、高度，如果同事設定，播放器會拉伸，但是內容一個拉伸，始終在最中心

autoplay自動播放
<video controls src="data/test.mp4" autoplay></video>

• 在谷歌下會有個小bug，還是要點，但是如果有muted屬性就可以自動播放了

loop循環播放
<video controls src="data/test.mp4" loop></video>
poster視頻未播放時顯示的圖片
<video controls src="data/test.mp4" poster="data/test.jpg"></video>
muted視頻輸出時默認被靜音
<video controls src="data/test.mp4" muted></video>

其他

谷歌瀏覽器雖然不支持直接自動播放，但是支持7秒內視頻寬高比較小的視頻自動播放
<video> 標簽支持 HTML 5 中的全局屬性。
<video> 標簽支持 HTML 5 中的事件屬性。

video API 事件

play()/pause()

var myVideo=document.getElementById("video1");
function playVid()
  {
  myVideo.play();
  }
function pauseVid()
  {
  myVideo.pause();
  }

使video標簽播放，但是在谷歌瀏覽器下不允許自動播放
duration
返回當前視頻的長度，以秒計

var myVideo = document.getElementById('myVideo');
    var min =parseInt(myVideo.duration/60);
    var sec =parseInt(myVideo.duration%60);

以上代碼可以將視頻長度轉化為分秒
currentTime
能返回當前視頻的一個播放長度，并且可以設定值

myVideo.currentTime = 30;//從30s的地方開始播放
    test.onclick = function(){ 
        myVideo.currentTime = myVideo.currentTime += 3;
        //給test按鈕綁定事件，按一次就快進3秒
    }

src
設置/返回當前視頻路徑
myVideo.src = 'data/test.mp4';
volume
設置/返回當前音量，0-1相當于0~100%
myVideo.volume = 1;
小案例：聲音控制條
先在body里定義一個range類型的input作為拖動控件
<input type="range" min="0" max="100" value="50" id="range">
然后在script里面綁定事件

range.oninput = function(){
        myVideo.volume = this.value/100;//value值可以在mix和max上修改
    }

control
是否顯示控制控件（播放暫停音量等）
myVideo.control = true;

• 設置后video會自動添加control屬性

muted
手動設置靜音
myVideo.muted = true;

• 設置后video標簽上不會自動添加muted屬性

networkState
返回視頻的當前網絡狀態（state）
返回的網絡狀態（state）碼：
0：未初始化
1：視頻資源已獲取，但是未使用
2：瀏覽器正則下載資源
3：未找到資源（有可能在加載）

• 視頻并不是瞬間加載的，加載時網絡狀態是3（找不到）延時幾秒后獲取會變成1（已找到資源）

currentSrc
返回當前音頻的URL，無法改變URL只能返回URL
myVideo.currentSrc = 'data/test.mp4';

• 與src不同的是，只能返回可以讀取的資源路徑，例如視頻還沒加載出來的時候返回空

ended
可以返回視頻是否播放結束的結果，如果播放結束返回true，沒有則false，可以進行事件監聽
小案例：監聽ended事件

myVideo.addEventListener('ended',function(){ //監聽ended事件
        console.log('視頻播放結束了')
        myVideo.play();//重新播放
    })

loop
設置或返回視頻是否在結束時重新播放，默認是false，如果在script中設置了loop為true，那么會自動添加loop在video標簽屬性中
小案例：循環開關

 test.onclick = function () {
        if (myVideo.loop = false){//因為默認是false
            this.innerHTML = '循環';
            myVideo.loop = true;
        }else {
            this.innerHTML = '不循環';
            myVideo.loop = false;
        }

playbackRate
設置或返回視頻的播放速度，默認是1，小于1則是慢速
myVideo.playbackRate = '2';//兩倍速播放

readyState
屬性返回擋墻的就緒狀態
返回參數：
0： 沒有關于視頻就緒的信息
1：有數據，快不夠播放了
2：當前有數據可以用，但是下一幀沒有了
3：數據正在緩沖，當前和至少下一幀可以用了
4：可用數據足以開始播放了
timeupdate
當目前的播放位置更改時，可用監聽到視頻目前播放的狀態
小案例：timeupdate+duration+currentTime制作簡易播放狀態欄

myVideo.addEventListener('timeupdate',function () {
        let allTime = parseInt(myVideo.duration/60)+':'+parseInt(myVideo.duration%60);
        let nowTime = parseInt(myVideo.currentTime/60)+':'+parseInt(myVideo.currentTime%60);
    timeNode.innerHTML = nowTime+ '/' +allTime //輸出當前時間、總時間;
    })

seeked
當用戶對視頻的進度條并且已經完成操作時會觸發的事件，使用時必須用on
如：
myVideo.onseeked = function () {}

seeking
當用戶開始移動/跳躍視頻中的新位置的時候，使用時必須用on
myVideo.onseeked = function () {}

• seeking的頻率比seeked高
  小案例：比較seeked和seeking觸發頻率
  在body定義兩個span標簽

<div>
    <span id="testSeeked">seeked</span>
    <span id="testSeeking">seeking</span>
</div>

在script中比較seeked和seeking觸發頻率

 var seekedNum = seekingNum = 0;
    myVideo.onseeked = function () {
        seekedNum ++;
        testSeeked.innerHTML = seekedNum;
    }
    myVideo.onseeking = function () {
        testSeeking.innerHTML = seekingNum;
    }

volumechange
音量已更改時，使用時必須用on
myVideo.onvolumechange = function () { }
通用API：requestFullscreen
全屏顯示，但是必須在用戶事件上調用
小案例：兼容谷歌和火狐的全品顯示

test.onclick = function () {
        if (myVideo.webkitRequestFullscreen) {
            myVideo.webkitRequestFullscreen();
        }else if (myVideo.mozRequestFullscreen) {
            myVideo.mozRequestFullScreen();
        }
    }

• 注意火狐的mozRequestFullScreen是大寫S，谷歌的是小寫
  load
  強制重新加載視頻資源
  test.onclick = function () {myVideo.load();}
• 一般在更新視頻url后重新加載
  canplay
  視頻已經準備好開始播放，可以用于事件監聽

test.onclick = function () {myVideo.load();}
    myVideo.addEventListener('canplay',function () {
        console.log('可以開始播放了')
    })

音頻audio

音頻audio的屬性與api與視頻的video的很多都差不多，但是有一些區別

• audio 定義音頻 格式：mp3 wav ogg
  mp3所有瀏覽器兼容
  ogg 只safari不支持

屬性：
src音頻的資源地址
controls 播放控件
autoplay 自動播放
loop 循環播放
muted 靜音

• wav 都支持
  js 能幫助生成audio對象 new Audio(); 等同于HTML上面寫上audio標簽
  chrom和Opera都不能直接播放 需要頁面上元素交互

API：
play 音頻播放
pause 音頻暫停
duration 返回當前音頻長度
currentTime 設置或返回當前音頻的長度
src 設置/返回當前音頻的來源
volume 設置/返回當前的音頻音量
control 設置音頻是否顯示控件
muted 設置靜音
networkState 返回音頻的當前網絡狀態
currentSrc 返回當前音視頻的URL
ended 返回音視頻的播放位置是否已經結束
loop 設置是否循環播放
playbackRate 設置或返回音視頻的播放速度
readyState 屬性返回音頻當前的就緒狀態
timeupdate 當目前的音放位置已更改時
seeked 當用戶已移動/跳躍到視頻中的新位置時
seeking 當用戶開始移動/跳躍到視頻中的新位置時
volumechange 當音量已更改時
requestFullscreen 全屏
load 重新加載音頻資源
canplay 音頻已經準備好開始播放

• autoplay chrom和Opera不會自動播放
  muted 靜音 loop循環播放
  width/height屬性不起作用 需要css樣式中進行設置

• currentSrc只能獲取，不能設置

• seeked seeking 在audio中觸發頻率相同
  timeupdate 播放時觸發的事件
  volumechange 當音量改變的時候觸發
  requestFullscreen 全屏 必須使用audio標簽 js生成的audio對象不支持
  load 重新加載的函數 重新給個src也會重新加載
  canplay 準備好的時候出發的事件