2

kurs

html

Lekcja 17: Multimedia

html

W celu zwiększenia atrakcyjności przekazu strony www możemy umieścić pliki audio oraz video.

audio

Pliki dźwiękowe umieszczamy za pomocą znaczników audio.

<audio src="sciezka_do_pliku_muzycznego" controls ></audio>


Zaleca się jednak zamieszczanie kilku formatów w celu zwiększania szans na odtworzenie jednego z nich w sytuacji, gdyby przeglądarka nie obsługiwała pozostałych.

<audio controls >
<source src="plik_muzyczny.wav" type="audio/wav" />
<source src="plik_muzyczny.mp3" type="audio/mpeg" />
<source src="plik_muzyczny.ogg" type="audio/ogg" />
"Plik audio nie jest obsługiwany przez przeglądarkę,"
</audio>

Dodatkowe właściwości odtwarzania:

  • controls - interfejs odtwarzacza
  • autoplay - automatycznie odtwarzanie po załadowaniu strony
  • loop - odtwarzanie ciągłe
  • preload - ładowanie pliku, nawet gdy nie zostanie odtworzony
  • muted - wyciszenie dźwięku

video

Pliki wideo umieszczamy za pomocą znaczników video.

<video src="sciezka_do_pliku_video" controls ></video>

Podobnie jak w przypadku plików audio zaleca się zamieszczanie kilku formatów.

<video controls >
<source src="plik_wideo.mp4" type="video/mp4" />
<source src="plik_wideo.ogv" type="video/ogg" />
"Plik wideo nie jest obsługiwany przez przeglądarkę,"
</video>

Dodatkowe właściwości odtwarzania:

  • controls - interfejs odtwarzacza
  • autoplay - automatycznie odtwarzanie po załadowaniu strony
  • loop - odtwarzanie ciągłe
  • preload - ładowanie pliku, nawet gdy nie zostanie odtworzony
  • muted - wyciszenie dźwięku
  • poster - obraz, który zostanie wyświetlony w oknie odtwarzacza wideo po załadowaniu strony do momentu uruchomienia filmu
  • width i height - szerokość i wysokość okna odtwarzacza wideo

Multimedia jako odsyłacz

W sytuacji niepewności, czy dany plik będzie odtwarzany przez przeglądarkę użytkownika, alternatywnym rozwiązaniem jest umieszczenie pliku w formie linku, który umożliwi zapisanie na dysku lub otworzy w domyślnym programie.

<a href="sciezka_do_pliku">Opis linku</a>
comments powered by Disqus

Do góry