HTML5视频，等待视频结束，等待视频就绪

Question

您好，您可以从我的示例代码中看到，我正在尝试背靠背播放一系列视频。

我试图做的是创建一个循环数组长度的循环。在 for 循环中，我调用了一个 PlayAVideo 函数，该函数清空一个 div，然后重新输入一个新的视频 + 源标签。我的目标是开始 for 循环，播放数组中的第一个视频，等待视频结束，然后使用数组中的下一个元素继续 for 循环。当前发生的是 for 循环遍历整个数组，并且只播放最后一个视频。添加新标签后，我检查了视频标签的就绪状态，但在加载最后一个视频之前，它们似乎永远不会达到 4（我很确定它们保持在 0）。我的想法是开始播放视频，然后开始一个 do while 循环，直到 currentVideo.ended 事件更改检查的参数。我的代码似乎从来没有到达过这个地方。不太清楚该去哪里。

Javascript

$(document).ready(function(){
    $('.play-all').on("click", function(){
        var videoFileArray;
        var pictureFileArray;
        var rosterArray = LoadRosterFromButtons();
        rosterArray = FormatArray(rosterArray);
        videoFileArray = AddMovieExtensions(rosterArray);
        for(var i = 0; i < videoFileArray.length; i++ ){

            PlayAVideo(i, videoFileArray);
        }
        // PlayAllVideos(videoFileArray);
        // AlertRosterArray(videoFileArray);
    });
})

function PlayAVideo(position, fileArray){
    var videoEnded;
    var currentVideo = document.getElementById('play-video'); //current video
    videoTag = '<video  id="play-video" width="588" height="318" controls autoplay><source src="{fileName}" type="video/mp4">Your browser does not support the video tag.</video>';
    videoTag = videoTag.replace('{fileName}', fileArray[position]);
    $('.video-player').empty();
    $('.video-player').html(videoTag);
    // $('.video-player').html(videoTag);
    currentVideo = document.getElementById('play-video'); 
    if(currentVideo.readyState === 0){
        alert('0');
    }
    if(currentVideo.readyState === 4){
        currentVideo.play();
        do{ 
        }while(videoEnded === false);
        currentvideo.ended = function(){
            alert('ended');
        }
        console.log(videoTag);
    }
}

// function PlayAllVideos(fileArray){
    // var videoCurrentTime;
    // var videoDuration;
    // var currentArrayPosition = 0;

    // do{
        // var videoTag = '<video  id="play-video" width="588" height="318" controls autoplay><source src="{fileName}" type="video/mp4">Your browser does not support the video tag.</video>';
        // videoTag = videoTag.replace('{fileName}', fileArray[currentArrayPosition]);
        // $('.video-player').empty();
        // $('.video-player').html(videoTag);
        // var clip = document.getElementById('play-video'); //current video 
        // if(clip === undefined){
            // alert('clip is undefined');
        // }
        // else{
            // console.log(clip.readyState);
                // if(clip.readyState === 0){
                    // alert('readyState === 0');
                // }
            // clip.load();
            // clip.play();
        // }
        // videoDuration = clip.duration;
        // videoDuration = videoDuration.toFixed(1);

        // do{
            // videoCurrentTime = videoTimeCounterUpdate(clip);
        // }while(videoCurrentTime < videoDuration);


        // if(videoCurrentTime === videoDuration){
            // currentArrayPosition += 1
            // alert('end of video');
            // continue;
        // }

        // currentArrayPosition += 1
    // }while(currentArrayPosition < fileArray.length);

    // for(var i = 0; i < fileArray.length; i++ ){
        // var videoTag = '<video  id="play-video" width="588" height="318" controls autoplay><source src="{fileName}" type="video/mp4">Your browser does not support the video tag.</video>';
        // videoTag = videoTag.replace('{fileName}', fileArray[i]);
        // $('.video-player').empty();
        // $('.video-player').html(videoTag);
        // var clip = document.getElementById('play-video'); //current video 
        // clip.play()
        // // if(clip === undefined){
            // // alert('clip is undefined');
        // // }
        // // else{
            // // clip.play();
        // // }
        // videoDuration = clip.duration;
        // videoDuration = videoDuration.toFixed(1);

        // do{
            // videoCurrentTime = videoTimeCounterUpdate(clip);
        // }while(videoCurrentTime < videoDuration);


        // if(videoCurrentTime === videoDuration){
            // alert('end of video');
            // continue;
        // }
    // }
