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

From CDOT Wiki
Jump to: navigation, search
(Parameters)
(Subtitle Plug-in)
 
(23 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 10: 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>
 +
  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>
 +
</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)
 +
    </div>
  
 
== Syntax ==
 
== Syntax ==
Line 30: Line 70:
 
== Parameters ==
 
== Parameters ==
  
'''Start:''' is the time that you want the subtitle to appear (Int)
+
'''Start:''' is the time the subtitle to appear (INT)
'''End:'''           is the time that you want the subtitle to disappear (Int)
+
 
'''Text:''' is the text will appear
+
'''End:''' is the time the subtitle to disappear (INT)
'''Language'''
+
 
'''Languagesrc'''
+
'''Text:''' is the text that will appear (STRING)
'''Accessibilitysrc'''
+
 
 +
'''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 ==
 
== Returns ==
 
Nothing
 
Nothing
 
== Google Translate ==
 
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>
 
  <div>
 
      with help from <a href="http://google.com/translate">Google Translate</a><br />
 
      <input type="checkbox" id="accessibility" checked="checked" />All subtitles (accessibility)
 
  </div>
 
  
 
== Links ==
 
== Links ==
 
*[https://github.com/annasob/popcorn-js/blob/0.4/plugins/subtitle/popcorn.subtitle.js Subtitle Source Code]
 
*[https://github.com/annasob/popcorn-js/blob/0.4/plugins/subtitle/popcorn.subtitle.js Subtitle Source Code]
 
*[https://github.com/annasob/popcorn-js/blob/0.4/plugins/subtitle/popcorn.subtitle.html Example Source Code]
 
*[https://github.com/annasob/popcorn-js/blob/0.4/plugins/subtitle/popcorn.subtitle.html Example Source Code]

Latest revision as of 18: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