The Blog

By / Egzamin E.14Egzamin EE.09HTML

HTML: elementy osadzone.

Materiały audio-video

Na stronach internetowych możemy osadzić dźwięk i materiał filmowy. Używamy w tym celu odpowiednio znaczników <audio> oraz <video>, w których dodatkowo znajduje się znacznik źródła <source>, definiujący źródło, z którego ma zostać pobrany materiał multimedialny.

Dopisek control w znacznikach <audio> oraz <video> dodaje menu, za którego pomocą możemy kontrolować odtwarzanie danego multimedia.

Wstawianie pliku dźwiękowego na stronę:

<audio controls>
  <source src="audiofile.ogg" type="audio/ogg">
  <source src="audiofile.mp3" type="audio/mpeg">
  Twoja przeglądarka nie wspiera tagu audio.
</audio>

Wstawianie pliku wideo na stronę:

<video width="320" height="240" controls>
  <source src="videofile.mp4" type="video/mp4">
  <source src="videofile.ogg" type="video/ogg">
  Twoja przeglądarka nie wspiera tagu video.
</video>

Atrybutami znaczników <audio> oraz <video> są wcześniej wspomniane control oraz autoplay, które pozwala na automatyczne odtwarzanie i loop zapętlający dany materiał audio/video.

Automatycznie włączający się i zapętlający plik wideo:

<video width="320" height="240" controls autoplay loop>
  <source src="videofile.mp4" type="video/mp4">
  <source src="videofile.ogg" type="video/ogg">
  Twoja przeglądarka nie wspiera tagu video.
</video>

Obiekty osadzone

Możemy wstawiać obiekty multimedialne .swf, .pdf i inne, za pośrednictwem znaczników <embed> oraz <object>. W obu wypadkach źródło definiujemy za pomocą atrybutu src, a typ pliku za pomocą atrybutu type.

Osadzanie pliku pdf za pomocą <embed>:

<embed type="application/pdf" src="object.pdf">

Osadzanie pliku pdf za pomocą <object>:

	<object type="pdf" data="object.pdf">
  		Twoja przeglądarka nie obsługuje znacznika object
	</object>

Witryna w witrynie

Od wersji HTML5 możemy załadować zawartość innej strony internetowej we własnej witrynie, za pomocą znacznika <iframe>. Źródło strony wstawiamy za pomocą atrybutu src=””.

Zamieszczanie innej witryny internetowej za pomocą znacznika <iframe>

<p>Źródło: https://wiki.creativecommons.org/</p>
<iframe src="https://wiki.creativecommons.org/” width="100%" height="300px">
Twoja przeglądarka nie obsługuje znacznika iframe
</iframe>

Posiada on atrybut, który reguluje sposób, w jaki jest wyświetlana zawartość innej strony, jest to: sandbox, który ogranicza oddziaływanie strony z ramki ma witrynę, w której jest zamieszczona.

Wartości atrybutu sandbox:

(domyślnie) -> wszystkie restrykcje
allow-top-navigation -> umożliwia nawigację po stronie 
allow-forms -> pozwala wysyłać formularze
allow-pointer-lock -> pozwala używać API
allow-popups -> nie blokuje wyskakujących okienek
allow-same-origin -> zawartość ramki traktowana tak samo jak pozostała zawartość strony
allow-scripts -> umożliwia wykonywanie skryptów

Zamieszczanie innej witryny internetowej za pomocą znacznika <iframe> z atrybutem sandbox:

<p>Źródło: https://wiki.creativecommons.org/</p>
<iframe src="https://wiki.creativecommons.org/” width="100%" height="300px" sandbox="">
Twoja przeglądarka nie obsługuje znacznika iframe
</iframe>

Autor tekstu: Jacek Woźniak

kompendiumEE09

Jestem projektem wykonanym przez czwórkę znajomych mających podobne zainteresowania. Możesz znaleźć wszystkie materiały z zakresu E14 na stronie: http://danda.e-kei.pl/jacek/kompendiumEE_IX/