CODEWITHSUNDEEP
javascripthtmlinsertvideo.js
Electric Skeleton
Electric Skeleton

Reputation: 85

How would I make a plugin for video.js that adds and removes a triangle in the HTML title?

Much like YouTube, when you hit play on the video the triangle shows up, and disappears when you pause it. I'm not sure if this is something browser specific like Google Chrome has with those speakers in the tabs.

I want to know how would I do something like that for video.js

Upvotes: 0

Views: 361

Answers (2)

Jey DWork
Jey DWork

Reputation: 1766

From the video.js documentation (https://github.com/videojs/video.js/blob/stable/docs/guides/plugins.md) but slightly adapted to your case:

Step 1: Write some 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;
  });
};

Step 2: Register the plugin

videojs.plugin('trianglePlugin', trianglePlugin);

Step 3: Using a plugin

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

Edit And if you actually mean the speaker icon (or icons in that location) in Chrome when you playback media with sound, that is browser specific and you have no way of controlling it.

Upvotes: 2

Bala
Bala

Reputation: 706

Please try adding the BigPlayButton component to your player.

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');

Link to the video.js components guides https://github.com/videojs/video.js/blob/stable/docs/guides/components.md

Hope this helps.

Upvotes: 0

Related Questions