HTML5視頻自動播放/播放一次

我有一個網頁A，B，C，D。在開始頁面 - A - 有一個html5視頻，設置爲自動播放。所以vid開始加載頁面。視頻播放一次，結束時顯示再播放按鈕。目前爲止沒有問題。如果我訪問頁面B或C，然後再次轉到A，則視頻會再次啓動。但是我想爲每個訪問者啓用一次自動播放。應該是這樣的：一個訪問網頁，從A頁開始，看一次視頻，進入頁面B或C或D，再次返回到A（使用鏈接或後退按鈕）;並找到再次播放按鈕，而不是再次播放視頻。HTML5視頻自動播放/播放一次

編輯：

感謝您使用cookies的想法;現在我知道在歐洲有一個法律，你必須告訴訪問者使用cookies，並給他一個他想要接受他們的開始頁面的選擇。

所以我想爲此使用window.sessionStorage。

這是我的代碼告訴視頻自動播放設置= false，並且播放一次按鈕來顯示。對（「結束」，...

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

來源

2015-12-16 Martin

您可以使用HTML5 localStorage，但只有在關閉標籤頁或瀏覽器窗口之後纔可以使用。 – AtheistP3ace

[頁面加載第一次時設置cookie]（http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie），但如果cookie未設置，[使用JavaScript播放視頻]（http://stackoverflow.com/questions/10327907/play-pause-html5-video-javascript）。 – Blazemonger

你必須從某個地方保存用戶已經是在現場，你可以將它保存到會話，數據庫的localStorage或餅乾。我建議使用cookie，因爲它在客戶端（因此您不需要修改數據庫或使用php設置會話）。與JS

餅乾使用

然後用戶進入頁面答：

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

來源

2015-12-16 14:48:39 Gvidas

你將不得不設置一個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 
     }); 
}

來源

2015-12-16 14:58:46 Taytorious

HTML5視頻自動播放/播放一次

回答

相關問題