找回密码
 立即注册
即日起,论坛关闭新用户注册和登录,论坛相关的贴子保留查阅和下载。获得授权后,有技术问题可联系微信 13199509559 一对一解决。 2024-3-12
查看: 3758|回复: 1

使用jQuery播放/暂停 HTML5视频

206

主题

206

主题

206

主题

管理员

Rank: 9Rank: 9Rank: 9

积分
0
admin 发表于 2017-3-21 17:22:12 | 显示全部楼层 |阅读模式
我尝试用jQuery控制HTML5视频,两个视频分别在两个tab中,我希望点中tab后,该tab里的视频可以立即播放,而另外tab里的视频能够停止。
我的代码是这样的:
  1. $('#playMovie1').click(function(){
  2. $('#movie1').play();
  3. });
复制代码
但发现这样不行,而用以下的js是可以的:
  1. document.getElementById('movie1').play();
复制代码
解决方法:
play并不是jQuery的函数,而是DOM元素的函数,所以我们需要通过DOM来调用play,代码如下:
  1. $('#videoId').get(0).play();
复制代码
最简单的方法实现Play和Pause:
  1. $('video').trigger('play');
  2. $('video').trigger('pause');
复制代码
点击视频就能播放和暂停
  1. $("video").trigger("play");//for auto play
  2. $("video").addClass('pause');//for check pause or play add a class
  3. $('video').click(function() {
  4. if ($(this).hasClass('pause')) {
  5. $("video").trigger("play");
  6. $(this).removeClass('pause');
  7. $(this).addClass('play');
  8. } else {
  9. $("video").trigger("pause");
  10. $(this).removeClass('play');
  11. $(this).addClass('pause');
  12. }
  13. })
复制代码
静音和取消静音
  1. $('body').find("video").attr('id', 'video')
  2. var myVid = document.getElementById("video");
  3. $('.sound-icon').click(function() {
  4. //here "sound-icon" is a anchor class.
  5. var sta = myVid.muted;
  6. if (sta == true) {
  7. myVid.muted = false;
  8. } else {
  9. myVid.muted = true;
  10. }
  11. })
