Results for:

Video Embed

Embed and sharing

Once the video is published, or you've created a playlist or a live event, you can get the Embed code to insert the video on your website or on the Web TV. Click on Embed MainStreaming Support | code button to get the code: copy and paste it in your web page.

MainStreaming Support | customize video embedding code

Tips: I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

In Customize embedding code is also possible to personalize some parameters for a better integration of the video on your website.

  • Player Style: here to choose the player theme we want to use. The theme must be configured inside the Player section
  • Social Share URL: here you can insert the link of the web page where you're going to embed the video. The link will be auto-generated when the users will click the social share button to share the video on social medias (like Tumblr, Facebook, Twitter, LinkedIn, etc.)
  • Auto-Play: if enabled, the video will be automatically started at the opening of the web page
  • Usa HTTPS: enable only if the website is on a HTTPS domain

In the same window we can send the video via e-mail or get a direct link.

Embed JavaScript

It's possible to use another form of embed, by using Javascript.

You can do it by declaring in header the mainstreaming.js file using next line:

<script src="//video.mainstreaming.tv/sdk/13/js/mainstreaming.js" type="text/javascript"></script>

Successively declare an empty div and give it an id; this div will be the video container.

<div id="video"></div>

Call Javascript embed function and pass the contentId and an object of parameters.

<script type="text/javascript">
myplayer = new MainStreaming.embed('contentId', { containerID: 'video', wmode: 'direct' });
</script>


As option parameters you can specify:

  • skinId: skin id
  • hideControls:you can hide video player controls (true or false)
  • cuepoint: You can active programmable cuepoints (true or false)
  • width: div width
  • height: div height


The object created by the embed function will be inserted in a list of object called MainStreaming.instances. In every instance you can insert some event listeners.
The id instance of the list is composed by MsPlayer-containerID, where containerId is the id previously declared to the div. So in our example the name will be MainStreaming.instances['MsPlayer-video'].

JavaScript API

MainStreaming's player has different JavaScript methods that permits to control the video, so you can do different customizable logics. Using player's instance you can do the follows:

Start video reproduction:
myplayer.play();

Stop video reproduction:
myplayer.pause();

Do the seek inside a video (t parameter is expressed in seconds):
myplayer.seek(t);

Enable the video mute (insert true or false as status parameter):
myplayer.muted(status);

In the playlist one shot you can go on the next or prev videos using this methods:
myplayer.next();
myplayer.prev();

Listeners

From MainStreaming.instances, list of objects, we can take one player and assign to it some personalized events as:

function myFunctionOnProgress(t){
console.log(t);
}
MainStreaming.instances['MsPlayer-video'].onProgress = myFunctionOnProgress;


Video player supports different listeners and they are:

  • onProgress: called continuously while player is in play, and return the current playing second
  • onCuePoint: called when there is correspondence with a cuepoint defined via API
  • onLiveUTCTimeStamp: if the video is a transcoded LIVE, this listener emits every ten seconds the date when the video is been trasmitted. The date is in UTC.
  • onFirstPlay: called when first play is clicked
  • onAdPlay: called when an advertising preroll video is watched
  • onAdFullView: called when an advertising preroll video is entirely watched.
keyboard_arrow_up