jQueryでHTML5ビデオを制御する

Question

ローカルにホストされているhtml5ビデオにjQueryを使用してコントロールボタンを作成しようとしています。しかし、私はボタンが動作するように見えることはできません。私はさまざまなコーディング方法を試しましたが、うまくいくようです。私がやろうとしている何

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