复制代码
  1. HTML 5中播放视频的方法:

  2. <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer>
  3. <p> Try this page in Safari 4! Or you can
  4. <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p>
  5. </video>
  6. 自动播放:

  7. <video src="abc.mov" autoplay>
  8. </video>
  9. 使用poster在视频无法加载时显示图片:

  10. <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
  11. <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>
  12. </video>
  13. 一个比较简洁的例子:

  14. <script type="text/javascript">
  15. function vidplay() {
  16. var video = document.getElementById("Video1");
  17. var button = document.getElementById("play");
  18. if (video.paused) {
  19. video.play();
  20. button.textContent = "||";
  21. } else {
  22. video.pause();
  23. button.textContent = ">";
  24. }
  25. }
  26. function restart() {
  27. var video = document.getElementById("Video1");
  28. video.currentTime = 0;
  29. }
  30. function skip(value) {
  31. var video = document.getElementById("Video1");
  32. video.currentTime += value;
  33. }
  34. </script>
  35. </head>
  36. <body>
  37. <video id="Video1" >
  38. // Replace these with your own video files.
  39. <source src="demo.mp4" type="video/mp4" />
  40. <source src="demo.ogv" type="video/ogg" />
  41. HTML5 Video is required for this example.
  42. <a href="demo.mp4">Download the video</a> file.
  43. </video>
  44. <div id="buttonbar">
  45. <button id="restart" onclick="restart();">[]</button>
  46. <button id="rew" onclick="skip(-10)"><<</button>
  47. <button id="play" onclick="vidplay()">></button>
  48. <button id="fastFwd" onclick="skip(10)">>></button>
  49. </div>

  50. 下面是一个比较完整的例子:

  51. <html >
  52. <head>
  53. <title>Full player example</title>
  54. <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. -->
  55. <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
  56. <script type="text/javascript">
  57. function init() { // Master function, encapsulates all functions
  58. var video = document.getElementById("Video1");
  59. if (video.canPlayType) { // tests that we have HTML5 video support
  60. // if successful, display buttons and set up events
  61. document.getElementById("buttonbar").style.display = "block";
  62. document.getElementById("inputField").style.display = "block";
  63. // helper functions
  64. // play video
  65. function vidplay(evt) {
  66. if (video.src == "") { // inital source load
  67. getVideo();
  68. }
  69. button = evt.target; // get the button id to swap the text based on the state
  70. if (video.paused) { // play the file, and display pause symbol
  71. video.play();
  72. button.textContent = "||";
  73. } else { // pause the file, and display play symbol
  74. video.pause();
  75. button.textContent = ">";
  76. }
  77. }
  78. // load video file from input field
  79. function getVideo() {
  80. var fileURL = document.getElementById("videoFile").value; // get input field
  81. if (fileURL != "") {
  82. video.src = fileURL;
  83. video.load(); // if HTML source element is used
  84. document.getElementById("play").click(); // start play
  85. } else {
  86. errMessage("Enter a valid video URL"); // fail silently
  87. }
  88. }
  89.   
  90. // button helper functions
  91. // skip forward, backward, or restart
  92. function setTime(tValue) {
  93. // if no video is loaded, this throws an exception
  94. try {
  95. if (tValue == 0) {
  96. video.currentTime = tValue;
  97. }
  98. else {
  99. video.currentTime += tValue;
  100. }

  101. } catch (err) {
  102. // errMessage(err) // show exception
  103. errMessage("Video content might not be loaded");
  104. }
  105. }
  106. // display an error message
  107. function errMessage(msg) {
  108. // displays an error message for 5 seconds then clears it
  109. document.getElementById("errorMsg").textContent = msg;
  110. setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
  111. }
  112. // change volume based on incoming value
  113. function setVol(value) {
  114. var vol = video.volume;
  115. vol += value;
  116. // test for range 0 - 1 to avoid exceptions
  117. if (vol >= 0 && vol <= 1) {
  118. // if valid value, use it
  119. video.volume = vol;
  120. } else {
  121. // otherwise substitute a 0 or 1
  122. video.volume = (vol < 0) ? 0 : 1;
  123. }
  124. }
  125. // button events
  126. // Play
  127. document.getElementById("play").addEventListener("click", vidplay, false);
  128. // Restart
  129. document.getElementById("restart").addEventListener("click", function () {
  130. setTime(0);
  131. }, false);
  132. // Skip backward 10 seconds
  133. document.getElementById("rew").addEventListener("click", function () {
  134. setTime(-10);
  135. }, false);
  136. // Skip forward 10 seconds
  137. document.getElementById("fwd").addEventListener("click", function () {
  138. setTime(10);
  139. }, false);
  140. // set src == latest video file URL
  141. document.getElementById("loadVideo").addEventListener("click", getVideo, false);
  142. // fail with message
  143. video.addEventListener("error", function (err) {
  144. errMessage(err);
  145. }, true);
  146. // volume buttons
  147. document.getElementById("volDn").addEventListener("click", function () {
  148. setVol(-.1); // down by 10%
  149. }, false);
  150. document.getElementById("volUp").addEventListener("click", function () {
  151. setVol(.1); // up by 10%
  152. }, false);
  153. // playback speed buttons
  154. document.getElementById("slower").addEventListener("click", function () {
  155. video.playbackRate -= .25;
  156. }, false);
  157. document.getElementById("faster").addEventListener("click", function () {
  158. video.playbackRate += .25;
  159. }, false);
  160. document.getElementById("normal").addEventListener("click", function () {
  161. video.playbackRate = 1;
  162. }, false);
  163. document.getElementById("mute").addEventListener("click", function (evt) {
  164. if (video.muted) {
  165. video.muted = false;
  166. evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
  167. } else {
  168. video.muted = true;
  169. evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
  170. }
  171. }, false);
  172. } // end of runtime
  173. }// end of master
  174. </script>

  175. </head>
  176. <body onload="init();" >

  177. <video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element">
  178. HTML5 Video is required for this example
  179. </video>

  180. <div id="buttonbar" style="display: none;")>
  181. <button id="restart" title="Restart button">[]</button>
  182. <button id="slower" title="Slower playback button">-</button>
  183. <button id="rew" title="Rewind button" ><<</button>
  184. <button id="play" title="Play button">></button>
  185. <button id="fwd" title="Forward button" >>></button>
  186. <button id="faster" title="Faster playback button">+</button>
  187. <button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
  188. <br />
  189. <label>Playback </label>
  190. <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button>

  191. <label> Volume </label>
  192. <button id="volDn" title="Volume down button">-</button>
  193. <button id="volUp" title="Volume up button">+</button>
  194. <button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button>
  195. </div>
  196. <br/>
  197. <div id= "inputField" style="display:none;" >
  198. <label>Type or paste a video URL: <br/>
  199. <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" />
  200. <button id="loadVideo" title="Load video button" >Load</button>
  201. </label>
  202. </div>
  203. <div title="Error message area" id="errorMsg" style="color:Red;"></div>
  204. </body>
  205. </html>
复制代码


0

主题

0

主题

0

主题

高级会员

Rank: 4

积分
621
蓝色屠龙刀 发表于 2017-10-28 16:14:24 | 显示全部楼层
没来得急看,应该不错,先帮你顶












古龙大红八角 古龙八角 大红八角
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表