Open main menu

CDOT Wiki β

Difference between revisions of "User:Cgomes7/Subtitle Documentation"

< User:Cgomes7
(Examples)
(Subtitle Plug-in)
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Subtitle Plug-in ==
 
== Subtitle Plug-in ==
Description
+
Adds a text subtitle to the video that appears at the start time and disappears at the end time. Subtitles can be translated into different languages using Google translate. The accessibility option allows for a user to disable the subtitles.
 +
 
 +
To use subtitle plug-in, import:
  
 
<script src="popcorn.subtitle.js"></script>
 
<script src="popcorn.subtitle.js"></script>
 +
 +
To use Google translate, import:
 +
 +
<script src="http://google.com/jsapi"></script>
  
 
== Examples ==
 
== Examples ==
 +
===Simple Example===
 
       .subtitle({
 
       .subtitle({
 
         start: 5, // seconds
 
         start: 5, // seconds
Line 11: Line 18:
 
       } )
 
       } )
  
.subtitle({
+
===Simple Example with Google Translate:===
        start: 20, // seconds
+
  .subtitle({
        end: 45, // seconds
+
    start: 20, // seconds
        text: 'this is another subtitle',
+
    end: 45, // seconds
        language: "en",
+
    text: 'this is another subtitle',
        languagesrc: "language",
+
    language: "en",
        accessibilitysrc: "accessibility"
+
    languagesrc: "language",
      } )
+
  } )
 
+
Then use combo box to select language:
<div>
+
  <div>
Choose your language
+
  Choose your language
 
   <select id="language">
 
   <select id="language">
 
       <option value="zh" selected="selected">Chinese</option>
 
       <option value="zh" selected="selected">Chinese</option>
Line 35: Line 42:
 
       <option value="es">Spanish</option>
 
       <option value="es">Spanish</option>
 
   </select>
 
   </select>
 +
</div>
 +
 +
===Simple Example with Accessibility:===
 +
  .subtitle({
 +
    start: 20, // seconds
 +
    end: 45, // seconds
 +
    text: 'this is another subtitle',
 +
    language: "en",
 +
    accessibilitysrc: "accessibility"
 +
  } )
 +
 +
Then use check box to turn accessibility on and off:
 +
 +
    <div>
 
       <input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
 
       <input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
</div>
+
    </div>
  
 
== Syntax ==
 
== Syntax ==
Line 49: Line 70:
 
== Parameters ==
 
== Parameters ==
  
'''Start:''' is the time that you want the subtitle to appear
+
'''Start:''' is the time the subtitle to appear (INT)
  
'''End:''' is the time that you want the subtitle to disappear
+
'''End:''' is the time the subtitle to disappear (INT)
  
'''Text:''' is the text will appear
+
'''Text:''' is the text that will appear (STRING)
  
'''Language:'''
+
'''Language:'''         [optional] the language of the subtitle (STRING)
  
'''Languagesrc:'''
+
'''Languagesrc:'''         [optional] the source of the language option (Combo Box)
  
'''Accessibilitysrc:'''
+
'''Accessibilitysrc:'''         [optional] the source of the accessibility option (Check Box)
  
 
== Returns ==
 
== Returns ==

Latest revision as of 19:52, 7 March 2011

Subtitle Plug-in

Adds a text subtitle to the video that appears at the start time and disappears at the end time. Subtitles can be translated into different languages using Google translate. The accessibility option allows for a user to disable the subtitles.

To use subtitle plug-in, import:

<script src="popcorn.subtitle.js"></script>

To use Google translate, import:

<script src="http://google.com/jsapi"></script>

Examples

Simple Example

     .subtitle({
       start: 5, // seconds
       end: 15, // seconds
       text: 'this is the a subtitle',
     } )

Simple Example with Google Translate:

  .subtitle({
    start: 20, // seconds
    end: 45, // seconds
    text: 'this is another subtitle',
    language: "en",
    languagesrc: "language",
  } )

Then use combo box to select language:

  Choose your language
  <select id="language">
     <option value="zh" selected="selected">Chinese</option>
     <option value="en">English</option>
     <option value="fr">French</option>
     <option value="de">German</option>
     <option value="it">Italian</option>
     <option value="ja">Japanese</option>
     <option value="ko">Korean</option>
     <option value="fa">Persian</option>
     <option value="pl">Polish</option>
     <option value="pt">Portuguese</option>
     <option value="es">Spanish</option>
  </select>

Simple Example with Accessibility:

  .subtitle({
    start: 20, // seconds
    end: 45, // seconds
    text: 'this is another subtitle',
    language: "en",
    accessibilitysrc: "accessibility"
  } )

Then use check box to turn accessibility on and off:

     <input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)

Syntax

.subtitle({
       start: 
       end: 
       text: 
       language: 
       languagesrc: 
       accessibilitysrc: 
     } )

Parameters

Start: is the time the subtitle to appear (INT)

End: is the time the subtitle to disappear (INT)

Text: is the text that will appear (STRING)

Language: [optional] the language of the subtitle (STRING)

Languagesrc: [optional] the source of the language option (Combo Box)

Accessibilitysrc: [optional] the source of the accessibility option (Check Box)

Returns

Nothing

Links