动态创建 HTML5 视频元素，而不显示在页面中

Posted 2023-02-22

【中文标题】动态创建 HTML5 视频元素，而不显示在页面中

【英文标题】：Dynamically create a HTML5 video element without it being shown in the page

【发布时间】：2013-10-15 15:05:21

【问题描述】：

是否可以动态创建 html5 视频元素，以便我可以通过 document.getElementById 或名称等 API 访问该元素，但它可能不会显示在网页中。

类似div.hide() 或那个方向的东西？

【问题讨论】：

如果你已经创建了元素，为什么还要尝试从文档中获取对它的引用？只需保留创建时获得的参考即可。

当然。这是可能的。谷歌一下，你会找到答案。

使用 css 通过display:none 或visibility:hidden 或者如果使用jquery 的hide() 方法来隐藏它。然后根据您的需要显示它。

最好的方法是我也实现了嵌入视频并在一次执行中将其删除。因此我们可以操纵 dom，它也不会在网页中显示。

【参考方案1】：

你可以试试

var video = document.createElement('video');

video.src = 'urlToVideo.ogg';
video.autoplay = true;

你也可以在设置源之前使用canPlayType方法检查浏览器是否支持你要使用的视频格式

if (video.canPlayType('video/ogg').length > 0) 
    /* set some video source */

该方法根据浏览器返回maybe 或perhaps。如果字符串为空则表示无法播放。

您现在可以通过 API 使用 video。只需将其存储在全球范围内。您可以稍后将其插入 DOM。希望这会有所帮助。

【讨论】：

当我将文件拖放到网页上时，我需要动态创建一个视频元素并将其附加到特定的 DIV。在示例代码中，urlToVideo.ogg 大概是服务器端的相对 url。我所拥有的只是文件中的本地 URL。

使用 video.autoplay = true 不是自动播放

【参考方案2】：

当然，您可以只使用 JS 来创建所有内容。您无需在 html 正文中预先创建任何内容。

这是在 JS 中创建视频元素的简单方法：

var videlem = document.createElement("video");
/// ... some setup like poster image, size, position etc. goes here...
/// now, add sources:
var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4";
sourceMP4.src = "path-to-video-file.mp4";
videlem.appendChild(sourceMP4);
//// same approach add ogg/ogv and webm sources

在此之前，您应该检查浏览器是否支持视频元素，如果支持，可以播放哪些文件格式。你可以这样做：

var supportsVideoElement = !!document.createElement('video').canPlayType;

然后，如果支持视频元素，测试可以播放哪些视频格式：

var temp = document.createElement('video');
var canPlay_MP4 = temp.canPlayType('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');
var canPlay_OGV = temp.canPlayType('video/ogg; codecs="theora,vorbis"');
var canPlay_WEMB = temp.canPlayType('video/webm; codecs="vp8,vorbis"');

在此之后，您可以仅使用 JS 将视频元素添加到您的页面，并设置适当的视频源。服务器端的 .htaccess 可能存在问题，您需要在其中添加行：

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

这可能不需要，具体取决于您的服务器的设置方式，但如果您在播放服务器上的视频时遇到问题，但它们可以正常播放，例如。 localhost 在您的开发机器上，这可以解决问题。上面几行的.htaccess 应该放在服务器端视频文件所在的文件夹中。

现在，为了让这个元素在 getElementById(...) 中可用，你只需要在创建它时设置它的 id：

var videlem = document.createElement("video");
videlem.id = "xxxxxx";

现在您可以稍后使用：

var videlem = document.getElementById("xxxxxx");

但是，正如已经有人评论的那样，如果您已经创建了元素并且有指向它的变量，则不需要这样做......直接使用它。

希望这会有所帮助:-)

【讨论】：

我知道我们可以创建各种元素，例如视频/iframe，但我认为我们必须在同一个周期中删除元素，这样它就不会出现在 DOM 中。所以我们必须removeElement 在创建 else 之后也会显示在 DOM 中。

您创建一个临时视频对象并且不对您将在 DOM 中使用的视频调用 canPlayType 的任何特殊原因？

@Micros 你指的sn-p是如果你只是想测试可以播放什么格式，所以以后你制作视频的时候，不需要把所有的源都放上去，只要放一个可以播放。它还可以帮助您确定是否支持视频标签，但由于某种原因，可用的编解码器无法播放。在我看来，测试应该只进行一次（例如，在加载文档时），而不是每次将视频添加到文档时。

【参考方案3】：

实现这一点的更新（也是最简单的）方法（因为谷歌搜索在这里领先）：

var x = document.createElement("VIDEO");

if (x.canPlayType("video/mp4")) 
    x.setAttribute("src","movie.mp4");
 else 
    x.setAttribute("src","movie.ogg");


x.setAttribute("width", "320");
x.setAttribute("height", "240");
x.setAttribute("controls", "controls");
document.body.appendChild(x);