jQuery - video přehrávač

JavaScript jQuery Zdrojákoviště jQuery - video přehrávač

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 587x (19.02 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Program pro vás napsal Drahomír Hanák
Avatar
Jak se ti líbí článek?
1 hlasů
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.
Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Aktivity (1)

 

 

Komentáře

Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:3.9.2012 17:56

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:3.9.2012 18:50

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.