Separate play/pause buttons in html5 video

Question

I am working on a portfolio website that in each of the projects I have a HTML5 video that fits the screen size. I also have a navigation bar that stays on the bottom of the page. This nav bar contains a "play" button that makes the video start playing. But once it's playing, I cannot pause it. (I do not want to use the video controls)

I would like my play button to chage the "play" text for "pause" when I click it, and when I click pause, it will pause (and the text returns to "play").

Also, when the video finishes playing, I would like to make it return to the poster image.

I am using video.js.

Here is my script.js file:

(after the $(document).ready(function(){ )

$('#play').click(function(){
    videojs('#bird', {
            "autoplay": true, 
            "width": '100%', 
            "height": '100%', 
            "preload": 'auto'}, 
            function() {
              $('.vjs-control-bar').css('display', 'none');
              $('.top-header, .info').css('z-index','-1');
        });

This website makes something similar to what I want with this play/pause button: http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/2

Anyone knows how to solve this?

jppag jppag · Accepted Answer · 2014-02-17T17:51:45

As I've seen in the Lynda HTML5 video, about play/pause button, just use this:

the play/pause:

var video = document.getElementById("my_video");

$("#play_button").bind("click", function(){
  video.play();
));

$("play_toggle").bind("click", function() {
  if (video.paused) {
    $(this).html("Pause");
  } else {
    video.pause();
    $(this).html("Play");
});

Just create a button with and ID of play_button, and style it.

Separate play/pause buttons in html5 video

1 Answers