利用<video></video>我們可以實(shí)現(xiàn)如下功能：

• 控制視頻的播放
• 創(chuàng)建自己的定制的視頻界面
• 使用全新的方式集成視頻與HTML的其余部分。

在HTML加入視頻功能需要添加如下代碼：

<video controls autoplay src="video/preroll.mp4" width="480" height="360" 
         poster="images/prerollposter.jpg" id="video">

1. controls 屬性表示砰蠢，播放器會(huì)提供控件潭流，允許用戶控制視頻和音頻的播放拆宛。
2. autoplay 屬性表示一旦加載視頻就開始播放。
3. src 代表視頻源位置
4. poster 表示如果不設(shè)置autoplay的話，在開始播放之前贡这，視頻顯示的圖片
5. loop 屬性會(huì)使視頻播放結(jié)束后自動(dòng)的重新開始丽惭。
6. preload 通常用來細(xì)粒度的控制如何加載視頻來實(shí)現(xiàn)優(yōu)化湃望。如果把preload設(shè)置為none,則在用戶播放之前不下載任何視頻瞳浦。

視頻格式

• mp4 容器官硝，包含H.264視頻和AAC音頻拔妥， MP4/H264得到了Safari和IE9+的支持缎玫，一些版本的Chrome也提供了支持。
• WebM 容器溪王，包含VP8視頻和Vorbis音頻。 WebM由google設(shè)計(jì)用來處理VP8編碼視頻。WebM/VP8得到Firefox,Chrome和Opera的支持祝懂。webm格式的視頻擴(kuò)展名為.webm
• Ogg 容器怜械，包含Theora視頻和Vorbis音頻蹭越。 Theora是一個(gè)開源解碼器。采用Theora編碼的視頻通常包含在Ogg文件中教届，文件擴(kuò)展名為.ogv 响鹃。 Ogg/Theora得到了Firefox买置， Chrome和Opera的支持。

如何處理這些視頻格式

1家夺。我們可以在<video>元素中對(duì)應(yīng)每種格式使用一個(gè)<source>元素，這樣能提供一組視頻板壮，每個(gè)視頻分別有自己的格式，可以讓瀏覽器選擇它支持的第一種格式合住。

<video id = "video" poster="video/prerollposter.jpg" controls width="480" height="360">
      <source src="video/preroll.mp4">
      <source src="video/preroll.webm">
      <source src="video/preroll.ogv">
      <p>Sorry, 你的瀏覽器不支持這些視頻格式</p>
</video>

瀏覽器從上向下查找笨使，知道找到他能播放的一種格式卿樱。

2. 更具體的指定視頻格式
   上面告訴瀏覽器視頻源的位置，使他能在不同版本中作出選擇硫椰。不過繁调，瀏覽器真正確定一個(gè)文件是否可以播放，還需要做一個(gè)檢測(cè)工作靶草。我們可以為瀏覽器提供更多幫組蹄胰，給出有關(guān)視頻文件的MIME類型和編碼器。

<video id = "video" poster="video/prerollposter.jpg" controls width="480" height="360">
      <source src="video/preroll.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2” '>
      <source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis" '>
      <source src="video/preroll.ogv" type='video/ogg; codecs="theota, vorbis" ’> 
      <p>Sorry, 你的瀏覽器不支持這些視頻格式</p>
</video>

• type 是一種可選屬性奕翔，他向?yàn)g覽器提供了一個(gè)提示裕寨，幫組它確定能不能播放這種類型的文件。
• ‘video/mp4’ 這種type類型是一種MIME類型派继，制定了容器格式,注意其單引號(hào)宾袜。
• codecs參數(shù)指定使用哪個(gè)編解碼器對(duì)視頻和音頻編碼，來創(chuàng)建編碼的視頻文件驾窟。其中codecs="avc1.42E01E, mp4a.40.2”第一個(gè)參數(shù)表示視頻編碼器庆猫，第二個(gè)參數(shù)表示音頻編碼器。

注意：type 和codecs中的單雙引號(hào)的位置绅络。

Video在javaScript中的API

1. 調(diào)用的方法：

2. 使用的屬性

3. 捕獲這些事件

下面這些是可以捕獲的事件，如果增加事件處理程序匾荆，出現(xiàn)你監(jiān)聽的事件時(shí)就會(huì)調(diào)用相應(yīng)的事件處理程序拌蜘。

實(shí)現(xiàn)一個(gè)視頻的播放

//js
var position = 0;   //定義一個(gè)變量來記錄我們播放的哪個(gè)視頻
var playlist;     // 保存視頻播放列表數(shù)組
var video;       //保存video元素的引用

