HTML5 视频 - 更改多个来源

Posted 2023-05-07

【中文标题】HTML5 视频 - 更改多个来源

【英文标题】：HTML5 Video - Change multiple sources

【发布时间】：2011-08-07 20:59:03

【问题描述】：

我在 Google 上找到了几个关于这个问题的网站，还在这里找到了一些问题，这些问题显然已经得到了解答，但是由于我过去一两周一直在研究这个问题，但似乎无法让它发挥作用，我想重新审视这个。

我正在做一个演示，它使用几个视频标签 (vd1-3)，然后在几个画布标签 (cv1-3) 中使用。

<video id="vd1"  preload> 
    <source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm">
    <source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4">
</video>

<canvas id="cv1"  ></canvas>

我有一个使用一个视频的工作版本。现在我希望能够动态更改在我的视频标签中播放的剪辑，随后在画布标签中播放。仅更改一个源有效，据我记得那只是“vd1.src = '...'”，但我希望其中至少有两个视频文件。 现在，正如您在此处看到的那样，我尝试使用 id 作为源代码（正如在 *** 上已回答的问题中所建议的那样），但我无法做到这一点。

我们可以在这里用这段代码获得所有的资源：

var x = document.getElementById("vd1");

var items = x.getElementsByTagName("source");

for(var i= 0; i < items.length; i++)
    alert(items[i].getAttribute('src'));

, false);

但我也未能使用它来更改我的来源。我以为我可以使用“items[i].src = ...”或使用 setAttribute，但我什么都做不了。

我对这一切还很陌生，所以我可能遗漏了一些非常简单的东西......所以如果有人有想法并可以指出我的方向，我将不胜感激。

更新： 最终我们想出了这个非常简单直接的解决方案

var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;

【参考方案1】：

我认为您过于复杂了 - 无需更新多个来源，因为任何给定的浏览器都只会播放您的一个视频。如果您使用 javascript 加载新源，您可以简单地查询 vd1 的 currentSrc 属性，确定正在播放哪些视频并以该格式加载新视频。那时我只需删除所有source 元素并将video.src 设置为新值。

【讨论】：

我想能够简化是成为优秀程序员的一个方面:) 所以我最终想要做的是拥有几个视频的数组并根据用户输入或在随机的。如果我只是想找出类型，使用子字符串并只询问 currentsrc 给出的字符串的最后 4 个字母是否有效？所以说 s.substring(...) = ".webm" 或 s.substring(...) = ".ogv"

@chuls 我假设您可以控制视频文件名 - 只要您一致地命名它们就可以了。如果您需要为每种视频类型匹配多个文件扩展名，请改用正则表达式。

如果您已经有视频正在播放，但如果当前没有视频播放并且您想切换源怎么办？

@Steph 开始播放视频，然后切换源。

@robertc 对，但是假设我要根据用户输入选择视频源，所以用户告诉我视频名称，但我需要决定是否给浏览器一个webm，mp4 ，或 ogg。如上所述，我无法根据currentSrc 属性确定哪一个，因为最初没有currentSrc。