使用jQuery播放/暂停 HTML5视频

文章2017-03-152,962 人已阅来源：网络

我尝试用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)">&lt;&lt;</button>
<button id="play" onclick="vidplay()">&gt;</button>
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</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">&lt;&lt;</button>
    <button id="play" title="Play button">&gt;</button>
    <button id="fwd" title="Forward button">&gt;&gt;</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://blog.okbase.net/jquery2000/archive/4485.html

AIHX

使用jQuery播放/暂停 HTML5视频

解决方法：

相关内容