使用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中播放视频的方法：

<video width="640" height="360" src="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">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" 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>

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

<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" />

<button id="loadVideo" title="Load video button" >Load</button>

</label>

</div>

<div title="Error message area" id="errorMsg" style="color:Red;"></div>

</body>

</html>

使用jQuery播放/暂停 HTML5视频相关推荐

JQuery播放暂停HTML视频
本文档原始链接:http://blog.okbase.net/jquery2000/archive/4485.html: 我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中 ...
支持在iPad中播放的HTML5视频网站推荐
YouTube是最早支持HTML5视频的网站,随着iPad等平板电脑的流行,越来越多的视频网站开始支持HTML5视频播放.下面就向大家分享一些国内的HTML5视频网站,是根据网上信息整理而成,欢迎大家 ...
html音乐播放器如何添加暂停按钮,HotKey播放/暂停HTML5音乐播放器
这是我用于HTML5音乐播放器的一小部分JavaScript代码.我想知道你们是否可以帮我建立一个HotKey来使用Space键切换播放/暂停按钮.有什么想法吗? CODE: $('.tracksli ...
iphone html5直播,如何在iOS(iPhone和iPad)上播放带有HTML5视频标签的mp4视频文件？
我想使用视频标记向用户显示 HTML5视频.对于Firefox,Chrome和Opera WEBM按预期工作.在Windows和Mac上的Safari中,我的MP4版本也可以使用.我遇到的唯一问题是它 ...
压缩视频 html5播放,将HTML5视频呈现为Canvas正在压缩图像
我正在尝试使用getUserMedia从用户的网络摄像头拍摄照片. 来自相机的图像是640×480(可能是任何尺寸,具体取决于用户的网络摄像头). 我有一个视频标签,大小为320×240与css,我即 ...
《HTML5 视频的现状》报告指出：目前市场上74%的浏览器都支持HTML5视频
JW Player背后的开发公司LongTail Video最新发布了<HTML5 视频的现状(The State of HTML5 Video)>报告,在报告里指出,目前市场上有74%的 ...
HTML5视频直播默认静音,HTML5教程如何实现播放视频中暂停、关闭声音等操作
本篇教程探讨了HTML5教程如何实现播放视频中暂停.关闭声音等操作,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> HTML5-video ...
html5实现视频（放大缩小播放暂停）
效果如下图: <!DOCTYPE html> <html> <body> <meta charset="utf-8"> <di ...
用html5播放两个视频,HTML5视频 - 如何进行无缝播放和/或几个视频循环？
尝试过各种各样的事情后,我终于能够创造出似乎是一个工作解决方案.我还没有在旧版浏览器或其他操作系统上测试过这个版本,但是这个版本可以在最新版本的Chrome,IE,Firefox和Opera上运行. ...
html5 video播放按钮放在中间,在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area)...
在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area) 我点击了一张HTML5视频播放海报,并点击了控 ...

使用jQuery播放/暂停 HTML5视频

使用jQuery播放/暂停 HTML5视频相关推荐

最新文章

热门文章