在Azure Media Player上插入按钮

Question

What I want to do is to insert my own custom buttons inside the Azure Media Player. Since I don't have access on the tags. I want to append my buttons instead inside the div element of the Azure Media Player. Is there any way that i can insert a div element inside a div of an innaccessible html?

Here's the elements that i want to insert:

<button  id="play"      onclick="playPause(this.id);">❚❚</button>
<button  id="myTime"     onclick="stopTime()">∎</button>
<button  id="mute"       onclick ="muteVid()">Mute</button>
<button  id="rewindTime" onclick="rewindTime()">◄◄</button>

And here is the snap shot of the div class that i want it to be inserted to.

I just want to insert the buttons inside that vjs-control-bar div class. Is there a way to do it?

Answer 1

We can add it via plugins

(function (mediaPlayer) {
    mediaPlayer.plugin('pluginname', function (options) {
        var buttonContainer = this.controlBar.el();

        var buttonEl = mediaPlayer.createEl('button', { <button property>});
        buttonContainer .appendChild(buttonEl);        
    });
}(window.amp));