javascript - 使用 jQuery 控制 HTML5 视频

Question

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

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

我想做的是在视频中间显示一个播放按钮，单击后它将播放视频，然后隐藏。因此，要暂停和停止视频，用户需要将鼠标悬停在视频上，然后控件就会出现。

如有任何建议，我们将不胜感激。感谢您花时间查看我的问题。

Answer 1

正如评论所述，您的代码有一些错误。

我已修复它们，现在您可以 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;}