1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/guides.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic,600,600italic' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/solarized_light.min.css" />
<script type="text/javascript" src="//use.edgefonts.net/source-code-pro.js"></script>
<link rel="canonical" href="https://docs.videojs.com/tutorial-languages.html">
</head>
<body>
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/tutorial-languages.html">documentation for the current release</a>.
<div id="sidenav" class="sidenav"></div>
<div id="main" class="main">
<h1 id="languages">Languages</h1>
<p>Multiple language support allows for users of non-English locales to natively interact with the displayed player. Video.js will compile multiple language files (see below) and instantiate with a global dictionary of language key/value support. Video.js player instances can be created with per-player language support that amends/overrides these default values. Player instances can also hard-set default languages to values other than English as of version 4.7.</p>
<h2 id="creating-the-language-file">Creating the Language File</h2>
<p>Video.js uses key/value object dictionaries in JSON form.</p>
<p>An English lang file is at <a href="https://github.com/videojs/video.js/tree/master/lang/en.json">/lang/en.json</a> which should be used as a template for new files. This will be kept up to date with strings in the core player that need localizations.</p>
<p>A sample dictionary for Spanish <code>['es']</code> would look as follows:</p>
<pre><code class="lang-JSON">{
"Play": "Reproducción",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",
"Loaded": "Cargado",
"Progress": "Progreso",
"Fullscreen": "Pantalla completa",
"Non-Fullscreen": "Pantalla no completa",
"Mute": "Silenciar",
"Unmute": "No silenciado",
"Playback Rate": "Velocidad de reproducción",
"Subtitles": "Subtítulos",
"subtitles off": "Subtítulos desactivados",
"Captions": "Subtítulos especiales",
"captions off": "Subtítulos especiales desactivados",
"Chapters": "Capítulos",
"Close Modal Dialog": "Cerca de diálogo modal",
"You aborted the video playback": "Ha interrumpido la reproducción del vídeo.",
"A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
"No compatible source was found for this video.": "No se ha encontrado ninguna fuente compatible con este vídeo."
}
</code></pre>
<p>Notes:</p>
<ul>
<li>The file name should always be in the format <code>XX.json</code>, where <code>XX</code> is the language code. This should be a two letter code (for options see the bottom of this document) except for cases where a more specific code with sub-code is appropriate, e.g. <code>zh-CN.lang</code>.</li>
<li>For automatic inclusion at build time, add your language file to the <code>/lang</code> directory (see 'Adding Languages to Video.js below').</li>
</ul>
<h2 id="adding-languages-to-video-js">Adding Languages to Video.js</h2>
<p>Additional language support can be added to Video.js in multiple ways.</p>
<ol>
<li>Create language scripts out of your JSON objects by using our custom grunt task <code>vjslanguages</code>. This task is automatically run as part of the default grunt task in Video.JS, but can be configured to match your <code>src</code>/<code>dist</code> directories if different. Once these scripts are created, just add them to your DOM like any other script.</li>
</ol>
<p>NOTE: These need to be added after the core Video.js script.</p>
<ol>
<li>Add your JSON objects via the videojs.addLanguage API. Preferably in the HEAD element of your DOM or otherwise prior to player instantiation.</li>
</ol>
<pre><code class="lang-html"><head>
<script>
videojs.options.flash.swf = '../node_modules/videojs-swf/dist/video-js.swf';
videojs.addLanguage('es', {
"Play": "Reproducción",
"Pause": "Pausa",
"Current Time": "Tiempo reproducido",
"Duration": "Duración total",
"Remaining Time": "Tiempo restante",
"Stream Type": "Tipo de secuencia",
"LIVE": "DIRECTO",
"Loaded": "Cargado",
"Progress": "Progreso",
"Fullscreen": "Pantalla completa",
"Non-Fullscreen": "Pantalla no completa",
"Mute": "Silenciar",
"Unmute": "No silenciado",
"Playback Rate": "Velocidad de reproducción",
"Subtitles": "Subtítulos",
"subtitles off": "Subtítulos desactivados",
"Captions": "Subtítulos especiales",
"captions off": "Subtítulos especiales desactivados",
"Chapters": "Capítulos",
"Close Modal Dialog": "Cerca de diálogo modal",
"You aborted the video playback": "Ha interrumpido la reproducción del vídeo.",
"A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproducción de vídeo se ha interrumpido por un problema de corrupción de datos o porque el vídeo precisa funciones que su navegador no ofrece.",
"No compatible source was found for this video.": "No se ha encontrado ninguna fuente compatible con este vídeo."
});
</script>
</head>
</code></pre>
<ol>
<li>During a Video.js player instantiation. Adding the languages to the configuration object provided in the <code>data-setup</code> attribute.</li>
</ol>
<pre><code class="lang-html"><video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"languages":{"es":{"Play":"Juego"}}}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
</video>
</code></pre>
<p>Notes:</p>
<ul>
<li>This will add your language key/values to the Video.js player instances individually. If these values already exist in the global dictionary via the process above, those will be overridden for the player instance in question.</li>
</ul>
<h2 id="setting-default-language-in-a-video-js-player">Setting Default Language in a Video.js Player</h2>
<p>During a Video.js player instantiation you can force it to localize to a specific language by including the locale value into the configuration object via the <code>data-setup</code> attribute. Valid options listed at the bottom of the page for reference.</p>
<pre><code class="lang-html"><video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
data-setup='{"language":"es"}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
</video>
</code></pre>
<h2 id="determining-player-language">Determining Player Language</h2>
<p>The player language is set to one of the following in descending priority:</p>
<ul>
<li>The language specified in setup options as above</li>
<li>The language specified by the closet element with a <code>lang</code> attribute. This could be the player itself or a parent element. Usually the document language is specified on the <code>html</code> tag.</li>
<li>Browser language preference (the first language if more than one is configured)</li>
<li>'en'</li>
</ul>
<p>The player language can be change after instantiation with <code>language('fr')</code>. However localizable text will not be modified by doing this, for best results set the language beforehand.</p>
<h2 id="language-selection">Language selection</h2>
<ul>
<li>Language codes are considered case-insensitively (<code>en-US</code> == <code>en-us</code>).</li>
<li>If there is no match for a language code with a subcode (<code>en-us</code>), a match for the primary code (<code>en</code>) is used if available.</li>
</ul>
<h2 id="localization-in-plugins">Localization in Plugins</h2>
<p>When you're developing a plugin, you can also introduce new localized strings. Simply wrap the string with the player's <code>localize</code> function:</p>
<pre><code class="lang-js">var details = '<div class="vjs-errors-details">' + player.localize('Technical details') + '</div>';
</code></pre>
<h2 id="language-codes">Language Codes</h2>
<p>The following is a list of official language codes.</p>
<p><strong>NOTE:</strong> For supported language translations, please see the <a href="https://github.com/videojs/video.js/tree/master/lang">Languages Folder (/lang)</a> folder located in the project root.</p>
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<table>
<tr><th>ab<th><td>Abkhazian</td></tr>
<tr><th>aa<th><td>Afar</td></tr>
<tr><th>af<th><td>Afrikaans</td></tr>
<tr><th>sq<th><td>Albanian</td></tr>
<tr><th>am<th><td>Amharic</td></tr>
<tr><th>ar<th><td>Arabic</td></tr>
<tr><th>an<th><td>Aragonese</td></tr>
<tr><th>hy<th><td>Armenian</td></tr>
<tr><th>as<th><td>Assamese</td></tr>
<tr><th>ay<th><td>Aymara</td></tr>
<tr><th>az<th><td>Azerbaijani</td></tr>
<tr><th>ba<th><td>Bashkir</td></tr>
<tr><th>eu<th><td>Basque</td></tr>
<tr><th>bn<th><td>Bengali (Bangla)</td></tr>
<tr><th>dz<th><td>Bhutani</td></tr>
<tr><th>bh<th><td>Bihari</td></tr>
<tr><th>bi<th><td>Bislama</td></tr>
<tr><th>br<th><td>Breton</td></tr>
<tr><th>bg<th><td>Bulgarian</td></tr>
<tr><th>my<th><td>Burmese</td></tr>
<tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
<tr><th>km<th><td>Cambodian</td></tr>
<tr><th>ca<th><td>Catalan</td></tr>
<tr><th>zh<th><td>Chinese (Simplified)</td></tr>
<tr><th>zh<th><td>Chinese (Traditional)</td></tr>
<tr><th>co<th><td>Corsican</td></tr>
<tr><th>hr<th><td>Croatian</td></tr>
<tr><th>cs<th><td>Czech</td></tr>
<tr><th>da<th><td>Danish</td></tr>
<tr><th>nl<th><td>Dutch</td></tr>
<tr><th>en<th><td>English</td></tr>
<tr><th>eo<th><td>Esperanto</td></tr>
<tr><th>et<th><td>Estonian</td></tr>
<tr><th>fo<th><td>Faeroese</td></tr>
<tr><th>fa<th><td>Farsi</td></tr>
<tr><th>fj<th><td>Fiji</td></tr>
<tr><th>fi<th><td>Finnish</td></tr>
<tr><th>fr<th><td>French</td></tr>
<tr><th>fy<th><td>Frisian</td></tr>
<tr><th>gl<th><td>Galician</td></tr>
<tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
<tr><th>gv<th><td>Gaelic (Manx)</td></tr>
<tr><th>ka<th><td>Georgian</td></tr>
<tr><th>de<th><td>German</td></tr>
<tr><th>el<th><td>Greek</td></tr>
<tr><th>kl<th><td>Greenlandic</td></tr>
<tr><th>gn<th><td>Guarani</td></tr>
<tr><th>gu<th><td>Gujarati</td></tr>
<tr><th>ht<th><td>Haitian Creole</td></tr>
<tr><th>ha<th><td>Hausa</td></tr>
<tr><th>he<th><td>Hebrew</td></tr>
<tr><th>hi<th><td>Hindi</td></tr>
<tr><th>hu<th><td>Hungarian</td></tr>
<tr><th>is<th><td>Icelandic</td></tr>
<tr><th>io<th><td>Ido</td></tr>
<tr><th>id<th><td>Indonesian</td></tr>
<tr><th>ia<th><td>Interlingua</td></tr>
<tr><th>ie<th><td>Interlingue</td></tr>
<tr><th>iu<th><td>Inuktitut</td></tr>
<tr><th>ik<th><td>Inupiak</td></tr>
<tr><th>ga<th><td>Irish</td></tr>
<tr><th>it<th><td>Italian</td></tr>
<tr><th>ja<th><td>Japanese</td></tr>
<tr><th>jv<th><td>Javanese</td></tr>
<tr><th>kn<th><td>Kannada</td></tr>
<tr><th>ks<th><td>Kashmiri</td></tr>
<tr><th>kk<th><td>Kazakh</td></tr>
<tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
<tr><th>ky<th><td>Kirghiz</td></tr>
<tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
<tr><th>ko<th><td>Korean</td></tr>
<tr><th>ku<th><td>Kurdish</td></tr>
<tr><th>lo<th><td>Laothian</td></tr>
<tr><th>la<th><td>Latin</td></tr>
<tr><th>lv<th><td>Latvian (Lettish)</td></tr>
<tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
<tr><th>ln<th><td>Lingala</td></tr>
<tr><th>lt<th><td>Lithuanian</td></tr>
<tr><th>mk<th><td>Macedonian</td></tr>
<tr><th>mg<th><td>Malagasy</td></tr>
<tr><th>ms<th><td>Malay</td></tr>
<tr><th>ml<th><td>Malayalam</td></tr>
<tr><th>mt<th><td>Maltese</td></tr>
<tr><th>mi<th><td>Maori</td></tr>
<tr><th>mr<th><td>Marathi</td></tr>
<tr><th>mo<th><td>Moldavian</td></tr>
<tr><th>mn<th><td>Mongolian</td></tr>
<tr><th>na<th><td>Nauru</td></tr>
<tr><th>ne<th><td>Nepali</td></tr>
<tr><th>no<th><td>Norwegian</td></tr>
<tr><th>oc<th><td>Occitan</td></tr>
<tr><th>or<th><td>Oriya</td></tr>
<tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
<tr><th>ps<th><td>Pashto (Pushto)</td></tr>
<tr><th>pl<th><td>Polish</td></tr>
<tr><th>pt<th><td>Portuguese</td></tr>
<tr><th>pa<th><td>Punjabi</td></tr>
<tr><th>qu<th><td>Quechua</td></tr>
<tr><th>rm<th><td>Rhaeto-Romance</td></tr>
<tr><th>ro<th><td>Romanian</td></tr>
<tr><th>ru<th><td>Russian</td></tr>
<tr><th>sm<th><td>Samoan</td></tr>
<tr><th>sg<th><td>Sangro</td></tr>
<tr><th>sa<th><td>Sanskrit</td></tr>
<tr><th>sr<th><td>Serbian</td></tr>
<tr><th>sh<th><td>Serbo-Croatian</td></tr>
<tr><th>st<th><td>Sesotho</td></tr>
<tr><th>tn<th><td>Setswana</td></tr>
<tr><th>sn<th><td>Shona</td></tr>
<tr><th>ii<th><td>Sichuan Yi</td></tr>
<tr><th>sd<th><td>Sindhi</td></tr>
<tr><th>si<th><td>Sinhalese</td></tr>
<tr><th>ss<th><td>Siswati</td></tr>
<tr><th>sk<th><td>Slovak</td></tr>
<tr><th>sl<th><td>Slovenian</td></tr>
<tr><th>so<th><td>Somali</td></tr>
<tr><th>es<th><td>Spanish</td></tr>
<tr><th>su<th><td>Sundanese</td></tr>
<tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
<tr><th>sv<th><td>Swedish</td></tr>
<tr><th>tl<th><td>Tagalog</td></tr>
<tr><th>tg<th><td>Tajik</td></tr>
<tr><th>ta<th><td>Tamil</td></tr>
<tr><th>tt<th><td>Tatar</td></tr>
<tr><th>te<th><td>Telugu</td></tr>
<tr><th>th<th><td>Thai</td></tr>
<tr><th>bo<th><td>Tibetan</td></tr>
<tr><th>ti<th><td>Tigrinya</td></tr>
<tr><th>to<th><td>Tonga</td></tr>
<tr><th>ts<th><td>Tsonga</td></tr>
<tr><th>tr<th><td>Turkish</td></tr>
<tr><th>tk<th><td>Turkmen</td></tr>
<tr><th>tw<th><td>Twi</td></tr>
<tr><th>ug<th><td>Uighur</td></tr>
<tr><th>uk<th><td>Ukrainian</td></tr>
<tr><th>ur<th><td>Urdu</td></tr>
<tr><th>uz<th><td>Uzbek</td></tr>
<tr><th>vi<th><td>Vietnamese</td></tr>
<tr><th>vo<th><td>Volapük</td></tr>
<tr><th>wa<th><td>Wallon</td></tr>
<tr><th>cy<th><td>Welsh</td></tr>
<tr><th>wo<th><td>Wolof</td></tr>
<tr><th>xh<th><td>Xhosa</td></tr>
<tr><th>yi<th><td>Yiddish</td></tr>
<tr><th>yo<th><td>Yoruba</td></tr>
<tr><th>zu<th><td>Zulu</td></tr>
</table>
</tr>
</table>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
<script src="../js/guides.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
|
