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

Question

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

编辑:

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

所以我想使用 window.sessionStorage 来达到这个目的。

这是我的代码，告诉视频设置为 autoplay=false 并显示再次播放按钮 .on("ending", ...

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

您必须保存用户已经在网站上的某个位置，您可以将其保存到 session 、数据库、localStorage 或 cookie 中。我建议使用 cookie，因为它位于客户端(因此您不需要修改数据库或使用 php 设置 session )。

JS 中 Cookie 的使用

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