jQuery - video přehrávač

Nové technologie přinášejí mnho skvělých věcí. HTML5 nabízí také (krom jiného) tag video, který umožňuje přehrávat videa bez použití zásuvných modulů, jako je flash nebo java. Rozhodl jsem se, udělat si za pomoci jQuery vlastní nastavitelné uživatelské rozhraní. Tento jQuery plug-in umí vykreslit tlačítko přehrát/pozastavit, zobrazuje na slideru pozici aktuálně přehrávaného videa a umožňuje manuální přesun. Dále pak umí nastavovat hlasitost. Vše se dá ovládat pomocí klávesových zkratek. Plug-in používá jQuery UI.

Ukázka plug-inu

Ukázka jQuery video přehrávače

Implementace:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('video').dPlayer({
            width: 750,
            height: 400
        });
    });
</script>

Nastavení

.dPlayer({
    // Element pro video
    video: this,
    // Šířka videa
    width: 700,
    // Výška videa
    height: 420,
    // Automatické spuštění
    autoplay: false,
    // Opakovat ve smyčce
    loop: false,
    // Funkce po stuštění videa
    onPlay: function(){},
    // Funkce po pauznutí videa
    onPause: function(){},
    // Funkce po přehrání celého videa
    onComplete: function(){},
    // Fallback - textová zpráva pro uživatele, jejichž prohlížeč není podporován
    fallback: "Please, download a correct browser.",
    // Použít vstupy z klávesnice
    keyboardInput: true

});

Galerie