ساخت المان در videojs

کدی که باید استفاده کنید شبیه زیره:

var Component = videojs.getComponent('Component');

var TitleBar = videojs.extend(Component, {

  constructor: function(player, options) {
    Component.apply(this, arguments);
    if (options.text) {
      this.updateTextContent(options.text);
    }
  },

  createEl: function() {
    return videojs.createEl('div', {
      className: 'vjs-title-bar'
    });
  },

  updateTextContent: function(text) {

   if (typeof text !== 'string') {
      text = 'Title Unknown';
    }
    videojs.emptyEl(this.el());
    videojs.appendContent(this.el(), text);
  }
});

videojs.registerComponent('TitleBar', TitleBar);

var player = videojs('my-player');

player.addChild('TitleBar', {text: 'The Title of The Video!'});

در مستنداتش هم مثال‌های خوبی زده. آدرس JSbin زیر رو هم چک کن.
https://jsbin.com/lorexucelo/edit?html,css,js,output

@ali.bayat
الان من نمیدونم برای ساخت یک تگ باید این همه کد بزنم یا قسمتی از این رو میشه تفکیک کنید چطوری من گیج شدم
و آیا میشه با خود دستورcreateElementجاوا اسکریپت هم این کارو کرد چون من هر کاری کردم در داخل videojsتگی بسازم نشد
میشه خلاصه و با تفکیک بگید

@ali.bayat
من میخوام بگم به صورت اتوماتیک هر چند تا که ویدیو دارم (مثلا ۳ تا ویدیو) بیا به ازای هر ویدیو در تگvideo یک تگsourceایجاد کن می خواهم به صورت اتوماتیک این کار رو بکنه نه به صورت دستی به خاطر همین نیاز دارم createEl انجام بدم اما نمیشه این چیزهایی که شما گفتید هم فقط میشه button ساخت اگه میشه راهنمایی کنید

بله من مثال ساده رو براتون گذاشتم. من خودم با کامپوننت‌های این پلاگین کار نکردم اما راهنمای کاملش در آدرس زیر موجوده
https://docs.videojs.com/tutorial-components.html