Popcorn.locale

by popcornjs

HTML

<script src="https://raw.github.com/jbuck/popcorn-js/develop/popcorn.js"></script>
<video height="180" width="300" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<hr>
<button data-lang="en-US">English (US)</button>
<button data-lang="fr-CA">French (CA)</button>

<span id="message"></span>

CSS

html{font-family:arial;}

JavaScript

var $message = $("#message"),
    $language = $("button"),
    $pop = Popcorn("#video"), 
    greeting = {
        en: "Hello my friend",
        fr: "Bonjour mon ami"
    };

// Display a message to the user at the start of the video
$pop.exec( 0, function() {
   
    // Display a greeting in the language of the current locale
    $message.html(
       greeting[ Popcorn.locale.get().language ]
    ); 
});
// Listen for changes to the locale...
$pop.listen( "locale:changed", function() {
    // When the locale is changed, 
    // return to the beginning of the video
    if ( this.currentTime() > 0 ) {
        this.currentTime( 0 ).play();
    }
});
// When the language is selected, update Popcorn.locale
$language.bind("click", function() {
    Popcorn.locale.set( $(this).data("lang") );
});

//play the video
$pop.play();