jQueryを使用してビデオ要素を動的に追加する

Question

EDIT：以前使用していたビデオファイルに間違ったタイプを使用していたことを正しく示しています。 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ユーチューブの動画へ

あなたが直接 videoソースパスを設定する必要が

{ 
"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

と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> 

ではなくvideoタグのあなたのjavascriptに属性をコピーして使用してiframe。

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内に作成されていないビデオのIDを持つ。

とにかく、それを調べて、それが動作するかどうかを確認してください。

Answer 3

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

あなたのコード内のこれらの行は、<src>要素のjQueryオブジェクトを作成し、あなたのビデオソースでそれを埋めるので、あなたは、本質的になっているはずだHTML要素はこれです：

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

あなたはこれを行う必要はありません。 data.videoSrcは単なる文字列であり、ビデオ要素のsrc属性は単なる文字列を必要とします。あなたのvideo要素を作成するときだけ、それを直接参照：

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