HTML5 video autoplay/play once

Question

I have a website with pages A, B, C, D. On the start page - A - there is a html5 video, set to autoplay. So the vid starts on loading the page. The video plays once, showing a play-again-button on ending. That’s fine so far. If I visit page B or C and then go to A again, the video starts again. But I want to enable the autoplay only once per visitor. That’s how it should be: one visit the webpage, start on page A, see the video once, go to page B or C or D, go back again to A (using link or back-button); and find the play-again-button, not the video playing again.

Edit:

Thanks for the ideas using cookies; now I learned that over here in Europe there’s a law that you have to tell the visitor using cookies and give him a choice on the start page wether he wants to accept them.

So I want to use window.sessionStorage for that purpose.

This is my code telling the video to be set on autoplay=false and the play-again-button to be shown .on("ended", ...

$(document).ready(function () {
    $("video").on("ended", function() {     
    $('video')[0].autoplay=false
    $('video')[0].load()
    $('.video-playing').removeClass('video-playing').addClass('video-wait');
    $('.play').removeClass('hide_play');
    });

    $('.play').click(function(){
    $('video')[0].play();
    $('.video-wait').removeClass('video-wait').addClass('video-playing');
    $('.play').addClass('hide_play');
    });
});

HTML

<video id="header-video" class="video-playing" preload="auto" poster="">
    <source src="" type="video/mp4">
    <source src="" type="video/webm">
</video>

My goal is: going back from page B or C to the startpage - A - (see above) the class '.video-playing' should be set to '.video-wait', '.play' to 'hide_play' and autoplay to "false".

Using sessionStorage is best for me, I think, because on opening a new window it should start from the beginning.

Unfortunately I have no idea how to implement that sessionStorage in my code.

link: www.2015.peter-martin-golf.de

Answer 1

You're going to have to set a cookie to determine if a users has already visited and you're going to have to control autoplay in javascript. Brightcove has a great HTML5 video library to do things like this called video.js. With it you can create a js Player object that has everything you need. So, assuming you're using jQuery you can do something like this:

var myPlayer = videojs('idOfVideo');

if (!!$.cookie('return-user')) {
    myPlayer.autoplay(true);
} else {
    myPlayer.autoplay(false);
    $.cookie('return-user', {
        expires: 365
      });
}

Answer 2

You have to save somewhere that user already was on site, you can save it to session, database, localStorage or in cookies. I suggest to use cookies because it's in client side (so you don't need to modify your database or set sessions with php).

Cookies usage with JS

Then user enters page A:

        function setCookie(cookieName, cookieValue, expireDays,isGlobal) {
            var expireDate = new Date();
            expireDate.setTime(d.getTime() + (expireDays*24*60*60*1000));
            var expires = "expires="+expireDate.toUTCString();
            if(isGlobal){
                document.cookie = cookieName + "=" + cookieValue + "; " + expires+"; path=/";
            }else{
                document.cookie = cookieName + "=" + cookieValue + "; " + expires;
            }
        }

        function getCookie(cookieName) {
           var name = cookieName + "=";
           var ca = document.cookie.split(';');
           for(var i=0; i<ca.length; i++) {
             var c = ca[i];
             while (c.charAt(0)==' ') c = c.substring(1);
               if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
          return "";
     }

    function checkCookie(cookieName) {
        if (getCookie(cookieName) != "") {
            return true;
        } else {
            return false;
        }
    }

    $(document).ready(function(){
      if(checkCookie('visited')){
         //SHOW PLAY/STOP BUTTONS
      }else{
        setCookie('visited',1,3,false);
        //PLAY VIDEO AUTOMATICALLY eg. document.getElementById('player').get(0).play();
      }
    });