zoukankan      html  css  js  c++  java

  • jQuery：播放/暂停 HTML5视频[轉]

    jQuery不可以使用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=" 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
  • 相关阅读:
    tensorflow搭建神经网络基本流程
    为什么Linux 实例执行 df 和 du 查看磁盘时结果不一致
    MySQL高可用架构之MHA
    Postgresql 用户管理
    PXE+Kickstart无人值守安装CentOS 7
    linux shell实用常用命令
    常用压缩命令
    mongodb 备份还原
    mongodb 备份脚本
    mongodb 日志清理
  • 原文地址：https://www.cnblogs.com/mandongpiaoxue/p/7489261.html
Copyright © 2011-2022 走看看