jQuery - video přehrávač

JavaScript jQuery Zdrojákoviště 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


 

Stáhnout

Staženo 581x (19.02 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Drahomír Hanák
Avatar
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Jak se ti líbí článek?
Celkem (1 hlasů) :
55555


 


Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery

 

 

Komentáře

Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:

mě trochu zlobí ta ukázková verze na tvém webu

 
Odpovědět 3.9.2012 17:56
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Daniel Vítek
Drahomír Hanák:

To je protože tam nejsou styly z jQuery UI. Jinak ten kód video přehrávače plánuji přepsat do nějaké čitelnější podoby.

 
Odpovědět 3.9.2012 18:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.