video(最近用过video，在网上查了下资料，总结了一下)

<video>标签的属性

src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

获取video对象

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

Media方法和属性：
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态

Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域，TimeRanges
Media.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态

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

//回放状态

Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//视频控制

Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
//相关事件

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

eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
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了，下面来看看如何创建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视频及其兼容实践" width="640" height="360" title="No video playback capabilities, please download the video below" /> 
</object> 
</video>

[color=#ff0000]最简单的方法实现Play和Pause:[/color]

html 代码

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

[color=#ff0000]点击视频就能播放和暂停[/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 href="http://www.youtube.com/demo/google_main.mp4">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视频，【复制代码，自己随便找个视频测试】

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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,311评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,339评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,671评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,252评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,253评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,031评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,340评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,973评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,466评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,937评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,039评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,701评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,254评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,259评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,485评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,497评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,786评论 2赞 345

video(最近用过video，在网上查了下资料，总结了一下)

canvas处理video视频，【复制代码，自己随便找个视频测试】

推荐阅读更多精彩内容