[MCSD 70-480] Implementacja mediów

Umieszczanie mediów na stronach internetowych to temat śliski. Umieszczając plik dźwiękowy, albo wideo na stronie po pierwsze zwiększa nam czas ładowania strony, a po drugie to właściwie nie ma dużego sensu w związku z tym, że wszystko jest na YouTubie 🙂 Tak czy inaczej jest to część przygotowań do egzaminu więc trzeba to przerobić.

Implementacja mediów

Media czyli wideo, albo audio możemy osadzić na naszej stronie w bardzo prosty sposób. Do najprostszych zastosowań wystarczy nam taki kod:

<video src="samplevideo.mp4" autoplay></video>

I już nasz pliczek filmowy po wejściu na stronie pojawi się w ładnym okienku odtwarzacza i zacznie grać. Oczywiście wszyscy wiedzą, że autoodtwarzalne pliki wideo czy audio na stronie to jedna z najbardziej wkurwiających rzeczy na świecie. Więc o atrybucie autoplay pamiętamy tylko w kontekście nauki i ciekawostki, ale absolutnie nigdy z niego nie korzystamy. Myślę nawet, że spokojnie jeśli Wasz klient będzie na to nalegał to możecie się powołać na klauzulę sumienia 🙂

Ogólnie dla znacznika <video> mamy takie atrybuty:

Atrybut Opis
 src Atrybut dosyć oczywisty. Żeby wideo się odtworzyło to musi mieć z czego. src wskazuje na źródło pliku (może to być zarówno zasób lokalny, jak i adres URL).
 autoplay  Ten atrybut już omawiałem. Zakazany do używania, ale niestety wciąż nadużywany na stronach. Dodanie go powoduje automatyczne odtwarzanie filmu zaraz po załadowaniu strony
 controls  Atrybut nieco podobny do autoplay w sensie użycia. Nie przekazujemy żadnych parametrów tylko po prostu wpisujemy w znaczniku controls. I wtedy niespodzianka, pojawiają się kontrolki do sterowania filmem.
 height/width Sprawa prosta. W tych argumentach definiujemy wysokość i szerokość naszego odtwarzacza.
 loop  Atrybut, który definiuje czy filmik ma się wyświetlić raz od początku do końca, czy ma być powtarzany.
 poster  To chyba najciekawsza opcja. Jeśli nie mamy ustawionego autoplay to za pomocą tego atrybutu możemy zdefiniować obrazek, który będzie się wyświetlał przed rozpoczęciem odtwarzania. Może to być screen z filmiku, albo coś kompletnie innego.

Umieszczając plik wideo na stronie trzeba pamiętać jeszcze o jednej rzeczy. Nie każda przeglądarka obsłuży nam wszystkie typy plików. Dlatego też najlepiej mieć pliki w różnych formatach i na stronie umieścić je w następujący sposób.

<video controls height="400" width="600" poster="picture.jpg">
  <source src="samplevideo.ogv" type="video/ogg"/>
  <source src="samplevideo.mp4" type="audio/mp4"/>
  <object>      

Video is not supported by this browser.

  </object>
</video>

 

No i to właściwie wszystko jeśłi chodzi o umieszczanie plików wideo na stronie.

Dokładnie tak samo wszystko działa w przypadku plików dźwiękowych. W związku z tym kod:

<audio controls>
  <source src="sample.mp3" type="audio/mp3"/>
  <source src="sample.ogg" type="audio/ogg"/>
  <p>Your browser does not support HTML5 audio.</p>
</audio>

powinien być już w 100% zrozumiały 🙂

Related posts

  • Pingback: dotnetomaniak.pl()

  • Bardzo mi się podoba ten cykl:) Sama się przymierzam od dawna do egzaminów. Chyba brakowało mi takiego „ludzkiego” podejścia:) Będę śledzić.

    • Kajetan Duszyński

      Hej. Dzięki wielkie za te słowa. Zawsze miło usłyszeć to, że ktoś to czyta a dodatkowo jeszcze się podoba. To daje wielkiego kopa motywacyjnego 🙂