window.onload = function() {
    playlist = ["video/preroll", 
                "video/areyoupopular", 
                "video/destinationearth"];
    video = document.getElementById('video');
    video.addEventListener("ended", nextVideo,false);  //監(jiān)聽事件

    video.src = playlist[position] + getFormatExtension();
    video.load();
    video.play();
}

function nextVideo() {
    position++;
    if (position >= playlist.length) {
        position = 0;
    }
    video.src = playlist[position] + getFormatExtension();
    video.load();
    video.play();
}

function getFormatExtension() {
    if (video.canPlayType("video/mp4") != "") {
        return ".mp4";
    } else if (video.canPlayType("video/ogg") != "") {
        return ".ogv";
    } else if (video.canPlayType("video/webm") != "") {
        return ".webm";
    }
}

• canPlayType方法用來取一個(gè)視頻格式為參數(shù)页滚，返回一個(gè)字符串，表示瀏覽器對(duì)于播放這種類型的視頻有多大的信心铺呵。共有三個(gè)等級(jí):很可能(probably) 可能(maybe)和空裹驰。

給視頻加上特效

主要方法是利用兩層畫布來創(chuàng)建特效，上面的畫布顯示完成的特效片挂，下面的畫布來實(shí)現(xiàn)一個(gè)scratch緩沖區(qū)邦马，來操作每幀視頻的rgb顏色值。

//window.onload方法中添加事件
video.addEventListener("play", processFrame, false);  //獲取每幀視頻

function processFrame(e) {
    var video = document.getElementById("video");

    if (video.paused || video.ended) {
        return;
    }

    var bufferCanvas = document.getElementById("buffer");
    var displayCanvas = document.getElementById("display");
    var buffer = bufferCanvas.getContext("2d");
    var display = displayCanvas.getContext("2d");
        
        //緩沖區(qū)獲取畫布的大小宴卖，并且把當(dāng)前幀的視頻轉(zhuǎn)化為圖片
    buffer.drawImage(video, 0, 0, bufferCanvas.width, bufferCanvas.height);  
    var frame = buffer.getImageData(0, 0, bufferCanvas.width, bufferCanvas.height);
    var length = frame.data.length / 4;

    for (var i = 0; i < length; i++) {
        var r = frame.data[i * 4 + 0];
        var g = frame.data[i * 4 + 1];
        var b = frame.data[i * 4 + 2];
        if (effectFunction) {
            effectFunction(i, r, g, b, frame.data);  //是執(zhí)行像素轉(zhuǎn)換的方法
        }
    }
    display.putImageData(frame, 0, 0);

    setTimeout(processFrame, 0);   //設(shè)置為0是為了獲取每一幀視頻
    // try this line instead of the setTimeout above if you are on Chrome
    //requestAnimationFrame(processFrame);

}

//effectFunction方法的匿名函數(shù)
function noir(pos, r, g, b, data) {
    var brightness = (3*r + 4*g + b) >>> 3;
    if (brightness < 0) brightness = 0;
    data[pos * 4 + 0] = brightness;
    data[pos * 4 + 1] = brightness;
    data[pos * 4 + 2] = brightness;
}

function western(pos, r, g, b, data) {
    var brightness = (3*r + 4*g + b) >>> 3;
    data[pos * 4 + 0] = brightness+40;
    data[pos * 4 + 1] = brightness+20;
    data[pos * 4 + 2] = brightness-20;
    data[pos * 4 + 3] = 255; //220;
}

知行辦公，專業(yè)移動(dòng)辦公平臺(tái)https://zx.naton.cn/
【總監(jiān)】十二春秋之邻悬，3483099@qq.com症昏；
【Master】zelo，616701261@qq.com父丰；
【運(yùn)營】運(yùn)維艄公肝谭，897221533@qq.com；****
【產(chǎn)品設(shè)計(jì)】流浪貓蛾扇，364994559@qq.com攘烛；
【體驗(yàn)設(shè)計(jì)】兜兜，2435632247@qq.com镀首；
【iOS】淘碼小工坟漱，492395860@qq.com；iMcG33K更哄，imcg33k@gmail.com芋齿；
【Android】人猿居士，1059604515@qq.com成翩；思路的頓悟觅捆，1217022114@qq.com；
【java】首席工程師MR_W麻敌，feixue300@qq.com栅炒；
【測(cè)試】土鏡問道，847071279@qq.com；
【數(shù)據(jù)】fox009521赢赊，42151960@qq.com乙漓；