【发布时间】：2020-02-02 12:53:41
【问题描述】：
我有一个由 ajax 调用的工作 youtube 视频区域。访客第一次进入该区域时，视频效果很好。如果访问者转到应用程序的另一个区域并返回（第二次 ajax 调用），则视频区域不显示任何视频，并且似乎从未调用 window.onYouTubeIframeAPIReady() （调用 playVideo( ) ...)
目标是始终显示视频
一旦代码相同但行为不同，我尝试动态插入和删除 youtube_api，使 window.onYouTubeIframeAPIReady() 为 null 并重建，以便第二次调用与第一次完全一样，但没有（我猜我不明白到底是什么问题）
javascript代码是：
function loadScript() {
if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
}
function loadPlayer() {
console.log(window.onYouTubePlayerAPIReady)
console.log("3");
window.onYouTubePlayerAPIReady = function () {
console.log("4");
onYouTubeIframeAPIReady();
console.log("5");
};
}
$(function () {
loadScript();
})
var VidID;
$(document).ready(function() {
console.log("0");
VidID = $("#videoWraper").attr("data-PlayingVid");
console.log("1");
loadPlayer();
console.log("2");
});
function onYouTubeIframeAPIReady() {
console.log("7");
player = new window.YT.Player('YouTubeVideo', {
videoId: VidID, // YouTube Video ID lUlOptJolAA
//width: 560, // Player width (in px)
//height: 3160, // Player height (in 316 px)
playerVars: {
enablejsapi: 1,
autoplay: 1, // Auto-play the video on load
controls: 1, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 1, // Hide the Youtube Logo
loop: 0, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 1, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 1, // Hide video controls when playing
rel: 0, // Hide recommended videos
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
console.log("8");
}
function onPlayerReady(event) {
event.target.playVideo();
}
如前所述，youtube 视频在第一次通话时有效，但在第二次通话时无效。
控制台轨道是（我插入了 console.logs 以获得此信息）：
0 //starts
VM9066:53 1 // got to video ID
VM9066:15 undefined //window.onYouTubePlayerAPIReady not defined
VM9066:19 3
VM9066:58 2
VM9066:69 7 // window.onYouTubePlayerAPIReady is being defined
VM9066:94 8 // window.onYouTubePlayerAPIReady is defined
VM9066:24 4
VM9066:69 7 //dont understand why the second time
VM9066:94 8 //dont understand why the second time
VM9066:28 5
ERROR: www-widgetapi.js:115 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:44600').
ERROR: www-widgetapi.js:115 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:44600').
VM9066:104 10 //event onstatechange
VM9066:106 a1[object Object]
VM9066:107 a20
在第二个 ajax 调用控制台上只显示：
0
VM9574:53 1
VM9574:15 ƒ () {
console.log("4");
onYouTubeIframeAPIReady();
console.log("5");
}
VM9574:19 3
VM9574:58 2
html代码为：
<div id="videoWraper" class="video-container" data-PlayingVid="@Model.SM_Identifier">
<div id="YouTubeVideo"></div>
<script async src="https://www.youtube.com/iframe_api"></script>
</div>
如果有人可以帮助我找到错误，我将不胜感激。
谢谢你，很抱歉发了这么长的帖子。
【问题讨论】：
-
如果您能用上面的代码制作一个 jsFiddle，我将不胜感激。