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

【问题标题】：Separate play/pause buttons in html5 videohtml5 视频中的单独播放/暂停按钮
【发布时间】：2014-03-05 09:41:00
【问题描述】：

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

我希望我的播放按钮在单击它时将“播放”文本更改为“暂停”，当我单击暂停时，它将暂停（文本返回“播放”）。

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

我正在使用 video.js。

这是我的 script.js 文件：

（在 $(document).ready(function(){ ) 之后）

$('#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

有人知道怎么解决吗？

【问题讨论】：

The W3 demo page 可能有用

标签： jquery html html5-video

【解决方案1】：

正如我在 Lynda 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 的按钮，并设置它的样式。

【讨论】：