Youtube 视频未在第二个 ajaxcall 中播放

本文介绍了Youtube 视频未在第二个 ajaxcall 中播放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我有一个由 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/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);}}函数加载播放器(){console.log(window.onYouTubePlayerAPIReady)console.log("3");window.onYouTubePlayerAPIReady = 函数 () {console.log("4");onYouTubeIframeAPIReady();console.log("5");};}$(函数(){加载脚本()；})var VidID;$(document).ready(function() {console.log("0");VidID = $("#videoWraper").attr("data-PlayingVid");console.log("1");加载播放器()；console.log("2");});函数 onYouTubeIframeAPIReady() {console.log("7");player = new window.YT.Player('YouTubeVideo', {videoId: VidID,//YouTube 视频 ID lUlOptJolAA//width: 560,//播放器宽度(以像素为单位)//height: 3160,//玩家高度(316 像素)玩家变量:{启用jsapi: 1,autoplay: 1,//加载时自动播放视频control: 1,//在播放器中显示暂停/播放按钮showinfo: 0,//隐藏视频标题适度品牌:1，//隐藏Youtube徽标loop: 0,//循环运行视频fs: 0,//隐藏全屏按钮cc_load_policy: 1,//隐藏字幕iv_load_policy: 3,//隐藏视频注释autohide: 1,//播放时隐藏视频控件rel: 0,//隐藏推荐视频},事件:{'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}});console.log("8");}函数 onPlayerReady(event) {event.target.playVideo();}

如前所述，youtube 视频在第一次通话时有效，但在第二次通话时无效.

控制台轨道是(我插入了 console.logs 以获得此信息):

0//开始VM9066:53 1//获得视频 IDVM9066:15 undefined//window.onYouTubePlayerAPIReady 未定义VM9066:19 3VM9066:58 2VM9066:69 7//window.onYouTubePlayerAPIReady 正在定义VM9066:94 8//window.onYouTubePlayerAPIReady 已定义VM9066:24 4VM9066:69 7//不明白为什么第二次VM9066:94 8//不明白为什么第二次VM9066:28 5错误:www-widgetapi.js:115 无法在DOMWindow"上执行postMessage":提供的目标来源(https://www.youtube")与收件人窗口的来源(http://本地主机:44600').错误:www-widgetapi.js:115 无法在DOMWindow"上执行postMessage":提供的目标来源(https://www.youtube")与收件人窗口的来源(http://本地主机:44600').VM9066:104 10//事件onstatechangeVM9066:106 a1[对象对象]VM9066:107 a20

在第二个 ajax 调用控制台上只显示:

<代码>0VM9574:53 1VM9574:15 ƒ () {console.log("4");onYouTubeIframeAPIReady();console.log("5");}VM9574:19 3VM9574:58 2

html代码为:

<div id="YouTube 视频"></div><script async src="https://www.youtube/iframe_api"></script>

如果有人能帮我找到错误，我将不胜感激.

感谢您的长篇博文.

解决方案

这个问题的答案是在一个类似问题的答案中找到的:

https://stackoverflow/a/48038558/2358046

不是进行外部调用，而是对相同代码进行内部调用，稍作改动，解决错误:

错误:www-widgetapi.js:115 无法在DOMWindow"上执行postMessage":提供的目标源(https://www.youtube")与收件人窗口的源不匹配('http://localhost:44600')

这样就不需要动态加载yt_api了，所以js脚本改成:

var 播放器；var VidID;//准备好后，获取YT_ID并调用API do youtube$(document).ready(function () {VidID = $("#videoWraper").attr("data-PlayingVid");onYouTubeIframeAPIReady();});//调用 youtube API(内部)以启动视频函数 onYouTubeIframeAPIReady() {player = new window.YT.Player('YouTubeVideo', {videoId: VidID,//YouTube 视频 ID lUlOptJolAA玩家变量:{启用jsapi: 1,autoplay: 1,//加载时自动播放视频control: 1,//在播放器中显示暂停/播放按钮showinfo: 0,//隐藏视频标题适度品牌:1，//隐藏Youtube徽标loop: 0,//循环运行视频fs: 0,//隐藏全屏按钮cc_load_policy: 1,//隐藏字幕iv_load_policy: 3,//隐藏视频注释autohide: 1,//播放时隐藏视频控件rel: 0,//隐藏推荐视频},事件:{'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}});}函数 onPlayerReady(event) {event.target.playVideo();}

创建的文件应该在这段代码之前加载.

单一且不完美，但解决了问题.

I have a working youtube video area that is called by ajax. The first time a visitor enters this area, the video works perfectly. If the visitor goes to another area of the app, and returns (second ajax call), the video area doesn't show any video, and it seems that window.onYouTubeIframeAPIReady() is never called (neither the onReady event who calls playVideo() ...)

the goal is to always show the video

Once the code is the same but has different behavior I have tried to dynamically insert and remove youtube_api, make window.onYouTubeIframeAPIReady() null and reconstruct, so that the second call would be exactly like the first, but nothing (I guess I don't understand exactly what the problem is)

The javascript code is:

function loadScript() {

    if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube/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();
}

As mentioned the youtube video works on the first call but not on the second.

The console track is (i inserted the console.logs to have this info):

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') 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') does not match the recipient window's origin ('http://localhost:44600').
VM9066:104 10 //event onstatechange
VM9066:106 a1[object Object]
VM9066:107 a20

On the second ajax call console just shows:

0
VM9574:53 1
VM9574:15 ƒ () {

        console.log("4");

        onYouTubeIframeAPIReady();

        console.log("5");
    }
VM9574:19 3
VM9574:58 2

The html code is:

<div id="videoWraper" class="video-container" data-PlayingVid="@Model.SM_Identifier">
        <div id="YouTubeVideo"></div>
        <script async src="https://www.youtube/iframe_api"></script>
</div>

Please if someone can help me find the bug I would really appreciate it.

Thank you and sorry for the long post.

解决方案

The answer to this question was found in an answer for a similar question:

https://stackoverflow/a/48038558/2358046

Instead of making an external call, it makes an internal call to same code with minor changes, solving the error:

ERROR: www-widgetapi.js:115 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube') does not match the recipient window's origin ('http://localhost:44600')

This makes unecessary to dinamicaly load yt_api, so the js script is changed to:

var player;
var VidID;


//When ready, gets YT_ID and calls API do youtube
$(document).ready(function () {

VidID = $("#videoWraper").attr("data-PlayingVid");
    onYouTubeIframeAPIReady();
});




// Call to youtube API (internal) to start the video
function onYouTubeIframeAPIReady() {

player = new window.YT.Player('YouTubeVideo', {
    videoId: VidID, // YouTube Video ID lUlOptJolAA
    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
    }
});

}


function onPlayerReady(event) {
    event.target.playVideo();
}

The created files should be loaded before this code.

Monolitic and Not perfect, but solves the problem.

这篇关于Youtube 视频未在第二个 ajaxcall 中播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！