javascript - 动态创建一个 HTML5 视频元素而不显示在页面中

Question

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

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