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