起风网来源：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>` 文章转载于:https://www.jianshu.com/p/a450f84fc8f6
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录！
立即登录