使用jQuery控制HTML5视频播放/暂停-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

使用jQuery控制HTML5视频播放/暂停

不言

May 24, 2018 pm 04:18 PM

html5

我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。

我的代码是这样的：

$(&#39;#playMovie1&#39;).click(function(){
$(&#39;#movie1&#39;).play();
});

Copy after login

但发现这样不行，而用以下的js是可以的：

document.getElementById(&#39;movie1&#39;).play();

Copy after login

解决方法：

play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，代码如下：

$(&#39;#videoId&#39;).get(0).play();

Copy after login

最简单的方法实现Play和Pause:

$(&#39;video&#39;).trigger(&#39;play&#39;);
$(&#39;video&#39;).trigger(&#39;pause&#39;);

Copy after login

点击视频就能播放和暂停

$("video").trigger("play");//for auto play
$("video").addClass(&#39;pause&#39;);//for check pause or play add a class
$(&#39;video&#39;).click(function() {
if ($(this).hasClass(&#39;pause&#39;)) {
$("video").trigger("play");
$(this).removeClass(&#39;pause&#39;);
$(this).addClass(&#39;play&#39;);
} else {
$("video").trigger("pause");
$(this).removeClass(&#39;play&#39;);
$(this).addClass(&#39;pause&#39;);
}
})

Copy after login

静音和取消静音

$(&#39;body&#39;).find("video").attr(&#39;id&#39;, &#39;video&#39;)
var myVid = document.getElementById("video");
$(&#39;.sound-icon&#39;).click(function() {
//here "sound-icon" is a anchor class. 
var sta = myVid.muted;
if (sta == true) {
myVid.muted = false;
} else {
myVid.muted = true;
}
})

Copy after login

HTML 5中播放视频的方法：

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

Copy after login

自动播放：

<video src="abc.mov" autoplay>
</video>

Copy after login

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

Copy after login

一个比较简洁的例子：

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

Copy after login

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

<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(&#39;errorMsg&#39;).textContent=&#39;&#39;", 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=&#39;volume on button&#39; src=&#39;vol2.png&#39; />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt=&#39;volume off button&#39; src=&#39;mute2.png&#39; />"
}
}, 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>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn