Crazy Hacks

WebChimera.js Player is made to be extremely hackable in order to support even the craziest of needs without necessarily being added to the JS API.

This is a list of all the crazy hacks and suggestions that otherwise don't fit in other doc pages.

---

Disabling Click to Pause

player.find('.wcp-surface').off('click')

---

Playing a local file

Requires prepending file:/// to the absolute path of the media file

player.addPlaylist("file:///E:\\video.mkv");
// or:
// player.addPlaylist("file:///E:/video.mkv");
// for osx / linux
// player.addPlaylist("file:///home/video.mkv");

---

Play Video without adding it to Playlist

player.vlc.play("http://archive.org/download/CartoonClassics/Krazy_Kat_-_Keeping_Up_With_Krazy.mp4");

---

Remove "Buffering x%" Text

CSS:

.wcp-status { display: none !important }

---

Minimizing Delay Between Audio Track Changes

For streams, when changing the audio track the new selection needs to buffer. You can control this delay by setting a different value for buffer in .addPlayer. buffer can be set to anything between 0 and 60000 (milliseconds)

If you set buffer too low, you will experience frame rips (green or gray frames)

player.addPlayer({
    buffer: 1000,
});

---

Remove Both Click and Double Click on Video

player.find(".wcp-surface").unbind("click").unbind("dblclick").css("cursor","default","important");

---

Select Subtitle on Video Load

var params = {url: "the-url", subtitles: {"English": "subs-url"}},
    player = new wjs("#player").addPlayer({ autoplay: true });

player.onFirstPlay(function() {
    player.subTrack(1);
});

player.addPlaylist(params);

---

Adding a Custom Button to the Toolbar

var button = '<div id="my-button" class="wcp-button wcp-right">'+
             'button'+
             '</div>';

player.find('.wcp-toolbar').append(button);
player.find('#my-button').on('click', function() {
    console.log('custom button clicked');
});

You can also style the button as you want with #my-button, even remove 'button'+ (the text of the button) and add a font icon with CSS's :before

---

Get Rendering FPS

Not to be confused with the video's actual FPS (which can be gotten with player.vlc.input.fps), this might be lower at times then the actual video FPS due to app performance issues. It can be useful if you want to find the FPS of a live stream (where player.vlc.input.fps returns 0 because live streams can serve different videos one after the other with a different FPS).

player.renderer.getFps(function(fps) {
    console.log('renderer fps is: ' + fps);
});

A more detailed description of this method can be found here.

---

FAQ

!! Why is player.find() being used everywhere? Because you can add more then 1 player to your page, using this method localizes your changes to one particular player on the page.

!! This looks like jQuery. Yes, it is. wcjs-player includes jQuery and proxies some of it's methods for easy access to and editing of elements.