jquery - jQuery - 限制视频重播次数

Question

我有一个视频（HTML5）所需的控件的工作示例。我想弄清楚的是如何让它可以重播一次，而不是更多。每次视频结束时，我现在拥有的代码都会带回重播按钮。我希望它出现在第一场比赛之后，而不是第二场。谢谢。

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();
    });    
});

Answer 1

您可以只添加一个变量来检查视频是否已被重播并基于该变量执行某些操作，例如。

$(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++;
    }
});