使用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 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 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 >
// 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>
<button>[]</button>
<button><<</button>
<button>></button>
<button>>></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 >
<video controls title="video element">
HTML5 Video is required for this example
</video>
<div)>
<button title="Restart button">[]</button>
<button title="Slower playback button">-</button>
<button title="Rewind button" ><<</button>
<button title="Play button">></button>
<button title="Forward button" >>></button>
<button title="Faster playback button">+</button>
<button title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
<br />
<label>Playback </label>
<label>Reset playback rate: </label><button title="Reset playback rate button">=</button>
<label> Volume </label>
<button title="Volume down button">-</button>
<button title="Volume up button">+</button>
<button title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
</div>
<br/>
<div id= "inputField" >
<label>Type or paste a video URL: <br/>
<input type="text" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
<button title="Load video button" >Load</button>
</label>
</div>
<div title="Error message area"></div>
</body>
</html>
评论列表
Vampire2015/5/15 10:19:59
感谢
saepark2015/5/21 17:41:59
感谢。用上了。
Ho2015/7/20 18:00:47
thanks
angularJs2015/8/26 14:43:04
mack
adfsad2016/6/23 9:54:01
fasdfdsf
adfsad2016/6/23 9:54:08
fasdfdsf
adfsad2016/6/23 9:54:11
fasdfdsf
adfsad2016/6/23 9:54:14
fasdfdsf
adfsad2016/6/23 9:54:18
fasdfdsf
adfsad2016/6/23 9:54:20
fasdfdsf
adfsad2016/6/23 9:54:23
fasdfdsf
adfsad2016/6/23 9:54:26
fasdfdsf
摩的大飙客2016/6/28 10:48:53
视频播放方面讲得挺完整,辛苦了
duck2016/6/28 11:11:29
感谢,真的很不错!!!!!!
112016/11/8 15:33:18
学习了
Cidy2017/3/4 15:48:47
能支持html5 embed不?
434342017/5/17 10:07:50
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:00
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:02
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:04
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:04
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:06
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:07
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:08
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:09
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:10
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:11
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:13
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:16
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:17
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:18
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:19
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:21
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:22
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:22
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:24
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:24
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:25
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:26
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:26
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:27
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:28
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:28
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:30
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:31
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:31
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:32
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:33
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:34
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
434342017/5/17 10:08:34
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
发表评论
您还没有登录,请[登录]或[注册]