Question

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

当我点击它时，我希望我的播放按钮可以“播放”文本“暂停”，当我点击暂停时，它会暂停（并且文本会返回“播放”）。

此外，当视频播放完毕后，我想让它返回海报图片。

我正在使用video.js。

这是我的script.js文件：

（在$（文件）.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

任何人都知道如何解决这个问题？

Answer 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的按钮，然后设置样式。

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

1 个答案: