Kategorie
Kurs HTML

Multimedia

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 szansy 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>

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *