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

时间:2014-02-07 20:11:07

标签: jquery html5 html5-video

我正在投资组合网站上,在每个项目中,我都有符合屏幕大小的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

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

1 个答案:

答案 0 :(得分:0)

正如我在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的按钮,然后设置样式。