YoutubeAPI 视频有时无法在 IE 11 中加载

Question

我创建了一个网站，它通过 id 从数据库中加载视频。我正在使用 YoutubeAPI 嵌入播放器，但在 IE 播放器中有时无法加载。这是脚本。

<script>

var player;
var player_width = $(window).width() - 100;
var player_height = $(window).height() - 50;

$('.prev-next').height(player_height);
$('.prev-next-but').height(player_height);

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        width: player_width,
        height: player_height,
      videoId: '<?php echo $yt_id; ?>',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function onPlayerStateChange(event) {        
    if(event.data === 0) {
        document.forms["not_skipped"].submit();
    }
}    

当我使用简单的 iframe 时，我没有这个问题，但我不知道如何在视频结束时以这种方式触发事件。

Answer 1

首先，检查您用于加载播放器 API 库的方法。如果您使用的是脚本标签，那么脚本很可能会在您的 onYouTubePlayerAPIReady 函数被定义之前加载，因此不会触发任何内容。为避免这种竞争条件，您希望像这样加载库：

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
var player_width = $(window).width() - 100;
var player_height = $(window).height() - 50;

$('.prev-next').height(player_height);
$('.prev-next-but').height(player_height);

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        width: player_width,
        height: player_height,
      videoId: '<?php echo $yt_id; ?>',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function onPlayerStateChange(event) {        
    if(event.data === 0) {
        document.forms["not_skipped"].submit();
    }
}
</script>  

现在，关于您提到的另一件事——将播放器 API 挂接到现有的 iframe 中是相当简单的；你只需要将 iframe 的 ID 传递给 YT.Player 构造函数，不要给它一个宽度、高度或视频 ID，如下所示：

<iframe id="myplayer" width="560" height="315" src="//www.youtube.com/embed/0kl3VNy0uAI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>    
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('myplayer', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function onPlayerStateChange(event) {        
    if(event.data === 0) {
        document.forms["not_skipped"].submit();
    }
}
</script>

请注意，我们仍在动态加载播放器库，以避免出现竞争条件。