我如何为video.js制作一个在标题中添加和删除三角形的插件？

Question

就像YouTube一样，当你点击播放视频时，三角形就会出现，当你暂停它时，三角形就会消失。我不确定这是不是浏览器特有的东西，就像Google Chrome那样，标签里有那些扬声器。

我想知道我该如何为video.js做这样的事情

Answer 1

来自video.js文档(https://github.com/videojs/video.js/blob/stable/docs/guides/plugins.md)，但稍微根据您的情况进行了调整：

步骤1:编写一些JavaScript

function trianglePlugin(options) {
  this.on('play', function(e) {
    window.originalDocumentTitle = document.title;
    document.title = "▶ " + document.title;
  });
  this.on('pause', function(e) {
    document.title = window.originalDocumentTitle;
  });
  this.on('ended', function(e) {
    document.title = window.originalDocumentTitle;
  });
};

步骤2:注册插件

videojs.plugin('trianglePlugin', trianglePlugin);

步骤3:使用插件

videojs('vidId', {
  plugins: {
    trianglePlugin: {
      exampleOptionWhichWeDontNeed: true
    }
  }
});

如果你真的指的是中的扬声器图标(或该位置的图标)，当你播放带有声音的媒体时，这是浏览器特定的，你没有办法控制它。

Answer 2

请尝试将BigPlayButton组件添加到您的播放器。

videojs.Control = videojs.Component.extend();
videojs.Button = videojs.Control.extend();
videojs.PlayToggle = videojs.Button.extend();
// Adding a new control to the player
myPlayer.addChild('BigPlayButton');

指向video.js组件指南https://github.com/videojs/video.js/blob/stable/docs/guides/components.md的链接

希望这能有所帮助。