概述
我尝试用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>
<!-- 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>
<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播放/暂停 HTML5视频所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复