如何使用jQuery控制HTML5视频播放/暂停-创新互联

这篇文章主要介绍了如何使用jQuery控制HTML5视频播放/暂停,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

专注于为中小企业提供网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业呼中免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

我尝试用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.

自动播放:


使用poster在视频无法加载时显示图片:


Try this page in Safari 4! Or you can download the video instead.

一个比较简洁的例子:


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;
} 




// Replace these with your own video files. 


HTML5 Video is required for this example. 
Download the video file. 


[] 
<<
>
>>

下面是一个比较完整的例子:



Full player example
 


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 = ""
} else {
video.muted = true;
evt.target.innerHTML = ""
}
}, false);
} // end of runtime
}// end of master 



 

 
HTML5 Video is required for this example



[] 
<<
>
>>
+
 



-
+
 

 
 

 

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用jQuery控制HTML5视频播放/暂停”这篇文章对大家有帮助,同时也希望大家多多支持创新互联网站建设公司,,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章标题:如何使用jQuery控制HTML5视频播放/暂停-创新互联
文章URL:http://pwwzsj.com/article/shiio.html