VideoJS won't start video if declared as part of an object

Question

I'm currently trying to create a page where there are multiple livestreams with VideoJS. To make this easier, I wanted to use classes / objects to instantiate and modify each stream. Apparently this isn't working, no matter what I do, does VideoJS not work as part of an object? If so, is there a proper workaround or am I doing something wrong?

This is my class:

function Stream(id, info, container){
    this.id = id;
    this.paddedId = ("00000" + this.id).substr(-5,5);
    this.live = info['live'];
    this.onlineSince = info['onlineSince'];
    this.src_html5 = [{ type: 'application/dash+xml', src: 'https://piczel.tv:8083/stream_' + this.paddedId + '/stream_' + this.paddedId + '/manifest.mpd' },
                             { type: 'application/x-mpegURL', src: 'https://piczel.tv:8083/stream_' + this.paddedId + '/stream_' + this.paddedId + '/playlist.m3u8' }];
    this.player = videojs(container);
    this.viewers = info['viewers'];

    this.player.src(this.src_html5);

    // Create buttons on player
    this.viewerCount = this.player.controlBar.addChild('Button', { 'text': 'Viewers' }).addClass("vjs-viewers"),
    this.toggleFlashButton = this.player.controlBar.addChild('Button', { 'text': 'Flash' }).addClass('vjs-flash-toggle'),
    this.onlineSinceCount = this.player.controlBar.addChild('Button', { 'text': 'Online since' }).addClass('vjs-onlinesince'),

    //this.viewerCount.html('<i class="glyphicon glyphicon-eye-open"></i> <span class="vjs-current-viewers">' + this.viewers + '</span>');
    $('.vjs-flash-toggle').html('<span class="vjs-flash-toggle-text">HTML5</span>');

    if(this.live){
        this.player.ready(function(){
            this.play();
        });
    }

    this.getLive =  function() {
        return this.live;
    }

    /*this.addViewer = function() {
        this.viewers += 1;
    }*/

}

This is how I instantiate it:

$(document).ready(function(){
{% for stream in streams %}
    streamInfo = {};
    streamInfo['live'] = {% if stream.live %}true{% else %}false{% endif %};
    streamInfo['viewers'] = {{ stream.viewers }};
    //streamInfo['src']['flash'] = { type: 'rtmp/mp4', src: 'rtmp://piczel.tv:1936/stream_{{ "%05d"|format(stream.id) }}/stream_{{ "%05d"|format(stream.id) }}' };
    streamInfo['onlineSince'] = new Date(now.getTime() - {{ stream.lastOnline ? stream.lastOnline ~ '*1000' : 'now.getTime()' }});

    var stream_{{ stream.id }} = new Stream({{ stream.id }}, streamInfo, 'stream_' + {{ stream.id }});
{% endfor %}
});

It seems to load the livestream fine, upon playing we get this very precise error on what went wrong:

[8660][streamController] Video Element Error: UNKNOWN 

JSBin: http://output.jsbin.com/kipifanoto/1

Answer 1

Your JSBin example does not work because the element is a div and not a video . Use a video element with the default video.js classes and the controls attribute so controls are generated, and this will work.

<video id="stream_01" class="video-js vjs-default-skin" controls></video>

If you want to create a player and insert it into the DOM, you can do this:

function Stream(id, container) {
  this.id = id;
  this.player = videojs(document.createElement('video'), {controls: true});
  this.player.addClass('video-js').addClass('vjs-default-skin');
  document.getElementById(container).appendChild(this.player.el());
  ...