Vimeo: Embed an Audio Description Plugin with a Vimeo Player on Your Web Page

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

Follow the steps below to get started.

Step 1- Log into your Vimeo account

Vimeo login

 

Step 2- Navigate to the Videos page

On the top of the screen, click on the Videos tab.

Vimeo videos tab

 

Step 3- Copy the video embed code

Click on the video you want to create an audio description plugin for. Then click on the Share icon, located on the top, right-hand corner of the video.

New_vimeo_share_button.jpg

Under Embed, copy the iframe embed code to your clipboard.

Vimeo iframe embed code

 

Step 4- Add this JavaScript file 

To use the new Vimeo API, you need to have this in the <body> of your page:

<script src="https://player.vimeo.com/api/player.js"></script>

Step 5- Paste the video embed code

In your HTML editor paste the video embed code into the <body> of your HTML document.  

Once added, It will look similar to the example below:

<iframe src="http://player.vimeo.com/video/40689637" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Step 6- Adjust the video embed code

- Modify the iframe embed code by adding an iframe id (in bold below).

The embed code from step 5 should now look similar to this:

<iframe id="your-id" src="http://player.vimeo.com/video/40689637" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

 Keep this HTML document open.

Step 7- Log into your 3Play Media account

transcription closed captioning translation account 3Play Media login

Step 8- Create a Plugin Template

Navigate to Settings > Plugin Templates and click +Create Plugin TemplateSee more information on how to create a Plugin Templates.

> For Player select Vimeo from the drop down menu.
> For Plugin Type choose Audio Description 
> For Player ID enter the iframe ID you selected in step 6.
Find out how to identify your video ID here.


After designing the plugin template click Save My Plugin.

Step 9- Select file

From the My Files page in your 3Play Media project click on the name of the file associated with your Vimeo video.

Select transcript that correlates to Brigthcove video

Step 10- Click Publish Plugin

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

Click Publish Plugin

Step 11- Select a Plugin Template

Click Select Your Plugin and from the drop down menu that appears select the plugin template created in step 8.

Step 12- Copy the Plugin embed code

After selecting a plugin template copy the plugin embed code that appears within the Publish Plugin pop-up menu.

interactive transcript embed code for Kaltura

Step 13- Paste the plugin embed code

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

<html>
<head>
</head>
<body>
<script src="https://player.vimeo.com/api/player.js"></script>
<iframe id="moog" src="https://player.vimeo.com/video/106191369" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script type="text/javascript" src="//static.3playmedia.com/p/projects/11111/files/1111111/plugins/11111.js"></script>
</body>
</html>

Step 14- Publish the HTML page 

Save the HTML page and publish the Vimeo player with the audio description plugin!

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk