使用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;}