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