Asa cum ati aflat mai devreme, printre lucrurile noi aduse de HTML 5 se vor afla si noile elemente <video>, respectiv <audio>. Scopul este oferirea de functionalitati asemanatoare celor intalnite la playerele audio si video, precum stop, pauza, marirea/micsorarea volumului, acestea fiind obtinute pana acum doar prin integrarea de plugin-uri ca Windows Media, QuickTime, si evident cunoscutul Flash Player. Momentan suport pentru acestea este oferit de Firefox 3.5, Thunderbird 3 , SeaMonkey 2.
Adaugarea media in HTML este acum foarte simpla :
Exemplu 1
Mai multe fisiere sursa pot fi specificate prin elementul source, de exemplu pentru a permite rularea de video/audio codate in diverse formate pentru diferite browsere.
Exemplu 2
Va incerca intai formatul OGG, daca este suportat, altfel va incerca alternativa MPEG-4. In plus, se pot explicita direct codecurile necesare pentru fisierul media, cu avantaje clare.
Exemplu 3
Aici specificam ca video-ul are nevoie de codecurile respective, si chiar daca browser-ul suporta OGG, dar nu si aceste codecuri, el nu va rula. In plus, daca atributul type nu este specificat, acesta este cerut serverului, si verificat daca poate fi utilizat sau nu. Daca prima sursa nu este buna, se incearca urmatoarea ,iar daca nici una din ele nu este valida, ne vom trezi cu un event de eroare.
Odata ce am adaugat media in documentul HTML, folosind aceste elemente, le putem controla de exemplu prin cod JavaScript : (pentru start/restart se poate in urmatorul fel)
Exemplu 4
Intai specificam elementul video (aici primul din document), iar apoi apelam metoda play().
Alte exemple de event-uri utlizate sunt :
- abort, canplay (cand am suficienta data pentru cateva frame-uri din video), dataunavailable, empty, ended, error, loadstart, pause, play, ratechange (cand se modifica viteza de playback), suspend, volumechange.
Putem reactiona la astfel de evenimente foarte usor, atasand un event listener, in functie de ce eveniment ne intereseaza. Acesta poate apela de exemplu metoda play().
Exemplu 5
Un buton pentru play/pause se poate face asa :
Exemplu 6
Daca browser-ul nu suporta media HTML 5, se poate recurge la alte alternative; incerc mai intai sa folosesc HTML 5 video, iar daca nu trec la o alta metoda, fie Flash, sau un applet Java, etc.
Flash :
Exemplu 7
Java :
Exemplu 8
Tagul audio are urmatoarele atribute :
- autobuffer (loadingul se face la incarcarea paginii)
- autoplay (va incepe imediat ce este gata )
- controls (display controale de tipul buton pentru play)
- src
In plus, tagul video are atribute ca:
- height si width (in pixeli)
- loop (daca este prezent, atunci cand media se termina, va incepe de la capat)
Mai multe detalii la
1 Comment(s)
Comments RSS TrackBack Identifier URI
Blogul nostru
Cu o chestie ca asta chiar devine interesant html5.