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

HTML5 video autoplay/play once

本文关键字：一次 播放 视频 自动播放 HTML5      更新时间：2023-09-26

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

编辑：

感谢您使用cookie的想法；现在我了解到，在欧洲有一项法律，你必须告诉访客使用cookie，并在首页上让他选择是否接受cookie。

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

这是我的代码，告诉视频设置为autoplay=false，并显示再次播放按钮。on（"结束"，…

$(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对我来说是最好的，因为在打开一个新窗口时，它应该从头开始。

不幸的是，我不知道如何在代码中实现会话存储。

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

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

使用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();
      }
    });

您必须设置一个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
      });
}
相关文章：