javascript - 如何使用 javascript 将 <video> 标签正确插入到 html 中？

Question

我刚刚开始使用 javascript 并完成了这个。

我做了一个 codepen 来显示我遇到的两个问题

1) 有两个重复的视频正在加载，当我删除其中一个视频标签时，它会阻止随机化按钮工作或加载任何视频。我只想加载一个视频。

2) 在 codepen 中，我有一个单击以随机化的按钮，但我试图用标签包裹视频，以便可以单击视频以启动随机化。每当我尝试这样做时，我都会收到未定义的错误，或者视频无法加载 =/

播放视频

<div class="video-label"></div> <!-- loads in top video (only want one video) --> 

<video loop autoplay> <!-- loads in bottom video (only want one video) -->
  Your browser does not support the <code>video</code> element.
</video>

如果您单击代码笔，您将有望看到两个视频的加载位置以及点击标签的位置。任何帮助是极大的赞赏!!我整晚都在想办法解决这个问题:/

这是代码笔

Codepen

提前致谢!

Answer 1

您可以按照以下逻辑使用 javascript 创建 html5 视频标签:

var videoelement = document.createElement("video");
videoelement.setAttribute("id", "video1");

var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4";
sourceMP4.src = "http://zippy.gfycat.com/SpottedDefensiveAbalone.mp4";
videoelement.appendChild(sourceMP4);

var sourceWEBM = document.createElement("source"); 
sourceWEBM.type = "video/webm";
sourceWEBM.src = "http://zippy.gfycat.com/MinorGregariousGrub.webm";
videoelement.appendChild(sourceWEBM);

$('.video-label').html(videoelement);
var video = document.getElementById("video1");
video.play();

这段代码正在创建一个视频标签并将其包含到您的 div (.video-label) 中，然后视频会自动开始播放。这是在没有随机内容的情况下工作的(每次都使用相同的 url)，因此您可以在方便时更新它。尝试删除 html 文件中的视频，它现在可以工作了:

<video loop autoplay>
      Your browser does not support the <code>video</code> element.
</video>

这是一个链接，您可以在其中下载使用有效解决方案更新的代码(没有随机化):

http://tests.krown.ch/Codepen.zip

此外，当您点击您的视频 div (.video-label) 时，视频标签将被删除并重新创建(但使用相同的 url，您只需要使用随机化的内容更新视频 url)