我尝试用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中播放视频的方法：
Try this page in Safari 4! Or you can download the video instead.
自动播放：
<video src=abc.mov autoplay> </video>
使用poster在视频无法加载时显示图片：
<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>
一个比较简洁的例子：
<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>
<p 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>
</p>
下面是一个比较完整的例子：
<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>
<p 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>
</p>
<br/>
<p 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>
</p>
<p title=Error message area id=errorMsg style=color:Red;></p>
</body>
</html>
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用jQuery控制HTML5视频播放/暂停
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用jQuery控制HTML5视频播放/暂停
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
