javascript - 如果声明为对象的一部分，VideoJS 将不会启动视频

Question

我目前正在尝试使用 VideoJS 创建一个有多个直播的页面。为了使这更容易，我想使用类/对象来实例化和修改每个流。显然这不起作用，无论我做什么，VideoJS 都不能作为对象的一部分工作吗？如果是这样，是否有适当的解决方法或者我做错了什么？

这是我的课:

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;
    }*/

}

这就是我实例化它的方式:

$(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 %}
});

似乎可以很好地加载直播，在播放时我们得到了这个非常精确的错误，说明出了什么问题:

[8660][streamController] Video Element Error: UNKNOWN 

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

Answer 1

您的 JSBin 示例不起作用，因为该元素是 div 而不是 video。使用带有默认 video.js 类和 controls 属性的 video 元素，以便生成控件，这样就可以工作。

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

如果你想创建一个播放器并将其插入到 DOM 中，你可以这样做:

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());
  ...