HTML5视频，等待视频结束，等待视频准备就绪 [英] HTML5 video, waiting for video end, waiting for video ready
问题描述
我试图做的是创建一个for循环的数组长度。在for循环中，我调用了一个清空div的PlayAVideo函数，然后重新进入一个新的视频+源标签。我的目标是开始for循环，播放数组中的第一个视频，等待视频结束，然后继续循环下一个元素在数组中。目前情况是for循环遍历整个数组，只播放最后一个视频。我已经检查了视频标签的readystate后，我添加一个新的，但他们似乎永远不会到4（我敢肯定，他们留在0），直到最后一个视频加载。我的想法是开始播放视频，然后启动一个do while循环，直到 currentVideo.ended 事件更改选中的参数。我的代码似乎没有达到这个地步。不确定去哪里。
Hello as you can see from my sample code i am trying to play an array of videos back to back.
Javascript
What i attempt to do is create a for loop which cycles for the length of the array. Within the for loop i call a PlayAVideo function that empties a div and then reenters a new video + source tags. My objective is to begin the for loop, play the first video in the array, wait for end of video, then continue with for loop with next element in the array. What currently happens is the for loop cycles through the entire array and only plays the last video. I have checked the readystate of the video tag after i add a new one, but they dont appear to ever get to 4(im pretty sure they stay at 0) until the last video is loaded. My idea was to begin playing the video and then start a do while loop until the currentVideo.ended event changes the parameter that is checked. My code doesnt ever appear to reach this spot. Not really sure where to go.
JavascriptHTML
HTML< / div>
< ul class =player-video-buttons>
< span> 2B< / span>< span> Ian Kinsler< / span>< span class =team> Detroit Tigers< / span>< / li>纽约扬基队< / span>< / li>< / span>< span> SS< / span>< span> Derek Jeter< / li>< span class =team>
< span> 3B< / span>< span> Evan Longoria< / li>< span class =team>坦帕湾光芒< / span>< / li>
< span> span> OF< / span>< span> Mike Trout< / span>< span class =team>洛杉矶天使< / li>乔治·汉密尔顿< / span>< span class =team>洛杉矶天使< / span>< / li>< / span>< span> OF<
< span> span< / span>< span> Michael Cuddyer< / span>< span class =team>科罗拉多洛矶山< / span>< / li>
< span> U< / span>< span> David Ortiz< / span>< span class =team> Boston Red Sox< / span>< / li>
< span> P< / span>< span> Clayton Kershaw< / span>< span class =team>洛杉矶道奇< / span>< / li>
< span> P< span>< span>马特·哈维< / span>< span class =team>纽约大都会< / span>< / li>
< / ul>
< / div><！ - end roster container - >
< div class =fix>< / div>
< / div><！ - 结束视频名册容器 - >
< / div><！ - 结束界面容器 - >
< / body>
< / 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>
推荐答案
在不复制所有逻辑的情况下，视频数组（在第一个脚本块中定义），并使用结束的事件遍历它们以前进到下一个数组项。
While not replicating all your logic, this video will take the array of videos (defined in the first script block) and step through them using the ended event to advance to the next array item.
<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>
这篇关于HTML5视频，等待视频结束，等待视频准备就绪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
