Advanced: Closed Captions with the HTML5 Player V3 (Deprecated)

Use jQuery and the Web Video Text Tracks Format (WebVTT) to present closed captions with the HTML5 Player V3.

Note: Ooyala Player V3 has been deprecated and is scheduled to be disabled. For details and alternatives, see the OVP Release Notes.
In this example, you will learn how to use the jQuery support provided with the Ooyala Player to add WebVTT-formatted closed caption content to your videos. In this advanced application, the closed caption content specified in a separate VTT file appears as closed caption text below the video content.
The purpose of this web page is to provide the user with English captions, so the design will include:
  • A head element containing a script tag specifying the loading and initialization request.
  • A body element containing:
    • UI presentation and layout for the Player container.
    • A script tag that creates the Player.
    • A track element, selected using jQuery, used to display the captions.
Follow these steps to build your web page:

See Complete Example to view the code for the entire web page.

Step 1: Setup the Basic Structure

We will develop the head element and the logic for presenting and creating the Player. To learn how to do this, see Basic Tutorial for the HTML5 Player V3 (Deprecated). Here is the web page design we have so far:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Player V3 Web Page: HTML5 Closed Captions</title>
        
        <!-- Load the Ooyala V3 Player -->
        <script src='http://player.ooyala.com/v3/d3cf86763d9049329ffc74fb94b794b8?platform=html5-priority'></script>
    </head>
    <body>
        <script>
            /* Enter your Player Code and JavaScript code in this section */
            OO.ready(function() {
            	OO.Player.create(
            	  'ooyalaplayer', 
            	  '5qZjJ2czr1hZznGFaDH_H_gejsVe5AVV'
            	);
            });
        </script>
        
        <!-- Enter your HTML code in this section -->
        <div id='ooyalaplayer' style='width:640px;height:360px'></div>        
    </body>
</html>
      

Step 2: Add the Close Captions

You can add a track for closed captions using jQuery. This line of code, which we will enclose within the script element, appends the closed caption file, which was written in WebVTT format:
            	OO.$('video.video').append(
            	  '<track src="./extra_files/testCC.vtt" label="English captions" kind="captions" srclang="en-us" default >'
            	);
In this case we are using jQuery to select the HTML video element using class video. We use this element to select the track element, where we specify the WebVTT-formatted source file and related closed captions attribute values. You can learn about the usage of the track element at W3C. Here is the closed captions logic, which is now included within the OO.ready() function defined in the the script element:
        <script>
            /* Enter your Player Code and JavaScript code in this section */
            OO.ready(function() {
            	OO.Player.create(
            	  'ooyalaplayer', 
            	  '5qZjJ2czr1hZznGFaDH_H_gejsVe5AVV'
            	);
            	
            	/*
            	 * Use jQuery to append the closed caption file written in WebVTT format.
            	 * $('video.video') selects the HTML5 video element. 
            	 * Its append method is used to specify the closed caption track attributes.
            	 */
            	OO.$('video.video').append(
            	  '<track src="./extra_files/testCC.vtt" label="English captions" kind="captions" srclang="en-us" default >'
            	);
            });
        </script>

To learn about the WebVTT format, visit http://dev.w3.org/html5/webvtt/.

To learn more about jQuery, visit https://jquery.com/ and http://www.w3schools.com/jquery/.

Complete Example

You now have a complete working example of a web page that displays closed captions:
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Player V3 Web Page: HTML5 Closed Captions</title>
        
        <!-- Load the Ooyala V3 Player -->
        <script src='http://player.ooyala.com/v3/d3cf86763d9049329ffc74fb94b794b8?platform=html5-priority'></script>
    </head>
    <body>
        <script>
            /* Enter your Player Code and JavaScript code in this section */
            OO.ready(function() {
            	OO.Player.create(
            	  'ooyalaplayer', 
            	  '5qZjJ2czr1hZznGFaDH_H_gejsVe5AVV'
            	);
            	
            	/*
            	 * Use jQuery to append the closed caption file written in WebVTT format.
            	 * $('video.video') selects the HTML5 video element. 
            	 * Its append method is used to specify the closed caption track attributes.
            	 */
            	OO.$('video.video').append(
            	  '<track src="./extra_files/testCC.vtt" label="English captions" kind="captions" srclang="en-us" default >'
            	);
            });
        </script>
        
        <!-- Enter your HTML code in this section -->
        <div id='ooyalaplayer' style='width:640px;height:360px'></div>        
    </body>
</html>
  

해당 내용이 도움 되었습니까?