Question

我一直试图制作一个视频播放列表，基本上，当其中一个停止结束时，另一个开始，当结束时，原始播放列表开始。重复1> 2> 1> 2等。我试图通过在阵列中包含视频链接来实现这一点，但它们根本不显示。我只想使用javascript。我的代码：

<body onload="setFirstVideo()">
<video controls  onended="videoEnded()"
       src="">
</video>

var videoSources = new Array();

videoSources[0] = ['<video> <source src="http://courses.cs.cityu.edu.hk/cs2204/barbecue.mp4">,<source src="http://courses.cs.cityu.edu.hk/cs2204/barbecue.ogg"> </video>'];
videoSources[1] = [  "http://courses.cs.cityu.edu.hk/cs2204/cakemaking-s.mp4", "http://courses.cs.cityu.edu.hk/cs2204/cakemaking-s.ogg"];
var currentIndex = 0;

function setFirstVideo()
{
    var myVideo = document.getElementsByTagName('video')[0];
        myVideo.src = videoSources[currentIndex];
}

function videoEnded(){
    var myVideo = document.getElementsByTagName('video')[0];
    currentIndex = (currentIndex+1) % videoSources.length;
    myVideo.src = videoSources[currentIndex];
    myVideo.load();
    myVideo.play();
}

Answer 1

看起来你有正确的想法。唯一突然出现的就是你的第一个没有好处，只包括URL，而不是HTML。

或者，因为看起来您有两个来源，您可以使用myVideo.src属性来设置它们。相反，你需要将它们作为孩子附加。

无论哪种方式，都要保持一致。我建议你做一个只有URL的数组：

videoSources = [
  ['example.com/video1.mp4', 'example.com/video1.ogg'],
  ['example.com/video2.mp4', 'example.com/video2.ogg']
];

然后，当您开始加载视频时，请移除所有myVideo.src个孩子，而不是设置myVideo，然后添加新的视频：

var myVideo = document.getElementsByTagName('video')[0];
myVideo.innerHTML = ''; // fast way to empty children
videoSources[currentIndex].forEach(url => {
  const source = document.createElement('source');
  source.src = url;
  myVideo.appendChild(source);
});

执行此类操作可让您动态设置视频的来源。只要确保这两个函数都是这样做的（或者更好的是，它们都会调用它们的常用函数），你应该很好。

是否可以在阵列中包含视频链接？如果有，怎么会这样？

1 个答案: