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

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

您现在可以video使用API​​.只需将其存储在全球.您可以稍后将其插入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

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

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