Youtube API 不适用于动态生成的对象数组

我在Youtube API上遇到了一个看似奇怪的问题...我正在编写一个脚本，该脚本将检测页面上的所有YouTube视频，然后使用Youtube API替换它们。这样，我将能够检测API事件，例如视频何时结束，以显示消息。我正在为页面上的每个视频创建一个 youtube 播放器对象的新实例。到目前为止一切都很好。

我动态生成视频容器，并将视频容器 ID 和视频 ID 保存到对象数组中(下面是我当前的代码(。

奇怪的是，当我动态生成这个对象数组时(使用 array.push(( (，Youtube API 不起作用。如果我显式声明这个对象数组，Youtube API 工作正常。

更清楚的是，这不适用于 Youtube API(插图示例(：

var playerInfoList = [];
foreach loop{
   playerInfoList.push( object );
}

截图：http://i.gyazo.com/a0f21db4fb60e921be5cc1d1d52f948f.png

这有效：

var playerInfoList = [
    {containerID:'social_share_custom_0', videoID:'KSyHWMdH9gk'},
    {containerID:'social_share_custom_1', videoID:'b-u5LE6X6ME'}
];

截图：http://i.gyazo.com/39bce30e4ebfb21119d48bbaf818d491.png

我制作了一个示例页面来演示这一点，这里是：

<html>
<head>
</head>
<body>
<?php
    $content = '
    <h3>This is a sample page to demonstrate the issue...</h3>
    Text before <br /><br />
    <iframe width="560" height="315" src="//www.youtube.com/embed/KSyHWMdH9gk?rel=0" frameborder="0" allowfullscreen></iframe>
    Text in between.
    <iframe width="560" height="315" src="//www.youtube.com/embed/b-u5LE6X6ME?rel=0" frameborder="0" allowfullscreen></iframe>
    <br /><br />Text after.';
    $return_HTML  = '';
    // match any iframes
    $pattern = '~<iframe.*</iframe>|<embed.*</embed>~';
    preg_match_all($pattern, $content, $matches);

    // START Youtube Script
    $YT_scripts = '
            <script>
                /*
                ** Array of objects
                ** params containerID, videoID
                */
                var playerInfoList = []; ';
    $index = 0;
    foreach ($matches[0] as $match) {
        $embedPattern = '%(?:https?://)?(?:www.)?(?:youtu.be/| youtube.com(?:/embed/|/v/|/watch?v=))([w-]{10,12})[a-zA-Z0-9< >"]%x';
        $res=false;
        $res = preg_match($embedPattern, $match, $embedOutput); 
        if( $res ){
            $YT_scripts .= '
            //new object
            var newItem = {containerID:"social_share_custom_'.$index.'", videoID:"'.$embedOutput[1].'"};
            //put it into array
            playerInfoList.push(newItem);';             
            $wrappedframe = '<div class="social_share_custom_video_container" id="social_share_custom_'.$index.'"></div>';
            $content = str_replace($match, $wrappedframe, $content);
        }
    $index++;
    }
    $content .= $YT_scripts.'</script>';    
    $return_HTML .= $content;   
    echo $return_HTML;
?>
<script>
//Load Yotube API
var tag = document.createElement("script"); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
/*
// if we declare this explicitly, Youtube API works.
// if this array if generated DYNAMICALLY (if we comment this out), Youtube API does not work.
var playerInfoList = [
    {containerID:'social_share_custom_0', videoID:'KSyHWMdH9gk'},
    {containerID:'social_share_custom_1', videoID:'b-u5LE6X6ME'}
];
*/
console.log( 'Object array length: ' + playerInfoList.length );
    function onYouTubeIframeAPIReady() {
        if(typeof playerInfoList === 'undefined')
            return; 
        for(var i = 0; i < playerInfoList.length;i++) {
            var player = createPlayer(playerInfoList[i]);
        }
    }
    function createPlayer(listItem){
        console.log( listItem.containerID + ' - ' + listItem.videoID );
        return new YT.Player(listItem.containerID, {
            height: '350',
            width: '480',
            videoId: listItem.videoID,
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange,
                'onError' : onPlayerError
            }
        });
    }
    // autoplay video
    function onPlayerReady(event){
        // video is Ready
    }
    // when video ends
    function onPlayerStateChange(event) {        
        console.log(event);
        if(event.data == 0) {
            // video Ended
            // showEndVideoPrompt();
            console.log('Video Ended.');
        }
        else if (event.data === 1) {
            //video Started
        }
        else if (event.data === 2) {
            //video Stopped
        }           
    }
    function onPlayerError(event) {
        // video Error
    }
</script>
</body>
</html>

我花了将近两天的时间尝试不同的事情，但仍然不知道为什么会发生这种情况。我在这里搜索了类似的问题，但没有找到任何其他与动态生成的对象数组和 Youtube API 存在此特定问题的问题。

任何解决此问题的帮助将不胜感激。如果您需要更多信息，请告诉我。感谢所有可以伸出援助之手的人:)

问题是由于您用于提取视频 ID 的正则表达式造成的。最后一点[a-zA-Z0-9< >"]是通过使用 ID 的最后一个字符来破坏videoID，而不是将其与其他字符一起捕获。删除它应该可以解决问题。

相关内容

最新更新

热门标签：