未捕获的类型错误:YT.Player 不是构造函数 [英] Uncaught TypeError: YT.Player is not a constructor
问题描述
我希望有人可以帮助解决这个问题.当我在页面上大约 5 个选项卡上时，我收到以下错误 Uncaught TypeError: YT.Player is not a constructor.我点击页面上的一个按钮，它会弹出一个模态窗口，我从中进行选择，并在控制台中的模态窗口关闭时显示错误.
令人沮丧的是，使用与生产相同的数据和相同的编译参数，我无法在我们的开发或暂存环境中复制自己的错误.一个区别是我们的生产服务器位于 NetScaler 后面.NetScaler 可能是问题所在吗?
下面是我的视频代码.
@if (!string.IsNullOrEmpty(video.VideoURL)){<script type="text/javascript">var _gVideoTracked = false;var 播放器；函数 onYouTubeIframeAPIReady() {player = new YT.Player('玩家', {事件:{'onStateChange':onPlayerStateChange}});}函数 onPlayerStateChange(event) {开关(事件数据){案例0:休息;情况1:如果(！_gVideoTracked){BaGaTrack('视频播放', '播放')}_gVideoTracked = 真；休息;案例2:}}$(document).ready(function () {$.getScript("https://www.youtube.com/iframe_api", function () {player = new YT.Player('玩家', {事件:{'onStateChange':onPlayerStateChange}});});});<iframe id="player" src="@video.VideoURL/?enablejsapi=1" allowfullscreen class="video"></iframe>}似乎有一个未公开的 API，YT.ready.
在他们的文档中找不到:https://developers.google.com/youtube/iframe_api_reference>
就我而言，我必须将 new YT.Player 包裹在 YT.read() 中，如下所示.
function setupPlayer() {/*** 这失败了！！！！！*///player = new YT.Player("player", {//高度:390"，//宽度:640"，//videoId: "M7lc1UVf-VE",//事件:{//onReady: onPlayerReady,//onStateChange: onPlayerStateChange//}//});/*** 需要等到 Youtube Player 准备好！*/window.YT.ready(function() {player = new window.YT.Player("视频", {高度:390"，宽度:640"，videoId: "M7lc1UVf-VE",事件:{onReady: onPlayerReady,onStateChange: onPlayerStateChange}});});}我是通过这个 CodeSanbox 示例找到的，https://codesandbox.io/s/youtube-iframe-api-tpjwj
它使用 jQuery，我使用下面的 Vanilla JS 重新实现了它.
https://codesandbox.io/s/soanswer52062169-mem83
为了完整起见，这里是 JavaScript 代码.
function loadVideo() {console.info(`loadVideo 调用`);(函数 loadYoutubeIFrameApiScript() {const tag = document.createElement("script");tag.src = "https://www.youtube.com/iframe_api";const firstScriptTag = document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);tag.onload = setupPlayer;})();让玩家 = 空；功能设置播放器(){/*** 这失败了！！！！！*///player = new YT.Player("player", {//高度:390"，//宽度:640"，//videoId: "M7lc1UVf-VE",//事件:{//onReady: onPlayerReady,//onStateChange: onPlayerStateChange//}//});/*** 需要等到 Youtube Player 准备就绪！** YT.ready 未记录在 https://developers.google.com/youtube/iframe_api_reference* 但从 https://codesandbox.io/s/youtube-iframe-api-tpjwj 找到*/window.YT.ready(function() {player = new window.YT.Player("视频", {高度:390"，宽度:640"，videoId: "M7lc1UVf-VE",事件:{onReady: onPlayerReady,onStateChange: onPlayerStateChange}});});}函数 onPlayerReady(event) {event.target.playVideo();}函数 onPlayerStateChange(event) {var videoStatuses = Object.entries(window.YT.PlayerState);console.log(videoStatuses.find(status => status[1] === event.data)[0]);}}如果(document.readyState ！==加载"){console.info(`document.readyState ==>`, document.readyState);加载视频()；} 别的 {document.addEventListener("DOMContentLoaded", function() {console.info(`DOMContentLoaded ==>`, document.readyState);加载视频()；});}I hope someone can help with this. I am getting the following error Uncaught TypeError: YT.Player is not a constructor when I am on one tab of about 5 on my page. I click on a button on the page, and it brings up a modal window from which I make a selection and upon the closing of the modal window in the console that error is shown.
What is frustrating is that using the same data with the same compile arguments as production, I cannot get this error to replicate itself in our Dev or Staging environments. The one difference is that our production servers sit behind a NetScaler. Could the NetScaler be the issue?
Below is my Video code.
<div class="videocontainer">
@if (!string.IsNullOrEmpty(video.VideoURL))
{
<script type="text/javascript">
var _gVideoTracked = false;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: { 'onStateChange': onPlayerStateChange }
});
}
function onPlayerStateChange(event) {
switch (event.data) {
case 0:
break;
case 1:
if (!_gVideoTracked) {
BaGaTrack('Video Played', 'Played')
}
_gVideoTracked = true;
break;
case 2:
}
}
$(document).ready(function () {
$.getScript("https://www.youtube.com/iframe_api", function () {
player = new YT.Player('player', {
events: { 'onStateChange': onPlayerStateChange }
});
});
});
</script>
<iframe id="player" src="@video.VideoURL/?enablejsapi=1" allowfullscreen class="video"></iframe>
}
</div>
There seems to be an undocumented API, YT.ready.
Not found in their documentation: https://developers.google.com/youtube/iframe_api_reference
In my case, I had to wrap new YT.Player within YT.read() as shown below.
function setupPlayer() {
/**
* THIS FAILS!!!!!
*/
// player = new YT.Player("player", {
// height: "390",
// width: "640",
// videoId: "M7lc1UVf-VE",
// events: {
// onReady: onPlayerReady,
// onStateChange: onPlayerStateChange
// }
// });
/**
* Need to wait until Youtube Player is ready!
*/
window.YT.ready(function() {
player = new window.YT.Player("video", {
height: "390",
width: "640",
videoId: "M7lc1UVf-VE",
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
});
}
I found it via this CodeSanbox sample, https://codesandbox.io/s/youtube-iframe-api-tpjwj
It uses jQuery and I reimplemented it using Vanilla JS below.
https://codesandbox.io/s/soanswer52062169-mem83
For completeness, here is the JavaScript code.
function loadVideo() {
console.info(`loadVideo called`);
(function loadYoutubeIFrameApiScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
tag.onload = setupPlayer;
})();
let player = null;
function setupPlayer() {
/**
* THIS FAILS!!!!!
*/
// player = new YT.Player("player", {
// height: "390",
// width: "640",
// videoId: "M7lc1UVf-VE",
// events: {
// onReady: onPlayerReady,
// onStateChange: onPlayerStateChange
// }
// });
/**
* Need to wait until Youtube Player is ready!
*
* YT.ready is not documented in https://developers.google.com/youtube/iframe_api_reference
* but found from https://codesandbox.io/s/youtube-iframe-api-tpjwj
*/
window.YT.ready(function() {
player = new window.YT.Player("video", {
height: "390",
width: "640",
videoId: "M7lc1UVf-VE",
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
var videoStatuses = Object.entries(window.YT.PlayerState);
console.log(videoStatuses.find(status => status[1] === event.data)[0]);
}
}
if (document.readyState !== "loading") {
console.info(`document.readyState ==>`, document.readyState);
loadVideo();
} else {
document.addEventListener("DOMContentLoaded", function() {
console.info(`DOMContentLoaded ==>`, document.readyState);
loadVideo();
});
}
这篇关于未捕获的类型错误:YT.Player 不是构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
