EDIT:以前使用していたビデオファイルに間違ったタイプを使用していたことを正しく示しています。 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ユーチューブの動画へ
あなたが直接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",
},
あなたのビデオソースは、あなたはおそらく「ビデオ/ WEBM」にこれが今取り組んでいる – Punit