来源：http://blog.okbase.net/jquery2000/archive/4485.html
我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。
我的代码是这样的：
`$(``'#playMovie1'``).click(function(){`
`$(``'#movie1'``).play();`
`});`
但发现这样不行，而用以下的js是可以的：
document.getElementById(``'movie1'``).play();
解决方法：
play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，代码如下：
$('#videoId').get(0).play();`
最简单的方法实现Play和Pause:
`$(``'video'``).trigger(``'play'``);`
`$(``'video'``).trigger(``'pause'``);`
点击视频就能播放和暂停
`$(``"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'``);`
`}`
`})`
静音和取消静音
`$(``'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``;`
`}`
`})`
HTML 5中播放视频的方法：
`<video width=``"640"` `height=``"360"` `src=``"[http://www.youtube.com/demo/google_main.mp4](http://www.youtube.com/demo/google_main.mp4)"` `controls autobuffer>`
`<p> Try` `this` `page in Safari` `4``! Or you can`
`<a href=``"[http://www.youtube.com/demo/google_main.mp4](http://www.youtube.com/demo/google_main.mp4)"``>download the video</a> instead.</p>`
`</video>`
自动播放：
`<video src=``"abc.mov"` `autoplay>`
`</video>`
使用poster在视频无法加载时显示图片：
`<video width=``"640"` `height=``"360"` `src=``"[http://www.youtube.com/demo/google_main.mp](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](http://www.youtube.com/demo/google_main.mp4)"``>download the video</a> instead.</p>`
`</video>`
一个比较简洁的例子：
`<script type=``"text/javascript"``>`
`function vidplay() {`
`var video = document.getElementById(``"Video1"``);`
`var button = document.getElementById(``"play"``);`
`if` `(video.paused) {`
`video.play();`
`button.textContent =` `"||"``;`
`}` `else` `{`
`video.pause();`
`button.textContent =` `">"``;`
`}`
`}`
`function restart() {`
`var video = document.getElementById(``"Video1"``);`
`video.currentTime =` `0``;`
`}`
`function skip(value) {`
`var video = document.getElementById(``"Video1"``);`
`video.currentTime += value;`
`}`
`</script>`
`</head>`
`<body>`
`<video id=``"Video1"` `>`
`// Replace these with your own video files.`
`<source src=``"demo.mp4"` `type=``"video/mp4"` `/>`
`<source src=``"demo.ogv"` `type=``"video/ogg"` `/>`
`HTML5 Video is required` `for` `this` `example.`
`<a href=``"demo.mp4"``>Download the video</a> file.`
`</video>`
`<div id=``"buttonbar"``>`
`<button id=``"restart"` `onclick=``"restart();"``>[]</button>`
`<button id=``"rew"` `onclick=``"skip(-10)"``><<</button>`
`<button id=``"play"` `onclick=``"vidplay()"``>></button>`
`<button id=``"fastFwd"` `onclick=``"skip(10)"``>>></button>`
`</div>`
下面是一个比较完整的例子：
`<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"` `><<</button>`
`<button id=``"play"` `title=``"Play button"``>></button>`
`<button id=``"fwd"` `title=``"Forward button"` `>>></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](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>`
