使用jQuery控制HTML5视频 [英] Controling HTML5 video with jQuery

问题描述

我正在尝试使用jQuery为我的html5视频创建控制按钮，该视频在本地托管。但是我似乎无法让按钮工作。我尝试了不同的编码方法，但似乎有效。

I'm trying to create control buttons using jQuery for my html5 video, which is hosted locally. However I can't seem to get the buttons to work. I have tried different methods of coding but seem to work.

$(function(){
    var video = $('#video').get(0);

    $(document).delegate('#play-button', 'click', function() {
        video.load();
        video.play();
        $('#play-button').addClass('hide');
    });

    $(document).delegate('#pause', 'click', function() {
        if (video.play() === true) {
            video.pause();
        } else {
            $('#pause > img').attr('src', 'image/play.png');
            video.play();
        }
    });

    $(document).delegate('#stop', 'click', function() {
        video.stop();
        video.currentTime = 0;
    });
});

<div id="video-controls">
    <button type="button" role="button" id="play-button"><img src="<?php echo get_template_directory_uri () ?>/images/play.png" alt="play"></button>
    <button type="button" role="button" id="pause"><img src="<?php echo get_template_directory_uri () ?>/images/pause.png" alt="pause"></button>
    <button type="button" role="button" id="stop"><img src="<?php echo get_template_directory_uri () ?>/images/stop.png" alt="stop"></button>
</div>

我要做的是在视频中间显示播放按钮并点击一次它会播放视频然后隐藏。因此，要暂停和停止视频，用户需要将鼠标悬停在视频上，系统会显示控件。

What I'm trying to do is show a play button in the middle of the video and once clicked it will play the video but then hide. So to pause and stop the video the user will need to hover over the video and the controls will appear.

任何建议都将受到赞赏。感谢您抽出宝贵时间来查看我的问题。

Any advice will be appreciated. Thanks for taking the time to look at my question.

推荐答案

评论你的代码有一些错误。

As commented your code has some errors.

我修复了他们现在你可以在这里看到一个工作的jsfiddle

I fixed them and now you can see here a working jsfiddle

Javascript

    var video = $('video').get(0);

$('video, #video-controls').mouseenter(function(){
    if($('#video-controls').css('display') === 'none')
        $('#video-controls').show(); 
});
$('video, #video-controls').mouseleave(function(){ 
    if($('#video-controls').css('display') !== 'none')
        $('#video-controls').hide(); 
});

$(document).ready(function() { 
    var top = (($('video').position().top + $('video').height()) / 2) - $('#video-controls').height() / 2 ;
  var left = (($('video').position().left + $('video').width()) / 2) - $('#video-controls').width() / 2;

    $('#video-controls').css({top: top, left: left, position:'fixed'}); 
});

    $(document).delegate('#play-button', 'click', function() {
        video.load();
        video.play();
        $('#play-button').addClass('hide');
    });

    $(document).delegate('#pause', 'click', function() {
        if (video.paused !== true && video.ended !== true) {
            video.pause();
        } else {
            $('#pause > img').attr('src', 'image/play.png');
            video.play();
        }
    });

    $(document).delegate('#stop', 'click', function() {
        video.pause();
        video.currentTime = 0;
    });

HTML

<div id="video-controls" class="ctrls">
    <button type="button" role="button" id="play-button"><img src="<?php echo get_template_directory_uri () ?>/images/play.png" alt="play"></button>
    <button type="button" role="button" id="pause"><img src="<?php echo get_template_directory_uri () ?>/images/pause.png" alt="pause"></button>
    <button type="button" role="button" id="stop"><img src="<?php echo get_template_directory_uri () ?>/images/stop.png" alt="stop"></button>
</div>
<video width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

CSS

video{ z-index:0;}
.ctrls{ z-index:1; display: none;}

这篇关于使用jQuery控制HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！