在灯箱中打开视频时显示暂停状态

Question

我正在尝试制作一个函数，当您单击播放按钮时，视频会在页面中以灯箱效果显示在页面中心。问题是我已经将其设置为开始播放，当您单击"在灯箱中打开播放按钮"时，但 HTML5 视频控件将播放/暂停按钮显示为"播放"而不是"暂停"。是否可以注册视频是否正在播放，它应该从一开始就添加"暂停"样式等。

链接到实时问题：http://instagib.dk/westring-kbh/

JSFIDDLE 演示：http://jsfiddle.net/8rj09kL9/

我试过这样的事情。

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

Answer 1

我已经更改了您的代码中的某些内容，因为您已经使用了jquery，因此我将其全部转换为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();
        }
    });
});

演示 http://jsfiddle.net/8rj09kL9/4/

似乎以某种方式工作。