Youtube 视频没有在第二个 ajaxcall 中播放

Posted 2023-02-24

【中文标题】Youtube 视频没有在第二个 ajaxcall 中播放

【英文标题】：Youtube Video not playing in second ajaxcall

【发布时间】：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，我将不胜感激。

【参考方案1】：

在第一次调用时，视频直接绑定到页面中，但在第二次调用 ajax 时，它是通过 localhost 进行的，它提供了一个跨源请求 try cord headers

【讨论】：

你能帮帮我吗？谢谢

试过***.com/questions/40079214/…，没用...

也尝试了***.com/questions/6290053/…，但也没有用...

【参考方案2】：

在一个类似问题的答案中找到了这个问题的答案：

https://***.com/a/48038558/2358046

它没有进行外部调用，而是对相同的代码进行了内部调用，并进行了细微的更改，从而解决了错误：

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')

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

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();

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

单一且不完美，但可以解决问题。