Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Kurs HTML5 - multimedia

W dzisiejszym kursie przedstawię w jaki sposób wstawiać elementy multimedialne takie jak filmy czy muzyka jedynie za pomocą HTML5. Zastępujemy dzięki temu najczęściej używany do tego Flash (który generował spore obciążenie dla naszego komputera).

Są one obsługiwane przez większość przeglądarek (jedynie Internet Explorer 8 lub niższy nie wspiera tych znaczników).

Przykładowy kod dla filmu prezentuje się tak:

 <video controls="">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" /><p>Twoja przeglądarka nie wspiera znacznika video</p></video>

Zaś źródło plików muzycznych przedstawia się następująco:

<audio controls="">
  <source src="http://devboard.pl/video/vincent.mp3" type="audio/mp4" />
  <source src="http://devboard.pl/video/vincent.ogg" type="audio/ogg" /><p>Twoja przeglądarka nie wspiera znacznika audio</p></audio>

A teraz pokrótce wytłumaczę co możemy dodać do samego znacznika <video>/ <audio> </audio> </video> , a także co oznaczają znaczniki <source />.

Atrybuty, które możemy dodać do <video> </video> :
  • controls ( <video controls=""> </video> ) – dzięki temu będą wyświetlane przyciski „play, pause” oraz oś trwania filmu
  • autoplay ( <video autoplay=""> </video> ) – automatyczny starty filmu
  • loop ( <video loop=""> </video> ) – po zakończeniu odtwarzania film, automatycznie wyświetlanie rozpocznie się od początku (film w pętli)
  • width, height ( <video height="”300px”" width="”300px”"> </video> ) – wymiary wyświetlanego bloku z filmem
  • preload ( <video preload="auto"> </video> ) - określa buforowanie filmu przed jego wyświetleniem (szczególnie przy większych plikach jest to przydatne) – możliwe wartości: none (brak buforowania), auto (plik będzie buforowany), metadata(jedynie metadane zostaną zbuforowane)
  • poster ( <video poster="obrazek.jpg"> </video> ) - określa okładkę pliku
  • muted ( <video muted=""> </video> ) – film domyślnie wyciszony

Atrybuty, które możemy dodać do <audio> </audio> :
  • controls ( <video controls=""> </video> ) – dzięki temu będą wyświetlane przyciski „play, pause” oraz oś trwania pliku
  • autoplay ( <audio autoplay=""> </audio> ) – automatyczny start pliku muzycznego
  • loop ( <audio loop=""> </audio> ) – po zakończeniu odtwarzania pliku muzycznego, automatycznie odtwarzanie rozpocznie się od początku (muzyka w pętli)
  • preload ( <audio preload="auto"> </audio> ) - określa buforowanie pliku audio przed jego odtworzeniem (szczególnie przy większych plikach jest to przydatne) – możliwe wartości: none (brak buforowania), auto (plik będzie buforowany), metadata(jedynie metadane zostaną zbuforowane)
  • muted ( <audio muted=""> </audio> ) – muzyka domyślnie wyciszona




  •  
  •  
  • Element <source /> określa nam źródło pliku. Nie jest on jedynie wykorzystywany przy <video> </video> czy <audio> </audio> . Teraz atrybuty jakie możemy użyć do znacznika <soruce></soruce>:
    • src (<soruce><soruce src="„link.ogg”"></soruce></soruce>) – link do pliku z filmem
    • type (<soruce><soruce src="„link.ogg”"><soruce type="”video/ogg”"></soruce></soruce></soruce>) - MIME typ danego pliku (patrz tabelki poniżej)

    Wykaz obsługi plików wideo w różnych przeglądarkach:
    Przeglądrka MP4 WebM Ogg
    Internet Explorer 9+ TAK NIE NIE
    Chrome 6+ YES YES YES
    Firefox 3.6+ NIE TAK TAK
    Safari 5+ TAK NIE NIE
    Opera 10.6+ NIE TAK TAK

    Patrząc na powyższą tabelkę od razu widzimy, że najwygodniej jest użyć dwóch formatów MP4 + wymiennie WebM i Ogg, tak aby wyświetlały się one poprawnie na każdej przeglądarce.

    A teraz wykaz formatów wideo i ich typów MIME:

    Format MIME-type
    MP4 video/mp4
    WebM video/webm
    Ogg video/ogg

    Wykaz obsługi plików audio w różnych przeglądarkach:
    Przeglądarka MP3 Wav Ogg
    Internet Explorer 9+ TAK NIE NIE
    Chrome 6+ TAK TAK TAK
    Firefox 3.6+ NIE TAK TAK
    Safari 5+ TAK TAK NIE
    Opera 10+ NIE TAK TAK

    A teraz wykaz formatów audio i ich typów MIME:

    Format MIME-type
    MP3 audio/mpeg
    Ogg audio/ogg
    Wav audio/wav

    Patrząc na powyższą tabelkę od razu widzimy, że najwygodniej jest użyć dwóch formatów MP3 + wymiennie Wav i Ogg, tak aby wyświetlały się one poprawnie na każdej przeglądarce.

    Na koniec chciałbym przedstawić działający przykład wideo oraz audio na stronie:

     

    Żródło:

    <soruce><soruce src="„link.ogg”"><soruce type="”video/ogg”"><video controls="" height="300" id="demo" loop="" poster="http://devboard.pl/data/files/image/v/thumbs/280_150_smart_original_99_jdbssc.png" width="280" height="150" width="300">
      <source src="http://devboard.pl/video/example.mp4" type="video/mp4" />
      <source src="http://devboard.pl/video/example.ogg" type="video/ogg" />
      <source src="http://devboard.pl/video/example.webm" type="video/webm" /><p>Twoja przeglądarka nie wspiera znacznika video</p></video> </soruce></soruce></soruce>
     

    A tutaj źródło:

    <soruce><soruce src="„link.ogg”"><soruce type="”video/ogg”"><audio controls="" muted="">
      <source src="http://devboard.pl/video/vincent.mp3" type="audio/mp4" />
      <source src="http://devboard.pl/video/vincent.ogg" type="audio/ogg" /><p>Twoja przeglądarka nie wspiera znacznika audio</p></audio></soruce></soruce></soruce>