Video.js: Embed the Captions Plugin with a Video.js Player on a Webpage

Once your media file has been transcribed by 3Play Media you can embed the captions plugin along with your Video.js player on your webpage. To get started, follow the steps below...

Content Publishing must first be enabled in your 3Play Media account.
See more information on enabling content publishing in your 3Play account.

 

Step 1- Open your HTML editor 

Open the application you use to build and edit your webpages.

 

Step 2- Add the Video.js embed code 

Your Video.js embed code should look similar to the example below once added to a new or existing page.  Take note of your video id below, you will need to enter it when creating your Captions Plugin Template in Step 4.  In this case it is: bestMovieEver_theSequel.

Note that the links to the media file and Video.js player package will be unique to your embed code as the URLs will reflect will these assets reside on your server.

<html>
<head>
<link href="http://mysite.com/folder/videoJS/video-js.css" rel="stylesheet">
<script src="http://mysite.com/folder//videoJS/video.js"></script>
</head>
<body>
<script>
videojs.options.flash.swf = "http://mysite.com/folder/videoJS/video-js.swf"
</script>
<video id="bestMovieEver_theSequel" class="video-js vjs-default-skin"
controls preload="auto" width="398" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://mysite.com/folder/myVideo.mp4" type='video/mp4' />
</video>
</body>
</html>

See more information regarding embedding media files using Video.js.

 

Step 3- Log into your 3Play Media account

3play_login.jpg

Step 4- Create New Plugin Template

Navigate to Settings > Plugin Templates and create a new Captions Plugin Transcript plugin template. 
See more information on how to create a Plugin Template 

In the plugin template, under Player, select Video.js.  Under Player ID, enter the Video Player ID from the Video.js embed code and click Save My Plugin. 

Create Captions Plugin Template

After designing the plugin template click Save My Plugin.

See more information on the Captions Plugin Settings.

 

Step 5- Select your 3Play Media file

Go to the My Files page in your 3Play Media account.
Click on the file associated with the content you want to embed on a webpage using a Video.js player.

Select your 3Play Media file

 

Step 6- Click Publish Plugin

Click the Publish Plugin button located above your list of files.

Click Publish Plugin button

Step 7- Select a Plugin Template

Select Your Plugin and from the drop down menu that appears.  Select the Captions Plugin Template created in step 4.

Select Captions Plugin Template

 

Step 8- Copy the 3Play Media plugin embed code

Once highlighted blue, copy this code.This is your 3Play Media Captions Plugin embed code. 

Copy Captions Plugin Template code

 

Step 9- Paste the captions plugin embed code into your HTML

Go back to your HTML code.
Paste the 3Play plugin embed code below the video embed code in the <body> of your HTML.

Below is an example of what the captions plugin embed code should look like.   

<script src="http://static.3playmedia.com/p/projects/10013/files/78983/
embed.js?plugin=captions&settings=width:398,skin:dark,overlay:true,minimize_onload:
true,searchbar:true&player_type=jw&player_id=mediaplayer" type="text/javascript">
</script>

 

Your HTML will similar to the example below when complete.

<html>
 <head>
<link href="http://mysite.com/folder/videoJS/video-js.css" rel="stylesheet"><script src="http://mysite.com/folder//videoJS/video.js"></script>
 </head>
  <body>
<script>videojs.options.flash.swf = "http://mysite.com/folder/videoJS/video-js.swf"</script>
<video id="bestMovieEver_theSequel" class="video-js vjs-default-skin"controls preload="auto" width="398" height="264"poster="http://video-js.zencoder.com/oceans-clip.png"data-setup='{"example_option":true}'>
<source src="http://mysite.com/folder/myVideo.mp4" type='video/mp4' />
</video>
<script src="http://static.3playmedia.com/p/projects/000/files/00/embed.js?plugin=captions&settings=width:398,skin:dark,overlay:true,overlay_draggable:true,searchbar:true&player_type=video_js&player_id=bestMovieEver_theSequel" type="text/javascript"></script> </body>
</html>

 

Step 10- Publish your Video.js player with the captions plugin

Save your new HTML code and publish your captions plugin along with your Video.js player!  Enjoy!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk