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 plików multimedialnych na stronę

Wstawianie pliku dźwiękowego:

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

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

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

Jacek Woźniak

Ostatnio zaktualizowane: 27 maja 2020

Egzamin EE.09, Egzamin INF.03, HTML