迎接离开元素模板WWW.YS720.COM,本站供给专业的织梦模板河南棋牌网ASPCMS模板
以后地位:主页 > 法式榜样教程 > 其他教程 >
其他教程

【百分百可用】应用jQuery播放/暂停 HTML5视频

(元素模板) / 2019-11-14 10:01

我测验测验用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/谷歌_main.mp4](http://www.youtube.com/demo/谷歌_main.mp4)"` `controls autobuffer>`

`<p> Try` `this` `page in Safari` `4``! Or you can`

`<a href=``"[http://www.youtube.com/demo/谷歌_main.mp4](http://www.youtube.com/demo/谷歌_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/谷歌_main.mp](http://www.youtube.com/demo/谷歌_main.mp)"` `autobuffer controls poster=``"whale.png"``>`

`<p>Try` `this` `page in Safari` `4``! Or you can <a href=``"[http://www.youtube.com/demo/谷歌_main.mp4](http://www.youtube.com/demo/谷歌_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)"``>&lt;&lt;</button>`

`<button id=``"play"` `onclick=``"vidplay()"``>&gt;</button>`

`<button id=``"fastFwd"` `onclick=``"skip(10)"``>&gt;&gt;</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"` `>&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](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>`


Copyright @ 2013-2019 元素模板 YS720.COM All Rights Reserved. 版权一切 元素模板 YS720.COM