I'm trying to create control buttons using jQuery for my html5 video, which is hosted locally. However I can't seem to get the buttons to work. I have tried different methods of coding but seem to work.

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

What I'm trying to do is show a play button in the middle of the video and once clicked it will play the video but then hide. So to pause and stop the video the user will need to hover over the video and the controls will appear.

Any advice will be appreciated. Thanks for taking the time to look at my question.

I'm trying to create control buttons using jQuery for my html5 video, which is hosted locally. However I can't seem to get the buttons to work. I have tried different methods of coding but seem to work.

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

What I'm trying to do is show a play button in the middle of the video and once clicked it will play the video but then hide. So to pause and stop the video the user will need to hover over the video and the controls will appear.

Any advice will be appreciated. Thanks for taking the time to look at my question.

• javascript
• jquery
• html
• video
• html5-video

• On pause you never show again your #play-button – Roko C. Buljan Commented Jul 22, 2016 at 9:50
• .stop() method doesn't exists in HTML5 video – Luca Commented Jul 22, 2016 at 10:04
• Thanks for letting me know @RokoC.Buljan – Mat Teague Commented Jul 22, 2016 at 11:20
• 1 Thanks @Luca I never realised that stop() wasn't a method. – Mat Teague Commented Jul 22, 2016 at 11:21

1 Answer 1

As mented your code has some errors.

I fixed them and now you can 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./html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools./html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of
<a href="http://www.bigbuckbunny/" target="_blank">Big Buck Bunny</a>.
</p>

CSS

video{ z-index:0;}
.ctrls{ z-index:1; display: none;}