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

我的代码是这样的：

$('#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中播放视频的方法：

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

自动播放：

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>
    p 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>
    /p>
    

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

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>
    p 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>
     /p>
     br/>
     p 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>
    /p>
    p title="Error message area" id="errorMsg" style="color:Red;
    ">
    /p>
     /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！