当前位置：Gxlcms > html代码 > 使用jQuery控制HTML5视频播放/暂停

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

时间：2021-07-01 10:21:17 帮助过：58人阅读

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

HTML 5中播放视频的方法：

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

自动播放：

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

使用poster在视频无法加载时显示图片：

  1. <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png">
  2. <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>
  3. </video>

一个比较简洁的例子：

  1. <script type="text/javascript">
  2. function vidplay() {
  3. var video = document.getElementById("Video1");
  4. var button = document.getElementById("play");
  5. if (video.paused) {
  6. video.play();
  7. button.textContent = "||";
  8. } else {
  9. video.pause();
  10. button.textContent = ">";
  11. }
  12. }
  13. function restart() {
  14. var video = document.getElementById("Video1");
  15. video.currentTime = 0;
  16. }
  17. function skip(value) {
  18. var video = document.getElementById("Video1");
  19. video.currentTime += value;
  20. } 
  21. </script>
  22. </head>
  23. <body>
  24. <video id="Video1" >
  25. // Replace these with your own video files. 
  26. <source src="demo.mp4" type="video/mp4" />
  27. <source src="demo.ogv" type="video/ogg" />
  28. HTML5 Video is required for this example. 
  29. <a href="demo.mp4">Download the video</a> file. 
  30. </video>
  31. <p id="buttonbar">
  32. <button id="restart" onclick="restart();">[]</button> 
  33. <button id="rew" onclick="skip(-10)"><<</button>
  34. <button id="play" onclick="vidplay()">></button>
  35. <button id="fastFwd" onclick="skip(10)">>></button>
  36. </p>

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

  1. <html >
  2. <head>
  3. <title>Full player example</title>
  4. <!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. --> 
  5. <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
  6. <script type="text/javascript">
  7. function init() { // Master function, encapsulates all functions
  8. var video = document.getElementById("Video1"); 
  9. if (video.canPlayType) { // tests that we have HTML5 video support
  10. // if successful, display buttons and set up events
  11. document.getElementById("buttonbar").style.display = "block"; 
  12. document.getElementById("inputField").style.display = "block";
  13. // helper functions
  14. // play video
  15. function vidplay(evt) {
  16. if (video.src == "") { // inital source load
  17. getVideo();
  18. }
  19. button = evt.target; // get the button id to swap the text based on the state 
  20. if (video.paused) { // play the file, and display pause symbol
  21. video.play();
  22. button.textContent = "||";
  23. } else { // pause the file, and display play symbol 
  24. video.pause();
  25. button.textContent = ">";
  26. }
  27. }
  28. // load video file from input field
  29. function getVideo() {
  30. var fileURL = document.getElementById("videoFile").value; // get input field 
  31. if (fileURL != "") {
  32. video.src = fileURL;
  33. video.load(); // if HTML source element is used
  34. document.getElementById("play").click(); // start play
  35. } else {
  36. errMessage("Enter a valid video URL"); // fail silently
  37. }
  38. }
  39.  
  40. // button helper functions 
  41. // skip forward, backward, or restart
  42. function setTime(tValue) {
  43. // if no video is loaded, this throws an exception 
  44. try {
  45. if (tValue == 0) {
  46. video.currentTime = tValue;
  47. }
  48. else {
  49. video.currentTime += tValue;
  50. }
  51. } catch (err) {
  52. // errMessage(err) // show exception
  53. errMessage("Video content might not be loaded");
  54. }
  55. }
  56. // display an error message 
  57. function errMessage(msg) {
  58. // displays an error message for 5 seconds then clears it
  59. document.getElementById("errorMsg").textContent = msg;
  60. setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
  61. }
  62. // change volume based on incoming value 
  63. function setVol(value) {
  64. var vol = video.volume;
  65. vol += value;
  66. // test for range 0 - 1 to avoid exceptions
  67. if (vol >= 0 && vol <= 1) {
  68. // if valid value, use it
  69. video.volume = vol;
  70. } else {
  71. // otherwise substitute a 0 or 1
  72. video.volume = (vol < 0) ? 0 : 1; 
  73. }
  74. }
  75. // button events 
  76. // Play
  77. document.getElementById("play").addEventListener("click", vidplay, false);
  78. // Restart
  79. document.getElementById("restart").addEventListener("click", function () {
  80. setTime(0);
  81. }, false);
  82. // Skip backward 10 seconds
  83. document.getElementById("rew").addEventListener("click", function () {
  84. setTime(-10);
  85. }, false);
  86. // Skip forward 10 seconds
  87. document.getElementById("fwd").addEventListener("click", function () {
  88. setTime(10);
  89. }, false);
  90. // set src == latest video file URL
  91. document.getElementById("loadVideo").addEventListener("click", getVideo, false);
  92. // fail with message 
  93. video.addEventListener("error", function (err) {
  94. errMessage(err);
  95. }, true);
  96. // volume buttons
  97. document.getElementById("volDn").addEventListener("click", function () {
  98. setVol(-.1); // down by 10%
  99. }, false);
  100. document.getElementById("volUp").addEventListener("click", function () {
  101. setVol(.1); // up by 10%
  102. }, false);
  103. // playback speed buttons
  104. document.getElementById("slower").addEventListener("click", function () {
  105. video.playbackRate -= .25;
  106. }, false);
  107. document.getElementById("faster").addEventListener("click", function () {
  108. video.playbackRate += .25;
  109. }, false);
  110. document.getElementById("normal").addEventListener("click", function () {
  111. video.playbackRate = 1;
  112. }, false);
  113. document.getElementById("mute").addEventListener("click", function (evt) {
  114. if (video.muted) {
  115. video.muted = false;
  116. evt.target.innerHTML = "<img alt='volume on button' src='vol2.png' />"
  117. } else {
  118. video.muted = true;
  119. evt.target.innerHTML = "<img alt='volume off button' src='mute2.png' />"
  120. }
  121. }, false);
  122. } // end of runtime
  123. }// end of master 
  124. </script>
  125. </head>
  126. <body onload="init();" > 
  127. <video id="Video1" controls style="border: 1px solid blue;" height="240" width="320" title="video element"> 
  128. HTML5 Video is required for this example
  129. </video>
  130. <p id="buttonbar" style="display: none;")>
  131. <button id="restart" title="Restart button">[]</button> 
  132. <button id="slower" title="Slower playback button">-</button> 
  133. <button id="rew" title="Rewind button" ><<</button>
  134. <button id="play" title="Play button">></button>
  135. <button id="fwd" title="Forward button" >>></button>
  136. <button id="faster" title="Faster playback button">+</button>
  137. <button id="Button2" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button> 
  138. <br />
  139. <label>Playback </label>
  140. <label>Reset playback rate: </label><button id="normal" title="Reset playback rate button">=</button> 
  141. <label> Volume </label>
  142. <button id="volDn" title="Volume down button">-</button>
  143. <button id="volUp" title="Volume up button">+</button>
  144. <button id="mute" title="Mute button" ><img alt="Volume on button" src="vol2.png" /></button> 
  145. </p> 
  146. <br/> 
  147. <p id= "inputField" style="display:none;" >
  148. <label>Type or paste a video URL: <br/>
  149. <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" /> 
  150. <button id="loadVideo" title="Load video button" >Load</button>
  151. </label>
  152. </p>
  153. <p title="Error message area" id="errorMsg" style="color:Red;"></p> 
  154. </body>
  155. </html>

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！