CODEWITHSUNDEEP
javascriptjqueryhtmljson
Omega Collision
Omega Collision

Reputation: 125

Dynamically adding a video element using jQuery

EDIT: People have correctly pointed out I was using the wrong type for the video files I was using before. I now realize that if I want to use youtube videos I need to use the iframe tag

I'm having trouble creating the source tag and appending it inside the video tag. Right now my src is being added inside the video tag like this 

src= "[object Object]"

I'm loading my data from a json array. I'm also loading some other data from my json array which you will see in the code below. My 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'));

Here is my html

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

Here is my json array EDIT: changed src to youtube videos

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

Upvotes: 2

Views: 5948

Answers (3)

NtFreX
NtFreX

Reputation: 11367

You need to set the video source path directly and not with an src element.

And as you are using WebM videos you need to change the type.

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

When you want to embed an youtube video into your page you have to do it differently. Copy the html like in the picture.

enter image description here

It looks like this.

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

Copy the attributes into your javascript and use and iframe instead of an video tag.

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

Upvotes: 1

Punit
Punit

Reputation: 1976

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

These lines in your code create a jQuery object for a <src> element and then fill it with your video source, so the HTML element you'd essentially be getting is this:

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

You don't need to do any of this. data.videoSrc is just a string, and the src attribute in a video element expects just a string. Just reference it directly when creating your video element:

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

Upvotes: 0

Wolverine
Wolverine

Reputation: 1702

I noticed that you've commented out this line:

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

Replace it with:

$src.appendTo($video);

I need you to replace it because you're looking for an element with id of video which has not been created yet in the DOM.

Anyway, check it out and see if it works.

Upvotes: 0

Related Questions