标签：
文章来自：http://blog.okbase.net/jquery2000/archive/4485.html
我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。
我的代码是这样的：
|
1
2
3
|
$(‘#playMovie1‘).click(function(){$(‘#movie1‘).play();}); |
但发现这样不行，而用以下的js是可以的：
|
1
|
document.getElementById(‘movie1‘).play(); |
解决方法：
play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，代码如下：
|
1
|
$(‘#videoId‘).get(0).play(); |
最简单的方法实现Play和Pause:
|
1
2
|
$(‘video‘).trigger(‘play‘);$(‘video‘).trigger(‘pause‘); |
点击视频就能播放和暂停
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$("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‘);}}) |
静音和取消静音
|
1
2
3
4
5
6
7
8
9
10
11
|
$(‘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中播放视频的方法：
|
1
2
3
4
|
<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> |
自动播放：
|
1
2
|
<video src="abc.mov" autoplay></video> |
使用poster在视频无法加载时显示图片：
|
1
2
3
|
<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> |
一个比较简洁的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<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> |
下面是一个比较完整的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
<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 functionsvar video = document.getElementById("Video1"); if (video.canPlayType) { // tests that we have HTML5 video support// if successful, display buttons and set up eventsdocument.getElementById("buttonbar").style.display = "block"; document.getElementById("inputField").style.display = "block";// helper functions// play videofunction vidplay(evt) {if (video.src == "") { // inital source loadgetVideo();}button = evt.target; // get the button id to swap the text based on the state if (video.paused) { // play the file, and display pause symbolvideo.play();button.textContent = "||";} else { // pause the file, and display play symbol video.pause();button.textContent = ">";}}// load video file from input fieldfunction getVideo() {var fileURL = document.getElementById("videoFile").value; // get input field if (fileURL != "") {video.src = fileURL;video.load(); // if HTML source element is useddocument.getElementById("play").click(); // start play} else {errMessage("Enter a valid video URL"); // fail silently}} // button helper functions // skip forward, backward, or restartfunction 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 exceptionerrMessage("Video content might not be loaded");}}// display an error message function errMessage(msg) {// displays an error message for 5 seconds then clears itdocument.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 exceptionsif (vol >= 0 && vol <= 1) {// if valid value, use itvideo.volume = vol;} else {// otherwise substitute a 0 or 1video.volume = (vol < 0) ? 0 : 1; }}// button events // Playdocument.getElementById("play").addEventListener("click", vidplay, false);// Restartdocument.getElementById("restart").addEventListener("click", function () {setTime(0);}, false);// Skip backward 10 secondsdocument.getElementById("rew").addEventListener("click", function () {setTime(-10);}, false);// Skip forward 10 secondsdocument.getElementById("fwd").addEventListener("click", function () {setTime(10);}, false);// set src == latest video file URLdocument.getElementById("loadVideo").addEventListener("click", getVideo, false);// fail with message video.addEventListener("error", function (err) {errMessage(err);}, true);// volume buttonsdocument.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 buttonsdocument.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> |
标签：
原文地址：http://www.cnblogs.com/xinlinux/p/5026689.html
