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

Posted 2023-05-07

【中文标题】html5 视频中的单独播放/暂停按钮

【英文标题】：Separate play/pause buttons in html5 video

【发布时间】：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 可能有用

【参考方案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 的按钮，并设置它的样式。