HTML5 视频自动播放/播放一次

Question

我有一个包含页面 A、B、C、D 的网站。 在起始页 - A - 有一个 html5 视频，设置为自动播放。 所以视频开始加载页面。视频播放一次，结束时显示一个重播按钮。到目前为止还不错。 如果我访问页面 B 或 C，然后再次转到 A，视频将重新开始。 但我只想为每个访问者启用一次自动播放。 应该是这样的：访问网页，从页面 A 开始，观看一次视频，转到页面 B 或 C 或 D，再次返回 A（使用链接或返回按钮）；并找到再次播放按钮，而不是再次播放的视频。

编辑：

感谢使用 cookie 的想法；现在我了解到，在欧洲这里有一条法律，您必须使用 cookie 告诉访问者，并在开始页面上让他选择是否接受它们。

所以我想为此目的使用 window.sessionStorage。

这是我的代码，告诉视频设置为 autoplay=false 并显示再次播放按钮 .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>

我的目标是：从页面 B 或 C 回到起始页 - A - （见上文）类 '.video-playing' 应该设置为 '.video-wait'，'.play' 到 'hide_play ' 并自动播放为“false”。

我认为使用 sessionStorage 最适合我，因为在打开新窗口时它应该从头开始。

不幸的是，我不知道如何在我的代码中实现该 sessionStorage。

链接：www.2015.peter-martin-golf.de

Answer 1

您必须保存该用户已经在站点的某个位置，您可以将其保存到会话、数据库、localStorage 或 cookie 中。我建议使用 cookie，因为它在客户端（因此您无需修改​​数据库或使用 php 设置会话）。

JS 使用 Cookies

然后用户进入页面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();
      }
    });

Answer 2

您将不得不设置一个 cookie 来确定用户是否已经访问过，并且您将不得不在 javascript 中控制自动播放。 Brightcove 有一个很棒的 HTML5 视频库来做这样的事情，叫做video.js。有了它，您可以创建一个 js Player 对象，其中包含您需要的一切。因此，假设您使用的是 jQuery，您可以执行以下操作：

var myPlayer = videojs('idOfVideo');

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