使用jQuery動態添加視頻元素

編輯：人們已經正確指出，我使用的是我以前使用的視頻文件的類型錯誤。我現在意識到，如果我想使用YouTube視頻，我需要使用iframe標記使用jQuery動態添加視頻元素

我無法創建源標記並將其附加到視頻標記中。現在我的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", 
},

來源

2016-12-04 Omega Collision

如果您的視頻來源是你可能希望將視頻元素的類型屬性更改爲「視頻/ WEBM」 – Punit

您需要直接設置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: '' 
});

來源

2016-12-04 00:46:03 NtFreX

感謝，這是現在的工作.webm文件。我使用的鏈接僅僅是一些例子。在我的最終版本中，我可能會使用YouTube視頻。它看起來像我所需要做的就是將我的視頻標籤切換到iframe –

@OmegaCollision youtube也在使用html5標籤視頻。他們只是在使用其他類型。但它似乎是他們限制直接訪問來源，所以是的，你將不得不使用他們顯示你的iframe時，你點擊分享 – NtFreX

由於某種原因，iframe不適合我。我更新了操作步驟以反映更改。當我檢查元素的iframe標籤看起來不錯，但裏面嵌套一個名爲#document的元素。我不知道這是從哪裏來的，或者爲什麼我的iframe在網頁 –

我注意到您已經註釋掉這一行：

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

將其替換爲：

$src.appendTo($video);

我需要你來取代它，因爲你正在尋找一個元素帶有尚未在DOM中創建的視頻的ID。

無論如何，看看它是否有效。

來源

2016-12-04 00:48:28 Perumal

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 
});

來源

2016-12-04 01:10:01 Punit

你是對的。我編輯了我的OP，因爲我意識到如果我想鏈接YouTube視頻，我需要使用不同的標記。當我檢查頁面元素時，視頻網址顯示在iframe標記內。但是，我所看到的只是視頻應該呈方形的輪廓 –

使用jQuery動態添加視頻元素

回答

相關問題