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

Question

我正在尝试制作一个功能，当您单击播放按钮时，视频会在具有灯箱效果的页面中心显示。问题是我已经将它设置为开始播放，当您单击 "open in lightbox play button" 但 HTML5 视频控件将 play/pause 按钮显示为 "play" 而不是 "pause".是否可以注册如果视频正在播放它应该从开始添加 "pause" 样式等

link 住问题：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/

似乎以某种方式工作。

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

show pause state when open a video in lightbox

html

javascript

video

jquery