CODEWITHSUNDEEP
javascriptjqueryhtmlvideohtml5-video
Mat Teague
Mat Teague

Reputation: 147

Controling HTML5 video with jQuery

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.

Upvotes: 0

Views: 13495

Answers (1)

Luca
Luca

Reputation: 1626

As commented 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.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;}

Upvotes: 1

Related Questions