CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Mikkel Madsen
Mikkel Madsen

Reputation: 347

show pause state when open a video in lightbox

I'm trying to make a function that when you click a play button, the video is showed center in page with lightbox effect. The problem is that i've set it to start playing, when you click the "open in lightbox play button" but the HTML5 video control show the play/pause button as "play" and not "pause". Is it possible to registrer if the video is playing it should add "pause" style from start etc.

link to live problem: http://instagib.dk/westring-kbh/

jsfiddle demo: http://jsfiddle.net/8rj09kL9/

I've tried something like this.

// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function() {
    $(".video-popup-outer").show();
    $('.toggle-play-pause').addClass('pause');
    $("#showreel-video")[0].play();
});

// hide the popup outer
$(".close-video").click(function() {
    $(".video-popup-outer").hide();
    $("#showreel-video").load();
});

// toggle play / pause 
$('#play-pause').click(function() {
    $('.toggle-play-pause').toggleClass('play','pause'); //Adds 'a', removes 'b' and vice versa
});

// video functionality
window.onload = function() {    

    // Video
    var video = document.getElementById("showreel-video");
    // Buttons
    var playButton = document.getElementById("play-pause");
    // Event listener for the play/pause button
    playButton.addEventListener("click", function() {
        if (video.paused == true) {
            // Play the video
            video.play();
        } else {
            // Pause the video
            video.pause();
        }
    });
}

Upvotes: 0

Views: 973

Answers (1)

MightyPork
MightyPork

Reputation: 18861

I've changed something in your code, since you already use jquery, I converted it all to jquery.

$(document).ready(function () {
    // light box effect with auto play
    // show the popup outer
    $("#play-index-video").click(function () {
        $(".video-popup-outer").show();
        $('.toggle-play-pause').addClass('pause');
        $("#showreel-video")[0].play();
    });
    // hide the popup outer
    $(".close-video").click(function () {
        $(".video-popup-outer").hide();
        $("#showreel-video").load();
    });


    // Event listener for the play/pause button
    $("#play-pause").click(function () {
        $('.toggle-play-pause').toggleClass('play', 'pause'); //Adds 'a', removes 'b' and vice versa

        var video = $("#showreel-video")[0];
        if (video.paused) {
            video.play();
        } else {
            video.pause();
        }
    });
});

DEMO http://jsfiddle.net/8rj09kL9/4/

Seems to work somehow.

Upvotes: 1

Related Questions