// }

function AddMovieExtensions(roster){
    var rosterArrayFormatted = [];
    for(var i = 0; i < roster.length; i++ ){
        rosterArrayFormatted[i] = roster[i] + '.mov';
    }
    return rosterArrayFormatted;
}


function LoadRosterFromButtons(){
//Loads current roster into memory from button labels
    var currentC = "Willin Rosario";
    var current1B = "1b Man";
    var current2B = "current 2b";
    var currentSS = "current SS";
    var current3B = "current TB";
    var currentOF1 = "OF1";
    var currentOF2 = "OF2";
    var currentOF3 = "OF3";
    var currentU = "This is A U";
    var currentP1 = "P1";
    var currentP2 = "willinrosario";
    var rosterArray = [currentC, current1B, current2B, currentSS, current3B, currentOF1, currentOF2, currentOF3, currentU, currentP1, currentP2];
    return rosterArray;
}

function FormatArray(roster){
//remove spaces and lowercase all letters
var rosterArrayFormatted = [];
    for(var i = 0; i < roster.length; i++ ){
        rosterArrayFormatted[i] = roster[i].replace(/\s/g, '').toLowerCase();
    }
return rosterArrayFormatted;
}

function AlertRosterArray(roster){
    for(var i = 0; i < roster.length; i++ ){
        alert(roster[i]);
    }
}


// function PlayAllVideos(fileArray){
    // for(var i = 0; i < fileArray.length; i++ ){
        // do{

        // }while();
    // }
// }

