24

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

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

4

3 回答 3

40

你可以试试

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取决于浏览器。如果为空字符串，则表示无法播放。

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

于 2013-10-09T07:35:12.363 回答
28

当然，您可以仅使用 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;

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

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

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

希望这可以帮助 ：-）

于 2013-12-16T13:03:27.820 回答
6

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

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);
于 2017-07-05T21:09:05.237 回答