html5视频中的单独播放/暂停按钮

Question

我正在组合网站上工作，在每个项目中我都有一个适合屏幕尺寸的HTML5视频。我也有一个导航栏，停留在页面的底部。此导航栏包含一个“播放”按钮，使视频开始播放。但一旦播放完毕，我无法暂停播放。 （我不想使用视频控件）

我希望我的播放按钮在单击时将“播放”文字变为“暂停”，当我单击暂停时，它会暂停（以及文本返回到“播放”）。

另外，当视频播放结束后，我想让它返回到海报图像。

我正在使用video.js。

这里是我的script.js文件：

（$在后（文件）。就绪（函数（）{）

$('#play').click(function(){ 
    videojs('#bird', { 
      "autoplay": true, 
      "width": '100%', 
      "height": '100%', 
      "preload": 'auto'}, 
      function() { 
       $('.vjs-control-bar').css('display', 'none'); 
       $('.top-header, .info').css('z-index','-1'); 
     }); 

这个网站使类似的东西是什么我想这个戏/暂停按钮：http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/2

任何人知道如何解决这个

Answer 1

正如我所看到的琳达HTML5视频，大约播放/暂停按钮，只要使用此：

播放/暂停：

var video = document.getElementById("my_video"); 

$("#play_button").bind("click", function(){ 
    video.play(); 
)); 

$("play_toggle").bind("click", function() { 
    if (video.paused) { 
    $(this).html("Pause"); 
    } else { 
    video.pause(); 
    $(this).html("Play"); 
}); 

只需创建一个按钮和play_button的ID和样式它。