Question

我对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有关。

任何帮助解决这个问题将非常感激。如果您需要更多信息，请告诉我。感谢所有能伸出援助之手的人们：）

Answer 1

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

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

1 个答案: