videojs.dom extend方法

var calcComponent = videojs.getComponent('Component');
var CalcBar = videojs.extend(calcComponent,{
  constructor: function (player, options) {
    calcComponent.apply(this, arguments);
    if (options.text) {
      this.updateTextContent(options.text);
    }
  },
  createEl: function() {
    var divObj=videojs.dom.createEl('div', {
      // Prefixing classes of elements within a player with "vjs-"
      // is a convention used in Video.js.
      //给元素加vjs-开头的样式名，是videojs内置样式约定俗成的做法
      className: 'vjs-calc-bar'
    });
    var imgObj=videojs.dom.createEl('img', {
      // Prefixing classes of elements within a player with "vjs-"
      // is a convention used in Video.js.
      //给元素加vjs-开头的样式名，是videojs内置样式约定俗成的做法
      src: canlcimg
    });
    videojs.dom.appendContent(imgObj, this.options_.text)
    divObj.appendChild(imgObj);

    return divObj
  },
  updateTextContent: function(text) {
    // If no text was provided, default to "Text Unknown"
    // 如果options中没有提供text属性，默认显示Text Unknow
    if (typeof text !== 'string') {
      text = '';
    }
    // Use Video.js utility DOM methods to manipulate the content
    // of the component's element.
    // 使用Video.js提供的DOM方法来操作组件元素
    videojs.dom.emptyEl(this.el());
    videojs.dom.appendContent(this.el(), text);
  }
})
videojs.registerComponent('CalcBar', CalcBar);

引用：

 this.myPlayer = videojs('my-video', {
        bigPlayButton: true, // 是否显示播放按钮（这个播放按钮默认会再左上方，需用CSS设置居中）
        textTrackDisplay: true,
        posterImage: true,
        errorDisplay: true,
        controlBar: true,
        fullTimeout:'',
        sources:[{
          type:'application/x-mpegURL',
          src:newUrl,
        }],
        autoplay: true, // 这个说是自动播放，但是本人使用无效
        controls: {timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          muteToggle: false,//静音按钮
          fullscreenToggle: false,  //全屏按钮
          volumeMenuButton:false},
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        loop: false,// 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
        notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },function(){});

this.myPlayer.addChild('CalcBar', {text: ''});