html暂停视频显示一张图片,使用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

[]

-

<<

>

>>

+

Playback

Reset playback rate: =

Volume

-

+

Type or paste a video URL:

Load

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理