How do I add new Video entirely from JavaScript?

Question

I am trying to add a new VideoJS object and set it up entirely from JS, without having a DOM video element. The result is that the video is loaded but there aren't any VideoJS controls. Here is the code:

obj = document.createElement('video');
                $(obj).attr('id', 'example_video_1');
                $(obj).attr('class', 'video-js vjs-default-skin');

                var source = document.createElement('source');
                $(source).attr('src', path);
                $(source).attr('type', 'video/mp4');
                $(obj).append(source);

                $("#content").append(obj);
                _V_("example_video_1", {}, function () {
                    //
                    }
                });

I will appreciate any help, thanks!

score 10 · Accepted Answer · edited May 23 '17 at 12:34

Okay took a look at video-js, it's quite nice. Try this:

HTML:

<html>
  <head>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
  </head>
  <body>
    <div id="content"> </div>
      <!-- appending video here -->
    <hr />
    <!-- written in html -->
    <video id="example_video_by_hand" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
     <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
   </video>
  </body>
</html>

JavaScript:

var obj,
    source;

obj = document.createElement('video');
$(obj).attr('id', 'example_video_test');
$(obj).attr('class', 'video-js vjs-default-skin');
$(obj).attr('width', '640');
$(obj).attr('data-height', '264');
$(obj).attr('controls', ' ');
$(obj).attr('poster', 'http://video-js.zencoder.com/oceans-clip.jpg');
$(obj).attr('preload', 'auto');
$(obj).attr('data-setup', '{}');

source = document.createElement('source');
$(source).attr('type', 'video/mp4');
$(source).attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4');

$("#content").append(obj);
$(obj).append(source);

Working example on jsbin.

Updates:

As polarblau pointed out in a comment the jQuery.attr() can take an object rather than having to call jQuery.attr() multiple times like in my first example.

note: The below is just an example and not a working demo.

 var attributes = {
   'id': 'example_video_test',
   'class': 'video-js vjs-default-skin',
   'width': '640',
   'data-height': '264',
   'controls': ' ',
   'poster': 'http://video-js.zencoder.com/oceans-clip.jpg',
   'preload': 'auto',
   'data-setup': '{}'
 }

 var element = $('<video/>').attr(attributes)
 //you would also have to add the source element etc but this gives
 //a good example of a shorter approach

It works, thanks! I see there is not need in the _V_ function like stated in VideoJS website. — Light, Aug 03 '12 at 09:30
OT: `.attr()` takes an object as well which lets you set all attributes nicely in one sitting. Also caching jQuery objects into variables is a good practice: `var $obj = $('').attr({…}) … `. — polarblau, Apr 25 '13 at 11:07
Just a note, you can also do a lot of the video setup in VJS as well (preference really). You can just set up a video with an id, then use Videojs to initialize the player with options and a new src. — Matt McClure, Mar 12 '14 at 20:25

How do I add new Video entirely from JavaScript?

1 Answers1

Linked