mirror of
https://github.com/videojs/video.js.git
synced 2024-12-14 11:23:30 +02:00
13 KiB
13 KiB
Languages
Multiple language support allows for users of non-English locales to natively interact with the displayed player. Video.js will compile multiple langauge 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 this default values. Player instances can also hard-set default languges to values other than English as of version 4.7.
Creating the Language File
Video.js uses key/value object dictionaries in JSON form. A sample dictionary for Spanish ['es'] would look as follows;
{
"Play": "Juego",
"Pause": "Pausa",
"Current Time": "Tiempo Actual",
"Duration Time": "Tiempo de Duracion",
"Remaining Time": "Tiempo Restante",
"Stream Type": "Tipo de Transmision",
"LIVE": "En Vivo",
"Loaded": "Cargado",
"Progress": "Progreso",
"Fullscreen": "Pantalla Completa",
"Non-Fullscreen": "No Pantalla Completa",
"Mute": "Mudo",
"Unmuted": "Activar sonido",
"Playback Rate": "Reproduccion Cambio",
"Subtitles": "Subtitulos",
"subtitles off": "subtitulos fuera",
"Captions": "Subtitulos",
"captions off": "subtitulos fuera",
"Chapters": "Capitulos",
"You aborted the video playback": "Ha anulado la reproduccion de video",
"A network error caused the video download to fail part-way.": "Un error en la red hizo que la descarga de video falle parte del camino.",
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "El video no se puede cargar, ya sea porque el servidor o la red fracasaron o porque el formato no es compatible.",
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproduccion de video se ha cancelado debido a un problema de corrupcion o porque el video utilizado cuenta con su navegador no soporta.",
"No compatible source was found for this video.": "Ninguna fuente compatible se encontro para este video."
}
Notes:
- The file name should always be in the format XX.json, where XX is the two letter value of the language reported to the browser (for options see the bottom of this document).
- For automatic inclusion at build time, add your language file to the /lang directory (see 'Adding Languages to Video.js below').
Adding Languages to Video.js
Additional language support can be added to Video.js in multiple ways.
- Create language scripts out of your JSON objects by using our custom grunt task
vjslanguages. This task is automatically run as part of the default grunt task in Video.JS, but can be configured to match your src/dist directories if different. Once these scripts are created, just add them to your DOM like any other script.
NOTE: These need to be added after the core Video.js script.
- Add your JSON objects via the videojs.addLanguage API. Preferably in the HEAD element of your DOM or otherwise prior to player instantiation.
<head>
<script>
videojs.options.flash.swf = '../node_modules/videojs-swf/dist/video-js.swf';
videojs.addLanguage('es', {
"Play": "Juego",
"Pause": "Pausa",
"Current Time": "Tiempo Actual",
"Duration Time": "Tiempo de Duracion",
"Remaining Time": "Tiempo Restante",
"Stream Type": "Tipo de Transmision",
"LIVE": "En Vivo",
"Loaded": "Cargado",
"Progress": "Progreso",
"Fullscreen": "Pantalla Completa",
"Non-Fullscreen": "No Pantalla Completa",
"Mute": "Mudo",
"Unmuted": "Activar sonido",
"Playback Rate": "Reproduccion Cambio",
"Subtitles": "Subtitulos",
"subtitles off": "subtitulos fuera",
"Captions": "Subtitulos",
"captions off": "subtitulos fuera",
"Chapters": "Capitulos",
"You aborted the video playback": "Ha anulado la reproduccion de video",
"A network error caused the video download to fail part-way.": "Un error en la red hizo que la descarga de video falle parte del camino.",
"The video could not be loaded, either because the server or network failed or because the format is not supported.": "El video no se puede cargar, ya sea porque el servidor o la red fracasaron o porque el formato no es compatible.",
"The video playback was aborted due to a corruption problem or because the video used features your browser did not support.": "La reproduccion de video se ha cancelado debido a un problema de corrupcion o porque el video utilizado cuenta con su navegador no soporta.",
"No compatible source was found for this video.": "Ninguna fuente compatible se encontro para este video."
});
</script>
</head>
- During a Video.js player instantiation. Adding the languages to the configuration object provided in the data-setup attribute.
<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>
Notes:
- This will add your language key/values to the videojs 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.
Setting Default Language in a Video.js Player
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 data-setup attribute. Valid options listed at the bottom of the page for reference.
<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>
Language Codes
The following is a list of official language codes.
NOTE: For supported language translations, please see the Languages Folder (/lang) folder located in the project root.
|