Question

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

链接到直播问题：http://instagib.dk/westring-kbh/

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

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

似乎以某种方式工作。

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

1 个答案: