video(最近用過video躁绸，在網(wǎng)上查了下資料，總結(jié)了一下)

<video>標(biāo)簽的屬性

src ：視頻的屬性
poster：視頻封面，沒有播放時顯示的圖片
preload：預(yù)加載
autoplay：自動播放
loop：循環(huán)播放
controls：瀏覽器自帶的控制條
width：視頻寬度
height：視頻高度

獲取video對象

[color=#ff0000]Media = document.getElementById("media"); [/color]

Media方法和屬性：
HTMLVideoElement和HTMLAudioElement 均繼承自HTMLMediaElement
Media.error; //null:正常
Media.error.code; //1.用戶終止 2.網(wǎng)絡(luò)錯誤 3.解碼錯誤 4.URL無效
//網(wǎng)絡(luò)狀態(tài)

Media.currentSrc; //返回當(dāng)前資源的URL
Media.src = value; //返回或設(shè)置當(dāng)前資源的URL
Media.canPlayType(type); //是否能播放某種格式的資源
Media.networkState; //0.此元素未初始化 1.正常但沒有使用網(wǎng)絡(luò) 2.正在下載數(shù)據(jù) 3.沒有找到資源
Media.load(); //重新加載src指定的資源
Media.buffered; //返回已緩沖區(qū)域净刮，TimeRanges
Media.preload; //none:不預(yù)載 metadata:預(yù)載資源信息 auto:

//準(zhǔn)備狀態(tài)

Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在seeking

//回放狀態(tài)

Media.currentTime = value; //當(dāng)前播放的位置剥哑，賦值可改變位置
Media.startTime; //一般為0，如果為流媒體或者不從0開始的資源淹父，則不為0
Media.duration; //當(dāng)前資源長度流返回?zé)o限
Media.paused; //是否暫停
Media.defaultPlaybackRate = value;//默認(rèn)的回放速度株婴，可以設(shè)置
Media.playbackRate = value;//當(dāng)前播放速度，設(shè)置后馬上改變
Media.played; //返回已經(jīng)播放的區(qū)域暑认，TimeRanges困介，關(guān)于此對象見下文
Media.seekable; //返回可以seek的區(qū)域 TimeRanges
Media.ended; //是否結(jié)束
Media.autoPlay; //是否自動播放
Media.loop; //是否循環(huán)播放
Media.play(); //播放
Media.pause(); //暫停
//視頻控制

Media.controls;//是否有默認(rèn)控制條
Media.volume = value; //音量
Media.muted = value; //靜音
TimeRanges(區(qū)域)對象
TimeRanges.length; //區(qū)域段數(shù)
TimeRanges.start(index) //第index段區(qū)域的開始位置
TimeRanges.end(index) //第index段區(qū)域的結(jié)束位置
//相關(guān)事件

var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}

eventTester("loadstart"); //客戶端開始請求數(shù)據(jù)
eventTester("progress"); //客戶端正在請求數(shù)據(jù)
eventTester("suspend"); //延遲下載
eventTester("abort"); //客戶端主動終止下載（不是因?yàn)殄e誤引起）
eventTester("loadstart"); //客戶端開始請求數(shù)據(jù)
eventTester("progress"); //客戶端正在請求數(shù)據(jù)
eventTester("suspend"); //延遲下載
eventTester("abort"); //客戶端主動終止下載（不是因?yàn)殄e誤引起），
eventTester("error"); //請求數(shù)據(jù)時遇到錯誤
eventTester("stalled"); //網(wǎng)速失速
eventTester("play"); //play()和autoplay開始播放時觸發(fā)
eventTester("pause"); //pause()觸發(fā)
eventTester("loadedmetadata"); //成功獲取資源長度
eventTester("loadeddata"); //
eventTester("waiting"); //等待數(shù)據(jù)穷吮，并非錯誤
eventTester("playing"); //開始回放
eventTester("canplay"); //可以播放逻翁，但中途可能因?yàn)榧虞d而暫停
eventTester("canplaythrough"); //可以播放，歌曲全部加載完畢
eventTester("seeking"); //尋找中
eventTester("seeked"); //尋找完畢
eventTester("timeupdate"); //播放時間改變
eventTester("ended"); //播放結(jié)束
eventTester("ratechange"); //播放速率改變
eventTester("durationchange"); //資源長度改變
eventTester("volumechange"); //音量改變

支持HTML5視頻播放的瀏覽器支持3種視頻格式 MP4, OGG 和 WebM,但并非所有的瀏覽器都支持3種捡鱼。

你無法做到只用其中一種格式就能解決HTML5視頻播放八回，MP4是比較全面，但它在firefox和Safari中并不是很友好驾诈，而OGG和WebM則支持Firefox缠诅、chrome和Safari，但同樣的這些瀏覽器有一些舊版本也是不支持這兩種格式的乍迄。

最常用的HTML5視頻代碼是這樣子的：
html 代碼

