Question

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

像div.hide()之类的东西还是那个方向的东西？

Answer 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。希望这会有所帮助。

Answer 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");

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

希望这会有所帮助： - ）

Answer 3

更新（和最简单）实现此目的的方式（因为谷歌搜索在这里领先）：

{{1}}

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

3 个答案: