Question

我正在从表格中获取视频，然后通过 YouTube iframe播放器API 在播放器中列出该视频，但是当我单击“下一步”按钮时，它不会将下一个视频加载到播放器中！

更新：在下一个/上一个按钮上单击，我在控制台Undefined index 0 current_video][0]中看到此错误

问题似乎出在skipPlayerVideo函数中。在skipPlayerVideo函数if中，语句未执行，否则将播放视频。但是我不确定为什么没有达到if函数中的skipPlayerVideo条件吗？

HTML播放器代码：

<div class="cx_middle_video">
    <div class="embed-responsive embed-responsive-16by9">
        <div id="ytplayer_wrapper">
                <div id="ytplayer_object">You need Flash player 8+ and JavaScript enabled to view this video.</div>
            </div>
        </div>
        <div class="ytplayer_footer">
            <div id="playPrev">Prev</div>
            <div id="playNext">Next</div>
        </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var videos = [], current_video = 0;
        <?php foreach ($videos as $video): ?>
            <?php
                $id = preg_replace('/^.*?embed\//', '', $video['video_embed_code']);
                $id = preg_replace('/\".*/', '', $id);

                $w = preg_replace('/^.*?width\=\"/', '', $video['video_embed_code']);
                $w = preg_replace('/\".*/', '', $w);

                $h = preg_replace('/^.*?height\=\"/', '', $video['video_embed_code']);
                $h = preg_replace('/\".*/', '', $h);
            ?>
        videos.push(["<?php echo $id; ?>", <?php echo $w; ?>, <?php echo $h; ?>]);

        <?php endforeach; ?>
        EbReshapingExercise(videos, current_video);
    });
</script>

EbReshapingExercise.js.php文件：

function EbReshapingExercise(videos, current_video){

    //Play next video routine
    $('#playNext').on('click', function (argument) {
        skipPlayerVideo('next');
    });

    //Play previous video in routine
    $('#playPrev').on('click', function (argument) {
        skipPlayerVideo('prev');
    });

    // Load the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Replace the 'ytplayer' element with an <iframe> and
    // YouTube player after the API code downloads.
    var player;
    window.onYouTubePlayerAPIReady = function() {
        player = new YT.Player('ytplayer_object', {
            width: '560',
            height: '420',
            fs: 1,
            rel: 0,
            enablejsapi:1,
            videoId: videos[current_video][0],
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        console.log('ready');
    }

    function onPlayerStateChange(event) {
        if(event.data == 0){
            current_video++;
            if(current_video <= videos.length - 1){
                player.loadVideoById(videos[current_video][0]);
            }
        }
    }

    function skipPlayerVideo(direction) {
        (direction == 'next') ? current_video++ : current_video--;
        // This if is not hitting, the code in if body is responsible for playing next video
        if(current_video > 0 && current_video <= videos.length - 1){
            player.loadVideoById(videos[current_video][0]);
        }else{
            current_video = (direction == 'next') ? 0: videos.length;
            console.log(current_video);
        }
    }
}

返回视频的功能：

public function playRoutineAction() {
    $loggedInUserId = $this->Auth->getCurrentCxUserId();
    $routine = EbMembershipExercise::findFirstByCxUserId($loggedInUserId);
    $videos = EbMembershipRoutineVideo::getRoutineVideos($routine->getExercise());
    // Set variables for the view
    $this->view->setVars(array(
        'routine' => $routine,
        'videos' => $videos
    ));
}

为什么YouTube IFRAME Player API无法加载下一个视频？

0 个答案: