jQuery - video prehrávač

Nové technológie prinášajú mnho skvelých vecí. HTML5 ponúka tiež (okrem iného) tag video, ktorý umožňuje prehrávať videá bez použitia zásuvných modulov, ako je flash alebo java. Rozhodol som sa, urobiť si za pomoci jQuery vlastné nastaviteľné užívateľské rozhranie. Tento jQuery plug-in vie vykresliť tlačidlo prehrať / pozastaviť, zobrazuje na slideru pozícii aktuálne prehrávaného videa a umožňuje manuálne presun. Ďalej potom vie nastavovať hlasitosť. Všetko sa dá ovládať pomocou klávesových skratiek. Plug-in používa jQuery UI.

Ukážka plug-inu

Ukážka jQuery video prehrávača

implementácia:

<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>

nastavenie

.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

});

Galéria