html - 网站上的YouTube自动播放仅可首次访问？

Question

我处于困境。
我正在尝试将YouTube视频添加到我的网站上，以自动播放...我已经做到了...但是，有没有办法告诉此人是否已经访问过该网站(例如使用Cookie还是更简单的方法) (我不知道如何使用cookie哈哈)然后如果他们访问了该网站多次，就不会自动播放？
我可以想象，如果您访问一个网站3或4次，它会变得很烦人，并且每次访问该视频都会不断播放!
这是我到目前为止的代码...
<iframe width="455" height="256" src="https://www.youtube.com/embed/qYTlJdYe0lw?rel=0&autoplay=1;showinfo=0" frameborder="0" allowfullscreen></iframe>
感谢您的帮助提前堆!

Answer 1

这是jsfiddle的一些实时示例:
Play youtube video only once at first page visit。
我正在使用cookie和youtube JavaScript API。

<!-- html -->
<div id="video_container"></div>

//JavaScript
$(document).ready(function() {
  //inject script tag in dom with iframe-api as source
  //on success this will call function "onYouTubeIframeAPIReady"
  //more info https://en.wikipedia.org/wiki/JSONP
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  //this is only for testing reason
  //remove cookie
    $('button').on('click', function(){
    document.cookie = "yt_video=; expires=Thu, 01 Jan 1970 00:00:00 UTC"; 
  });
});

var player;
function onYouTubeIframeAPIReady() {
//JavaScript API is loaded -> create player
//more info https://developers.google.com/youtube/iframe_api_reference#Getting_Started
        player = new YT.Player('video_container', {
          height: '390',
          width: '640',
          videoId: 'SzPfOuFvlfs',
          events: {
            'onReady': onPlayerReady
          }
        });
};
function onPlayerReady() {
  //check if cookie exist. If not set one and play video
  if (getCookie('yt_video') === '') {
    document.cookie="yt_video=SzPfOuFvlfs";
    player.playVideo();
  }
}
// helper function
// get cookie value
function getCookie(cname) {
    var name = cname + "=";
    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 "";
}