CODEWITHSUNDEEP
javascriptjqueryhtml5-videovideo.js
Simon245
Simon245

Reputation: 328

using jquery to create videojs

I am trying to use Jquery to create multiple videojs elements and I can't get the videos to play. I have 12 live streams that I am running on a page using videojs and I have them all working when I hard code in each individual stream on the page like so

<div class="box">
  <video id="cam1@g20" class="video-js vjs-default-skin vjs-big-play-centered"
    data-setup='{"autoplay": true, "controls": false, "width": 640, "height": 480, "techOrder": ["flash", "html5"]}'>
    <source src="http://myurl.com/livehttp/[email protected]/playlist.m3u8" type='video/mp4' />
  </video>
    <span class="grid-overlay-bottom-right"> cam1@g20 </span>
</div>

I am now trying to add each video in by creating the divs and the video with js and jquery.

HTML

<body>
 <main class="container" role="main">
   <div id="cam_streams">

   </div>
 </main>
</body>

JS

$( document ).ready(function() {
 var streams = [
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2",
  "cam1",
  "cam2"
  ];
 var videoStreams = function(){
   for (var i = 0; i < streams.length; i++) {
      var stream = streams[i];

   $('.cam_streams').append(
   '<div class="box"><video id="'+stream+'" class="video-js vjs-default-skin vjs-big-play-centered data-setup= "autoplay": true, "controls": false, "width": 640, "height": 480, "techOrder": ["flash", "html5"]></video><source src="http://myurl.com/livehttp/' + stream + '.stream/playlist.m3u8"/><span class="grid-overlay-bottom-right">' + stream + '</span></div>');

    };
};
videoStreams();

when I run the page it is creating all 12 "box" divs and each one has the correct video in it the same way as when I am hard coding it into the html file but it is not playing anything and I have no errors in the console.

Any help on a better way to also do the jquery would also be much appreciated, I am still very new to it. Thanks

Upvotes: 1

Views: 5659

Answers (3)

Simon245
Simon245

Reputation: 328

I found a way to implement videojs in json format instead of trying to add it in by creating the video tags with Jquery after finding this I also learnt some more jquery and improved it.

  var wrapper = $('<div/>');
  wrapper.addClass('box');

  var video = $('<video></video>');
  video.addClass("video-js vjs-default-skin vjs-big-play-centered ");
  video.attr('id', 'box-' + stream);
  video.appendTo(wrapper);

  var annotation = $('<span>' + stream + '</span>');
  annotation.addClass('grid-overlay-bottom-right');
  annotation.appendTo(wrapper);

  wrapper.appendTo('#cam_streams');

videojs("box-" + stream, {
  techOrder: ['flash', 'html5'],
  autoplay: false,
  width: 640,
  height: 480,
  controls: true,
  sources: [{
    src:'http://myurl.com/livehttp/' + stream + '.stream/playlist.m3u8',
    type: "video/mp4",

  }]
});

I have tested this on Chrome and Safari and it is working fine.

Upvotes: 2

tastybytes
tastybytes

Reputation: 1308

In your last example code you should be using a video element instead of a div element for the videojs container. Video js will re-use this element for HTML5 video, and wrap it in a div. 

$('#cam_streams').append(
    '<div class="box"><video id="box-' + stream + '" class="video-js vjs-default-skin"></video><span class="grid-overlay-bottom-right">' + stream + '</span></div>')

Upvotes: 1

sk904861
sk904861

Reputation: 1277

Make sure that you initialize VideoJS after the DOM contains all your video boxes.

Upvotes: 0

Related Questions