• 使用jQuery播放/暂停 HTML5视频

    文章来自：http://blog.okbase.net/jquery2000/archive/4485.html

    我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。
    我的代码是这样的：

    1
    2
    3
    $('#playMovie1').click(function(){
    $('#movie1').play();
    });

    但发现这样不行，而用以下的js是可以的：

    1
    document.getElementById('movie1').play();

    解决方法：
    play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，代码如下：

    1
    $('#videoId').get(0).play();

    最简单的方法实现Play和Pause:

    1
    2
    $('video').trigger('play');
    $('video').trigger('pause');


    点击视频就能播放和暂停

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $("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');
    }
    })

    静音和取消静音

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $('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中播放视频的方法：

    1
    2
    3
    4
    <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>

    自动播放：

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

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

    1
    2
    3
    <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>

    一个比较简洁的例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <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>


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

     
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    <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>
  • 相关阅读:
    Linux进程和线程
    Vim编辑器
    Java多线程编程（七）线程状态、线程组与异常处理
    Java多线程编程（六）单例模式与多线程
    Integer to Roman
    Container With Most Water
    Regular Expression Matching
    Palindrome Number
    c/c++获取硬盘序列号
    String to Integer (atoi)
  • 原文地址：https://www.cnblogs.com/xinlinux/p/5026689.html
Copyright © 2020-2023  润新知