使用 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: ''
});

Answer 2

我注意到你已经注释掉了这一行：

//$src.appendTo($('#video'));

替换为：

$src.appendTo($video);

我需要你替换它，因为你正在寻找一个尚未在 DOM 中创建的具有 video id 的元素。

不管怎样，看看它是否有效。

Answer 3

var $src = $("<src>");
// ...
$src.html(data.videoSrc);

您的代码中的这些行为 <src> 元素创建了一个 jQuery 对象，然后用您的视频源填充它，因此您基本上得到的 HTML 元素是这样的：

<src>http://i.imgur.com/H0ibdlc.webm</src>

您无需执行任何操作。 data.videoSrc 只是一个字符串，视频元素中的 src 属性只需要一个字符串。只需在创建视频元素时直接引用它：

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