Examples

• Simple Video Embed
• Show Related Videos
• Custom Playlist Query

Simple Video Embed

BoxCast provides a quick and easy way to embed a video player on your web site. Simply log in to the BoxCast Dashboard with your provided account, then visit the Promote and Embed section of the site. It will walk you through generating a snippet of HTML and JavaScript that you can paste into your web site and have your videos up and running in no time at all.

Let’s walk through what the generated HTML snippet means. We start by creating a <div id="test-player">. The content inside of it doesn’t matter, but we like to put a link to the boxcast.com viewer in case anything breaks later. Then the boxcast.min.js script is loaded. Finally, the boxcast(selector).loadChannel method is called to create the video widget.

<div id="test-player">
  <a href="https://www.boxcast.com/view/#test-video">
    Watch Test Video on BoxCast: a smarter way to stream.
  </a>
</div>
<script src="https://js.boxcast.com/v3.min.js"></script>
<script>
boxcast('#test-player').loadChannel('test-video', {
  autoplay: false,
  showTitle: true,
  showDescription: true
});
</script>

Some important notes:

• You can choose whatever you like instead of test-player
• The channel - test-video in this case - describes which video (or videos) will be loaded. You can find that on the BoxCast Dashboard.
• There are several options such as autoplay available and can be found on the advanced documentation.

Show Related Videos

The previous example shows a video player and nothing else. Many times, you’ll want to give your audience the ability to pick between multiple videos that you have organized in a channel. To do that, you’ll use a channelId that corresponds to a BoxCast Custom Channel and set a few other flags on the embed widget.

<div id="test-player">
  <a href="https://www.boxcast.com/view/#test-channel">
    Watch Test Channel on BoxCast: a smarter way to stream.
  </a>
</div>
<script src="https://js.boxcast.com/v3.min.js"></script>
<script>
boxcast('#test-player').loadChannel('test-channel', {
  autoplay: false,
  showTitle: true,
  showDescription: true,
  showRelated: true
});
</script>

Custom Playlist Query

By default, the playlist is filled with live and past broadcasts from the selected channel. If nothing is live, it also includes the next upcoming broadcast. If you would like to show broadcasts in the channel playlist based on a custom time range (for example, all events in the next 7 days), you can override the query used to select channel broadcasts.

<div id="test-player">
  <a href="https://www.boxcast.com/view/#test-channel">
    Watch Test Channel on BoxCast: a smarter way to stream.
  </a>
</div>
<script src="https://js.boxcast.com/v3.min.js"></script>
<script>
// Use javascript to compute next 7 day interval (NOTE: momentjs or server-side date generation is probably easier)
var date = new Date();
var start = date.toISOString().slice(0,10);
date.setDate(date.getDate() + 7);
var end = date.toISOString().slice(0,10);

boxcast('#test-player').loadChannel('test-channel', {
  autoplay: false,
  showTitle: true,
  showDescription: true,
  showRelated: true,
  relatedBroadcastsQuery: {
    q: "timeframe:relevant starts_at:[" + start + " TO " + end + "]"
  }
});
</script>