Multimedia na stronie WWW

Myśląc o multimediach na stronie www mamy na myśli muzykę i filmy, które ją uatrakcyjnią. Do zamieszczania multimediów na stornie używa się znaczników <audio></audio> oraz <video></video>, które nie wymagają dodatkowych wtyczek z uwagi na to, iż ubogacają stronę o proste odtwarzacze.

Przykładowy kod:

Multimedia – przykładowy kod

Warto podkreślić, iż do pliku mulitmedialnego można zamieścić odnośnik taki jak do każdego innego pliku

<a href=”tutaj_jest_ścieżka_do_pliku_wraz_z_jego_nazwą>Tutaj tytuł utworu</a>

Spis treści

AUDIO

Generalnie do umieszczania plików dźwiękowych np.

  • MIDI (.mid, .midi)
  • MP3 (.mp3)
  • Wave Form Audio WAV (.wav)

używa się znaczników <audio></audio>. Znaczniki te posiadają dodatkowe właściwości i tak:

  • controls – panel sterujący odtwarzacza
  • loop – umożliwia odtwarzanie ciągłe
  • muted – wyciszenie
  • autoplay – automatyczne odtwarzanie po załadowaniu strony
  • preload – ładowanie pliku, lecz niekonieczne jego odtworzenie

Przykład:

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

Wynik:

Utwór muzyczny umieszczony na stronie internetowej przy pomocy znacznika <audio>

VIDEO

Analogicznie jak do plików dźwiękowych, pliki video umieszcza się w znaczniku <video></video>. Obsługiwanymi formatami pliku video są:

  • MPEG (.mpg, mpeg)
  • AVI (.avi)
  • MPEG-4 (.mp4)

W odróżnieniu od znacznika audio, dla video należy zdefiniować wysokość i szerokość odtwarzacza w którym wyświetlany będzie film. Właściwości znacznika <video>

  • controls – panel sterujący odtwarzacza
  • loop – umożliwia odtwarzanie ciągłe
  • muted – wyciszenie
  • autoplay – automatyczne odtwarzanie po załadowaniu strony
  • preload – ładowanie pliku, lecz niekonieczne jego odtworzenie
  • poster – wyświetla obraz przed odtworzeniem filmu
  • height – wysokość podawana w pikselach
  • width – szerokość podawana w pikselach

Przykład: 

<video height="500" width="500" controls>
        <source src="lidia.mp4" type="video/mp4">
        <source src="lidia.mpeg" type="video/mp4">
    </video>

Wynik:

Film umieszczony na stronie internetowej przy pomocy znacznika <video>

Na zakończenie warto wspomnieć jeszcze o formatach plików również obsługiwanych w HTML5. Są to:

format kontenera strumieni danych (obraz, dźwięk, napis)

  • Ogg (.ogg) format kontenera strumieni danych (obraz, dźwięk, napis)
  • WebM (.webm) format video do zastosowań internetowych

Źródła:

  1. https://www.w3schools.com/html/