Video Player Scripting

The Vidcaster player is based on the open source VideoJS video player, which is extremely flexible and powerful. Since it is an HTML5-based player powered by JavaScript, it's also very easy to customize the behavior of the player by writing your own custom JavaScript, which you can add to your Vidcaster site with the Custom HTML feature. This article should get you started on how to do this.

The Vidcaster video player is served in an iframe, which you can find in the Video Playback template. The code might vary slightly depending on the theme you're using, but it should look something like this:

    
<iframe id="video-player" title="{{ current_site.name }} Video Player" width="640" height="360" src="http://{{ current_site.domain }}/player/{{ item.code }}/native/autoplay/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    

To add your own JavaScript to communicate with the player, the best place for it is within the page-scripts block at the bottom of the Video Playback template. Since the player is in an iframe you will need to execute JavaScript within the contents of the iframe in order to reach the player. Here's an example:

    
// Store a reference to the iframe element
var videoPlayer = document.getElementById('video-player');

// Search by ID for an element in the player iframe (in this case, the loading spinner)
videoPlayer.contentWindow.document.getElementById('vjs-loading-spinner');
    

You can use the VideoJS object in JavaScript to issue commands to the player and to call it for information. There is a full list of available commands in the VideoJS API docs, and here's one example:

    
// Call the VideoJS object and get the current play time
videoPlayer.contentWindow.VideoJS('vid').currentTime();
    

You can also listen to VideoJS events and then execute your own JavaScript at the time of the event. Here's an example of an event listener that executes when the video begins to play, and for more options, here is the full list of the available VideoJS events.

    
videoPlayer.contentWindow.VideoJS('vid').addEvent('play', function() {
    // Do something when the video player begins to play
});
    

For more information on what is possible, you can refer to the VideoJS documentation, and if you still have questions, feel free to reach out to us at support@vidcaster.com.