<video width="480" height="300" controls="controls" preload="auto" poster="path-to-poster.jpg"> 
<source src="path-to-mp4.mp4" type="video/mp4" /> 
<source src="path-to-webm.webm" type="video/webm" /> 
<source src="path-to-ogv.ogv" type="video/ogg" /> 
</video>

雖然HTML5 video很好管引，但它并不支持一些舊的瀏覽器，這就需要flash了闯两，下面來看看如何創(chuàng)建flash視頻代碼
html 代碼

<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> 
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> 
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"> 
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
<param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> 
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" /> 
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" alt="HTML5視頻及其兼容實(shí)踐" width="640" height="360" title="No video playback capabilities, please download the video below" /> 
</object> 
</video>

[color=#ff0000]最簡單的方法實(shí)現(xiàn)Play和Pause:[/color]

html 代碼

$('video').trigger('play');
$('video').trigger('pause');

[color=#ff0000]點(diǎn)擊視頻就能播放和暫停[/color]
html 代碼

$("video").trigger("play");//for auto play
    $("video").addClass('pause');//for check pause or play add a class
    $('video').click(function() {
        if ($(this).hasClass('pause')) {
            $("video").trigger("play");
            $(this).removeClass('pause');
            $(this).addClass('play');
        } else {
            $("video").trigger("pause");
            $(this).removeClass('play');
            $(this).addClass('pause');
        }
})

[color=#ff0000]靜音和取消靜音[/color]

html 代碼

$('body').find("video").attr('id', 'video')
    var myVid = document.getElementById("video");
    $('.sound-icon').click(function() {
    //here "sound-icon" is a anchor class. 
    var sta = myVid.muted;
    if (sta == true) {
        myVid.muted = false;
        } else {
        myVid.muted = true;
    }
})

[color=#ff0000]使用poster在視頻無法加載時顯示圖片：[/color]
html 代碼

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
<p>Try this page in Safari 4! Or you can <a >download the video</a> instead.</p>
</video>

[color=#ff0000]重播功能：[/color]
html 代碼

function restart() {
    var video = document.getElementById("Video1");
    video.currentTime = 0;
}

[color=#ff0000]下面是一個比較完整的例子：[/color]

html 代碼

<html >
<head>
<title>Full player example</title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. --> 
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
<script type="text/javascript">
function init() { // Master function, encapsulates all functions
var video = document.getElementById("Video1"); 
if (video.canPlayType) { // tests that we have HTML5 video support
// if successful, display buttons and set up events
document.getElementById("buttonbar").style.display = "block"; 
document.getElementById("inputField").style.display = "block";
// helper functions
// play video
function vidplay(evt) {
if (video.src == "") { // inital source load
getVideo();
}
button = evt.target; // get the button id to swap the text based on the state 
if (video.paused) { // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else { // pause the file, and display play symbol 
video.pause();
button.textContent = ">";
}
}
// load video file from input field
function getVideo() {
var fileURL = document.getElementById("videoFile").value; // get input field 
if (fileURL != "") {
video.src = fileURL;
video.load(); // if HTML source element is used
document.getElementById("play").click(); // start play
} else {
errMessage("Enter a valid video URL"); // fail silently
}
}
  
// button helper functions 
// skip forward, backward, or restart
function setTime(tValue) {
// if no video is loaded, this throws an exception 
try {
if (tValue == 0) {
video.currentTime = tValue;
}
else {
video.currentTime += tValue;
}
 
} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
}
}
// display an error message 
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent = msg;
setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
}
// change volume based on incoming value 
function setVol(value) {
var vol = video.volume;
vol += value;
// test for range 0 - 1 to avoid exceptions
if (vol >= 0 && vol <= 1) {
// if valid value, use it
video.volume = vol;
} else {
// otherwise substitute a 0 or 1
video.volume = (vol < 0) ? 0 : 1; 
}
}
// button events 
// Play
document.getElementById("play").addEventListener("click", vidplay, false);
// Restart
document.getElementById("restart").addEventListener("click", function () {
setTime(0);
}, false);
// Skip backward 10 seconds
document.getElementById("rew").addEventListener("click", function () {
setTime(-10);
}, false);
// Skip forward 10 seconds
document.getElementById("fwd").addEventListener("click", function () {
setTime(10);
}, false);
// set src == latest video file URL
document.getElementById("loadVideo").addEventListener("click", getVideo, false);
// fail with message 
video.addEventListener("error", function (err) {
errMessage(err);
}, true);
// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1); // up by 10%
}, false);
// playback speed buttons
document.getElementById("slower").addEventListener("click", function () {
video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function () {
video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function () {
video.playbackRate = 1;
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
}
}, false);
} // end of runtime
}// end of master 
</script>
 
</head>
<body onload="init();" > 
 
<video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element"> 
HTML5 Video is required for this example
</video>
 
<div id="buttonbar" style="display: none;")>
<button id="restart" title="Restart button">[]</button> 
<button id="slower" title="Slower playback button">-</button> 
<button id="rew" title="Rewind button" >&lt;&lt;</button>
<button id="play" title="Play button">&gt;</button>
<button id="fwd" title="Forward button" >&gt;&gt;</button>
<button id="faster" title="Faster playback button">+</button>
<button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button> 
<br />
<label>Playback </label>
<label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button> 
 
<label> Volume </label>
<button id="volDn" title="Volume down button">-</button>
<button id="volUp" title="Volume up button">+</button>
<button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button> 
</div> 
<br/> 
<div id= "inputField" style="display:none;" >
<label>Type or paste a video URL: <br/>
<input type="text" id="videoFile" style="width: 300px;" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" /> 
<button id="loadVideo" title="Load video button" >Load</button>
</label>
</div>
<div title="Error message area" id="errorMsg" style="color:Red;"></div> 
</body>
</html>

canvas處理video視頻褥伴，【復(fù)制代碼，自己隨便找個視頻測試】

html 代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    .RB{position: relative;width: 500px;}
    #canvas{position: absolute;top: 0;left: 0;}
</style>
<body>
  <div class="RB">
    <canvas id="canvas"></canvas>
    <video id="videoBox" class="videoBox" src="123.mp4" width="1px" height="1px" autoplay controls preload type="video/mp4"></video>
  </div>

  <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function(){  
        var v = document.getElementById('videoBox');  
        var canvas = document.getElementById('canvas');  
        var context = canvas.getContext('2d');  
      
        var cw = Math.floor(canvas.clientWidth);  
        var ch = Math.floor(canvas.clientHeight);  
        canvas.width = cw;  
        canvas.height = ch;  
      
        v.addEventListener('play', function(){  
            draw(this,context,cw,ch);  
        },false);  
      
    },false);  
      
    function draw(v,c,w,h) {  
        if(v.paused || v.ended) return false;  
        c.drawImage(v,0,0,w,h);  
        setTimeout(draw,20,v,c,w,h);  
    }    
  </script>
</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末漾狼，一起剝皮案震驚了整個濱河市重慢，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌逊躁，老刑警劉巖似踱，帶你破解...
沈念sama閱讀 217,509評論 6贊 504
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異稽煤，居然都是意外死亡核芽，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,806評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門酵熙，熙熙樓的掌柜王于貴愁眉苦臉地迎上來轧简，“玉大人，你說我怎么就攤上這事匾二〖茫” “怎么了庐橙？”我有些...
開封第一講書人閱讀 163,875評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長借嗽。經(jīng)常有香客問我态鳖，道長，這世上最難降的妖魔是什么恶导？我笑而不...
開封第一講書人閱讀 58,441評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任浆竭，我火速辦了婚禮，結(jié)果婚禮上惨寿，老公的妹妹穿的比我還像新娘邦泄。我一直安慰自己，他們只是感情好裂垦，可當(dāng)我...
茶點(diǎn)故事閱讀 67,488評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布顺囊。她就那樣靜靜地躺著，像睡著了一般蕉拢。火紅的嫁衣襯著肌膚如雪特碳。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,365評論 1贊 302
城市分裂傳說
那天晕换，我揣著相機(jī)與錄音午乓，去河邊找鬼。笑死闸准，一個胖子當(dāng)著我的面吹牛益愈，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播夷家，決...
沈念sama閱讀 40,190評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼蒸其，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了库快？” 一聲冷哼從身側(cè)響起摸袁，我...
開封第一講書人閱讀 39,062評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎缺谴，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耳鸯，經(jīng)...
沈念sama閱讀 45,500評論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡湿蛔，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,706評論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了县爬。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阳啥。...
茶點(diǎn)故事閱讀 39,834評論 1贊 347
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖财喳，靈堂內(nèi)的尸體忽然破棺而出察迟，到底是詐尸還是另有隱情斩狱，我是刑警寧澤，帶...
沈念sama閱讀 35,559評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布扎瓶，位于F島的核電站所踊，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏概荷。R本人自食惡果不足惜秕岛，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,167評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望误证。院中可真熱鬧继薛，春花似錦、人聲如沸愈捅。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,779評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽蓝谨。三九已至灌具，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間像棘，已是汗流浹背稽亏。一陣腳步聲響...
開封第一講書人閱讀 32,912評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留缕题，地道東北人截歉。一個月前我還...
沈念sama閱讀 47,958評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像烟零，于是被迫代替她去往敵國和親瘪松。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,779評論 2贊 354

video(最近用過video，在網(wǎng)上查了下資料，總結(jié)了一下)

video(最近用過video躁绸，在網(wǎng)上查了下資料，總結(jié)了一下)

canvas處理video視頻褥伴，【復(fù)制代碼，自己隨便找個視頻測試】

推薦閱讀更多精彩內(nèi)容