Obraz i multimedia

1. Jakimi znacznikami wstawiamy grafikę na stronie i jakie formaty graficzne przyjmuje HTML?

<img src="źródło obrazka" alt="tekst alternatywny" />

Obsługa formatów: gifpngjpg; embedując - svnswf.

2. Jakim znacznikiem wstawiamy pliki audio i w jakich formatach możemy wstawić plik audio?

<audio controls autobuffer preload autoplay loop>
<source src="plik.mp3" />
<source src="plik.ogg" />
<source src="plik.wav" />
</audio>

Argumenty przy tagu <audio> oznaczają:

  • controls – wyświetlanie kontrolek do odtwarzania plików audio
  • autobuffer – buforowanie pliku audio
  • preload – ładowanie pliku audio po załadowaniu się strony
  • autoplay – odtwarzanie pliku audio po załadowaniu się strony
  • loop – zapętlanie utworu audio

Obsługa formatów dźwięku przez przeglądarki:

Przeglądarka Ogg MP3 WAV
Firefox 3.6+ + - +
Safari 5+ - + +
Chrome 6+ + + -
Opera 10.5+ + - +
Internet Explorer 9+ - + +

3. Jakim znacznikiem i w jaki sposób wstawiamy plik wideo i jakiego typu?

<video width="640" height="480" controls autoplay loop preload>
<source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source>
<source src="video.ogv" type="video/ogg; codecs='theora, vorbis'"></source>
</video>

Oznaczenie argumentów tagu <video>:

  • controls - wyświetla kontrolki video na ekranie
  • autoplay - uruchamia video po załadowaniu strony
  • loop - odtwarza video w pętli
  • preload - wczytywanie pliku po załadowaniu się strony

Obsługa formatów:

Przeglądarka Theora/Vorbis/Ogg H.264/AAC/MP4 WebM
Firefox 3.5+ + - -
Safari 3+ - + -
Chrome 5+ + + +
Opera 10.5+ + - +
Internet Explorer 9+ - + -

Dzięki, człowieku!

4. Utwórz stronę zawierającą:

  • mały i duży obrazek
  • plik wideo
  • plik audio
<!DOCTYPE html>
<html>
<head>
<title>Ćwiczenie piąte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<img src="http://modmyi.com/images/Messany/NovellLogo.jpg" width="50px" height="50px" /><br />
<img src="http://modmyi.com/images/Messany/NovellLogo.jpg" />
<hr />
<video controls>
<source src="http://www.w3schools.com/tags/movie.mp4" />
</video>
<hr />
<audio controls>
<source src="http://www.kontestacja.net/audio/35/Odcinek%20128%20-%20Plain%20Porter.mp3" />
</audio>
</body>
</html>

 

Dodaj komentarz

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

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.