任务:创建一个与视频列表和画布的连接，让它们一对一地播放，没有停止，没有点击功能，结束AddEventListener
我想做一个视频播放列表，(源视频是在画布复制块控制，像下载视频的选项)，我做了2个拖放列表，我想连接1拖拽n下拉列表到画布(这也是视频播放器框)，然后播放视频1个1，没有停止，没有点击功能，功能AddEventListener结束在画布框中。
我值得买两个视频，下面是代码的一部分：
<script type="text/javascript">
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "videos/80s_Mix_II-700.mp4";
myVideo.src = "videos/80s_Mix_II-700.webm";
myVideo.load();
myVideo.play();
}
// add a listener function to the ended event
function myAddListener() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
}
</script>
<body onload="myAddListener()">
<div id="video_player_box">
<video id="video" autoplay autobuffer width="1" height="1" >
<source src="videos/milenio_6_minimix_700.mp4" type="video/mp4">
<source src="videos/milenio_6_minimix_700.webm" type="video/webm">
<source src="videos/milenio_6_minimix_700.ogg" type="video/ogg">
</video>
<div align="center">
<canvas id="myCanvas" width="1130" height="560">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<script>
var v = document.getElementById("video");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play', function() {
var i = window.setInterval(function()
{
ctx.drawImage(v, 5, 5, 1130, 560)
}, 20);
}, false);
v.addEventListener('pause', function() {
window.clearInterval(i);
}, false);
v.addEventListener('ended', function() {
clearInterval(i);
}, false);
</script>
</div>
<div id="cadre2" ondrop="drop(event)" ondragover="allowDrop(event)"> <p> Canal VIP </p>
<ol><li> <video src="videos/milenio_6_minimix_700.mp4" draggable="true"
ondragstart="drag(event)" id="drag1" width="288" height="188" alt="Video 1">
</video></li>..。
这个想法是说从#cadre2获取视频，在画布上一个接一个地播放它们，直到结束并循环，形成相同的路径。
我拖拽我的列表，使在线修改视频播放列表的决定更加灵活。
希望能有一些建议！！我不是Php和dynamic的专家，我已经开始使用Javascript了，但要成为专家需要时间！
如果你有一些代码，将会非常感谢！提前感谢！
回答 1
Stack Overflow用户
发布于 2013-08-31 03:26:03
为了使播放器能够连续播放视频，您需要在加载级别实现某种类型的双缓冲(我将在稍后演示)。
但代码中存在一些问题-
myVideo.src = "videos/80s_Mix_II-700.mp4";
myVideo.src = "videos/80s_Mix_II-700.webm";
myVideo.load();这将简单地覆盖source属性。并且设置信号源将自动开始加载视频。
检查视频支持的正确方法是使用方法canPlayType，如下所示：
/// which format can we play?
if (video.canPlayType("video/mp4").length > 0) {
video.src = urlToMP4;
} else if (video.canPlayType("video/webm").length > 0) {
video.src = urlToWEBM;
} else {
video.src = urlToOggOrSomeOtherSupportedFormat;
}不过，canPlayType的问题在于，它在Chrome中返回maybe，在火狐中返回probably。如果不能播放视频类型，则返回一个空字符串，因此我们检查string是否包含任何内容，以确定该格式是否可以播放。
您还需要为canplay实现一个事件侦听器，它会告诉您的应用程序视频已成功加载和缓冲，现在可以使用play启动(如果autoplay设置为true，则可以启动)。
我推荐一个简单的过程，如下所示：
- 使用您要播放的各种格式的视频URL创建对象数组
- 加载第一个视频时(
canplay)开始加载列表中的下一个视频当开始播放第一个
时
我还建议对代码进行重构，以处理加载和播放。
例如，如果我们初始化一个数组来保存我们的自定义视频对象：
var list = [];我们现在可以像这样添加URL：
function addVideo(urlMP4, url) {
list.push({
urlMP4: urlMP4,
url: url,
isReady: false
})
}然后这个函数会让我们为WEBM或OGG添加一个MP4和一个链接：
addVideo('http://video1.mp4', 'http://video1.webm');
addVideo('http://video2.mp4', 'http://video2.webm');
addVideo('http://video3.mp4', 'http://video3.ogg');
...然后，我们需要启动一个“连锁反应”，可以说是通过使用双缓冲加载机制。第一次需要手动触发时：
getVideo(list[0], play);
function getVideo(vid, callback) {
/// which video is playing? (see demo for details)
var video = (isVideo1 === false ? video1 : video2),
me = this;
/// we need to know when video is ready
video.addEventListener('canplay', canPlay, false);;
/// call this when ready
function canPlay(e) {
/// remove event listener (in case setting new src does not trigger)
video.removeEventListener('canplay', canPlay, false);
/// update our object with useful data, for example:
vid.isReady = true;
/// if we provided a callback then call that with custom video object
if (typeof callback === 'function')
callback(vid);
}
/// check video format support (see demo for details)
if (video.canPlayType("video/mp4").length > 0) {
video.src = vid.urlMP4;
} else {
video.src = vid.url;
}
}我们的play函数将管理正在播放的视频以及接下来要播放的内容：
function play(){
/// what video is currently not playing?
var video = (isVideo1 === false ? video1 : video2),
next = current; /// current is index for list, starts at 0
/// switch
isVideo1 = !isVideo1;
/// increment for next video to platy and start over if list ended
next++;
if (next > list.length - 1) next = 0;
/// only attempt next if there are more videos than 1 in list
if (list.length > 0) getVideo(list[next]);
/// start already loaded video (getVideo)
video.play();
isPlaying = true;
/// set current to next in list
current = next;
}我制作这个演示只是为了演示双缓冲加载。您可以使用pause、stop等将其整合到您自己的项目中。
我在这里提供的代码中有移动东西的空间，但正如前面所说的，它只是原理的示例。你还需要考虑一种情况，在这种情况下，下一个视频的加载时间比当前视频播放所需的时间更长(即。当前视频在下一个完成加载之前结束)。这在这段代码中没有被选中。
为了正确地同步视频帧与画布，你需要使用的来使用requestAnimationFrame，否则你会时不时地冻结。
在演示中，循环一直在运行。您可以考虑实现一个条件来停止循环。我刚刚实现了一个在视频列表开始播放时绘制的条件(rAF本身并不使用太多的资源，当你切换视频时，你可能会遇到同步停止和启动的问题，所以我个人会让它保持运行状态，用于这种类型的场景(连续视频播放)，只有在出现错误时才停止它)。
https://stackoverflow.com/questions/18527593
复制相似问题
腾讯云开发者
