javascript - 使用 jQuery 动态添加视频元素

Question

编辑:人们正确地指出我之前使用的视频文件类型错误。我现在意识到，如果我想使用 youtube 视频，我需要使用 iframe 标签

我在创建源标记并将其附加到视频标记内时遇到问题。现在我的 src 像这样被添加到视频标签中

src= "[object Object]"

我正在从 json 数组加载数据。我还从我的 json 数组中加载了一些其他数据，您将在下面的代码中看到这些数据。我的 jQuery

function postContent(data) {
  var $h2 = $("<h2>");
  var $div = $("<div>");

  $h2.html(data.title);
  $div.addClass("imgPlaceholder " + data.color);

  var $h3 = $("<h3>");
  var $src = $("<src>");

  $h3.html(data.videoTitle);
  $src.html(data.videoSrc);
  alert($src);
  var video = $('<iframe />', {
      id: 'video',
      src: data.videoSrc,
      //type: 'video/mp4', This was needed when I used the video tag
      //controls: true
    });

    //$src.appendTo($('#video')); This broke the page 

    $("#display")
        .append($h2)
        .append($div)
        .append($h3);

        video.appendTo($('#display'));

这是我的html

<div id="wrapper" class="group">
    <h1></h1>
    <hr>
    <ul id="menu"></ul>
    <div id="display"></div>
</div>

这是我的 json 数组编辑:将 src 更改为 youtube 视频

{
"appTitle": "Content Navigator",
"posts": [
{
  "id": 1,
  "title": "Content 1",
  "videoTitle": "Video Title 1",
  "color": "orange",
  "videoSrc": "https://www.youtube.com/watch?v=nRSYU4YSISA",
},
{
  "id": 2,
  "title": "Content 2",
  "videoTitle": "Video Title 2",
  "color": "purple",
  "videoSrc": "https://www.youtube.com/watch?v=WijDExREruo",
},

Answer 1

您需要设置 video直接源路径，而不是使用 src 元素。

当您使用 WebM 视频时，您需要更改类型。

var video = $('<video />', {
  id: 'video',
  src: data.videoSrc,
  type: 'video/webm',
  controls: true
});

当您想要将 YouTube 视频嵌入您的页面时，您必须采用不同的方式。复制图片中的html。

看起来像这样。

<iframe width="560" height="315" 
    src="https://www.youtube.com/embed/T-Lvyr0OCT8" 
    frameborder="0" 
    allowfullscreen></iframe>

将属性复制到您的 javascript 中并使用 iframe 而不是 video 标签。

var video = $('<iframe/>', {
  id: 'video',
  src: 'https://www.youtube.com/embed/P3y8vc-3iVU',
  width: 560,
  height: 315,
  allowfullscreen: ''
});