HTML5-Video mit jQuery steuern

Question

Ich versuche, Steuerschaltflächen mithilfe von jQuery für mein html5-Video zu erstellen, das lokal gehostet wird. Jedoch kann ich nicht scheinen, dass die Knöpfe funktionieren. Ich habe verschiedene Methoden der Codierung versucht, aber scheinen zu arbeiten.

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

Was ich versuche in der Mitte des Videos eine Play-Taste zu tun ist, zeigen und klickte einmal wird es das Video abspielen, aber dann verstecken. Um das Video anzuhalten und anzuhalten, muss der Nutzer den Mauszeiger über das Video halten und die Steuerelemente erscheinen.

Jeder Rat wird geschätzt. Danke, dass Sie sich die Zeit genommen haben, meine Frage zu lesen.

Answer 1

Wie kommentiert Ihr Code hat einige Fehler.

ich sie festgelegt und jetzt können Sie 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;}