Question

I’ve got a working example of a control I need for a video (HTML5). What I’m trying to figure out is how to make it replayable ONCE, and not more. The code I have now brings back the replay button every time the video ends. I’d like it to appear after the first play but not the second. Thanks.

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

You could just add a varibale to check if the video has already been replayed and do something based on that variable eg.

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

Once the video has been replayed the button to replay will no longer show. You could also do something like this to allow a number of replays:

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