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

Question

我试图制作一个功能，当您单击播放按钮时，视频将显示在具有lightbox效果的页面的中心。问题是我已经设置它开始播放，当你点击“在Lightbox播放按钮中打开”，但HTML5视频控件将播放/暂停按钮显示为“播放”而不是“暂停”。是否有可能registrer如果在播放视频时，应该从开始添加等“暂停”风格

链接生活问题：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(); 
     } 
    }); 
}); 

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

似乎以某种方式工作。