function videoTimeCounterUpdate(clipObject){
    var clipTime = clipObject.currentTime;
    clipTime = clipTime.toFixed(1);
    var runTimeUpdate = setTimeout(videoTimeCounterUpdate, 100); //Round to .x digit    
}

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- modernize older browsers -->
        <script type="text/javascript" src="js/modernizr.js"></script>

        <title>Starter File</title>

        <!-- enable responsive web design -->
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

        <!-- stylesheets -->
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link media="only screen and (max-width: 980px)" href="css/tablet.css" type="text/css" rel="stylesheet"/>
        <link media="only screen and (max-width: 700px)" href="css/mobile.css" type="text/css" rel="stylesheet"/>
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>

        <!-- jQuery -->
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.js"></script>
        <script type="text/javascript" src="js/videoPlayerQeued.js"></script>
    </head>

    <body>
        <div class="top-banner">
            <div class="logo-container">
                <img src="images/fantasytv-logo.png"/>
                <div>your team, on your time</div>
            </div>

            <div class="provider-container-interface">
                <img src="images/yahoo-signed-in.png"/>
            </div>

        </div><!--end of top banner -->

        <div class="interface-container">
            <ul class="menu">
                <li>MY LEAGUES</li>
                <li>SETTINGS</li>
                <li>SIGN OUT</li>
            </ul><!--end menu-->
            <div class="fix"></div>

            <div class="date-shift-banner">
                <div class="left-arrow">
                    <img src="images/left-arrow.png"/>
                </div>

                <div class="date">
                    June 23, 2013
                </div>

                <div class="right-arrow">
                    <img src="images/right-arrow.png"/>
                </div>
            </div><!--end date banner-->

            <div class="stats-profile-container">
                <div class="stats-container">
                    <div class="stats-title-container">
                        <div><div class="padding-stat-title-offense">OFFENSE</div></div>
                        <div><div class="padding-stat-title-pitching">PITCHING</div></div>
                    </div>
                    <div class="fix"></div>

                    <table class="offense">

                        <tr>
                            <td></td>
                            <td>R</td>
                            <td>AVG</td>
                            <td>H</td>
                            <td>HR</td>
                            <td>SB</td>
                            <td>RBI</td>
                            <td></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td>0</td>
                            <td>.000</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td></td>
                        </tr>
                    </table><!--end stats table-->

                    <table class="pitching">
                        <tr>
                            <td></td>
                            <td>W</td>
                            <td>L</td>
                            <td>H</td>
                            <td>K</td>
                            <td>WHIP</td>
                            <td>ERA</td>
                            <td></td>
                        </tr>

                        <tr>
                            <td></td>
                            <td>0</td>
                            <td>.000</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td>0</td>
                            <td></td>
                        </tr>
                    </table><!--end stats table-->

                </div><!--end stats container-->

                <div class="player-profile-container">
                    <img class="player-picture" src=""/>

                    <div class="player-name-team-container">
                        <div class="player-name"></div>
                        <div class="player-team"></div>
                    </div><!-- end player name team container -->
                </div><!--end player profile container-->
                <div class="fix"></div>
            </div><!--end stats and profile container-->

            <div class="video-roster-container">
                <div class="video-container">
                    <div class="video-container-padding">
                        <div class="fantasy-team">TEAM: <span>YANKEEFAN</span></div>
                        <div class="video-player">
                            <video  id="play-video" width="588" height="318" controls autobuffer>
                                        Your browser does not support the video tag.
                            </video>    <!--end video container -->

                        </div><!--end video player-->
                    </div><!--end video container padding-->
                </div><!--end video container-->

                <div class="roster-container">
                <div class="play-all-container">
                <div class="play-all"><img src="images/play-all-arrow.png"/></div><div class="watch-all-players">Watch All Players</div>
                <div class="fix"></div>
                </div>

                    <ul class="player-video-buttons">
                        <li id="test"><span>C</span><span>Willin Rosario</span><span class="team">Colorado Rockies</span></li>
                        <li><span>1B</span><span>Chris Davis</span><span class="team">Baltimore Orioles</span></li>
                        <li><span>2B</span><span>Ian Kinsler</span><span class="team">Detroit Tigers</span></li>
                        <li><span>SS</span><span>Derek Jeter</span><span class="team">New York Yankees</span></li>
                        <li><span>3B</span><span>Evan Longoria</span><span class="team">Tampa Bay Rays</span></li>
                        <li><span>OF</span><span>Mike Trout</span><span class="team">Los Angeles Angels</span></li>
                        <li><span>OF</span><span>Josh Hamilton</span><span class="team">Los Angeles Angels</span></li>
                        <li><span>OF</span><span>Michael Cuddyer</span><span class="team">Colorado Rockies</span></li>
                        <li><span>U</span><span>David Ortiz</span><span class="team">Boston Red Sox</span></li>
                        <li><span>P</span><span>Clayton Kershaw</span><span class="team">Los Angeles Dodgers</span></li>
                        <li><span>P</span><span>Matt Harvey</span><span class="team">New York Mets</span></li>
                    </ul>

                </div><!--end roster container-->
                <div class="fix"></div>
            </div><!-- end video roster container-->
        </div><!--end interface container-->
    </body>
</html>

Answer 1

虽然没有复制所有逻辑，但此视频将获取视频数组（在第一个 script 块中定义）并使用 ended 事件逐步浏览它们以前进到下一个数组项。

<head>
....
<script>
    var videos = new Array("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
    var currentVideo = 0;

function nextVideo() {
    // get the element
    videoPlayer = document.getElementById("play-video")
    // remove the event listener, if there is one
    videoPlayer.removeEventListener('ended',nextVideo,false);

    // update the source with the currentVideo from the videos array
    videoPlayer.src = videos[currentVideo];
    // play the video
    videoPlayer.play()

    // increment the currentVideo, looping at the end of the array
    currentVideo = (currentVideo + 1) % videos.length

    // add an event listener so when the video ends it will call the nextVideo function again
    videoPlayer.addEventListener('ended', nextVideo,false);
}
</script>
</head>
<body> 
... 
<div class="video-player">
    <video  id="play-video" width="588" height="318" controls autobuffer muted>
    Your browser does not support the video tag.
    </video>    <!--end video container -->
</div>  

<script>
    // call the video player
    nextVideo()
</script>