jQuery - 限制视频回放的数量

时间:2012-12-05 17:55:09

标签: jquery html5 video

我有一个关于视频所需控件的实例(HTML5)。我想弄清楚的是如何让它重播ONCE,而不是更多。我现在的代码每次视频结束时都会返回重播按钮。我希望它出现在第一场比赛后但不是第二场比赛。谢谢。

HTML:

<video id="erbVid" width="320" height="240" autoplay="autoplay">
<source src="Question_2_Video.mp4" type="video/mp4"></source>
</video>

jQuery的:

$(document).ready(function() {
    $("#replayButton").hide();    
    $("video").bind("ended", function() {
        $("#replayButton").show();
    });
    $("#replayButton").click(function() {
        $("video")[0].play();
        $("#replayButton").hide();
    });    
});

1 个答案:

答案 0 :(得分:0)

你可以添加一个varibale来检查视频是否已经被重放,并根据该变量做一些事情,例如。

$(document).ready(function() {
    // Create your boolean variable showing the video has not yet been replayed
    var replayed = false;

    $("#replayButton").hide();

    $("video").bind("ended", function() {
        // Check if the video has been replayed
        if(!replayed){
            // If not, do something and set replayed to true
            $("#replayButton").show();
            replayed = true;
        }
    });
    $("#replayButton").click(function() {
        $("video")[0].play();
        $("#replayButton").hide();
    });    
});

重播视频后,重播按钮将不再显示。您也可以这样做以允许多次重放:

var replayed = 0;
var replayed_max = 5;

$("video").bind("ended", function() {
    // Check if the video has been replayed the max number of times
    if(replayed < replayed_max){
        // If not, do something and add 1 to replayed
        $("#replayButton").show();
        replayed++;
    }
});