Search code examples
javascripthtmlstringquotesvideo.js

Constructing a HTML video with character strings using video-js

I need to construct a flexible video player in a website like this:

var content = "<video  ... /></video>";
$("#someDiv").html(content);

However, I´m not able to do this using video-js, because I have issues with the quotes. When I don´t construct using strings, it works and looks like this:

Fiddle

This is one line of the example: 

data-setup='{ "example_option": true}'>

This line has two kinds of quotes: " and '. For putting this line into a string for constructing a HTML-Code like above, I would probably need a third form of quotes. I don´t know any.

Another post suggested using \', so I tried this:

'data-setup=\'{ "example_option": true}\''

See Fiddle

However this does´t work for me. The video-js functionality gets lost.

Any idea to get the second fiddle constructed so that it works just like the first fiddle?

Solution

  • It has nothing to do with the strings, ' or " it has to do with the fact that video-js auto initializes all videos on page load based on that data-setup attribute. When the page loads, the html is not on the page, so it misses the initialization process. You need to initialize it manually after the html has been added.

    videojs(document.getElementsByClassName("video-js")[0], {}, function(){ // Player (this) is initialized and ready. });

    Add that code below the line that puts the video onto the page and it will work.

    http://jsfiddle.net/mbv4pbw5/2/