ajax 动态创建 HTML5 视频元素而不显示在页面中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19251983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically create a HTML5 video element without it being shown in the page
提问by Swaraj Chhatre
Is it possible to dynamically create a HTML5 video element so that I can access the element by API's like document.getElementByIdor Name but it may not show up in the webpage.
是否可以动态创建 HTML5 视频元素，以便我可以通过 API 之类的document.getElementById或名称访问该元素，但它可能不会显示在网页中。
Something like div.hide()or something in that direction ?
类似的东西div.hide()或那个方向的东西？
回答by Mike-O
You can try
你可以试试
var video = document.createElement('video');
video.src = 'urlToVideo.ogg';
video.autoplay = true;
you can also use the canPlayTypemethod to check if the browser supports the video format you want to use before setting source
canPlayType在设置源之前，您也可以使用该方法检查浏览器是否支持您要使用的视频格式
if (video.canPlayType('video/ogg').length > 0) {
/* set some video source */
}
The method returns maybeor perhapsdepending on browser. If empty string it means it can't play it.
该方法返回maybe或perhaps取决于浏览器。如果为空字符串，则表示无法播放。
You can now use the videousing the API. Just store it globally. You can later insert it into the DOM. Hope this helps.
您现在可以使用videousing API。只需将其全局存储即可。您可以稍后将其插入到 DOM 中。希望这可以帮助。
回答by Sinisa
Sure you can create everything just using JS. You need nothing to be pre-created in html body.
当然，您可以仅使用 JS 来创建所有内容。您不需要在 html 正文中预先创建任何内容。
Here is simple way of creating video element in JS:
这是在 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
Before doing this, you should check if browser supports video element, and if so, which file formats can be played. This you can do by:
在执行此操作之前，您应该检查浏览器是否支持视频元素，如果支持，可以播放哪些文件格式。你可以这样做：
var supportsVideoElement = !!document.createElement('video').canPlayType;
Then, if video element is supported, test which video formats can be played:
然后，如果支持 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"');
After this, you can add video element to your page using JS only, with proper video sources set. There may be an issue with .htaccess on server side where you need to add lines:
在此之后，您可以仅使用 JS 将视频元素添加到您的页面，并设置适当的视频源。服务器端的 .htaccess 可能存在问题，您需要在其中添加行：
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
This may not be needed, depending on how your server is set, but if you encounter issue with playing videos from your server, but they play fine from eg. localhost on your dev machine, this can solve the issue. .htaccess with above lines should be placed in the folder where video files are located, on server side.
这可能不是必需的，具体取决于您的服务器的设置方式，但是如果您在从服务器播放视频时遇到问题，但它们可以正常播放，例如。localhost 在您的开发机器上，这可以解决问题。.htaccess 上面的行应该放在视频文件所在的文件夹中，在服务器端。
Ok now, in order to have this element available with getElementById(...), you just need to set id of it, when you create it:
好的，现在为了让 getElementById(...) 可以使用这个元素，你只需要在创建它时设置它的 id：
var videlem = document.createElement("video");
videlem.id = "xxxxxx";
And now you can later find it using:
现在您以后可以使用以下方法找到它：
var videlem = document.getElementById("xxxxxx");
However, as someone commented already, you don't need to do this if you have already created the element and have variable pointing to it... just use it directly.
但是，正如有人已经评论过的那样，如果您已经创建了元素并且有变量指向它，则不需要这样做……只需直接使用它即可。
Hope this helps :-)
希望这可以帮助 ：-）
回答by Sam
Updated (and simplest) way to achieve this (since Google searches are leading here):
更新（和最简单）的方法来实现这一点（因为谷歌搜索在这里领先）：
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);
