Ćwiczenia z informatyki

multimedia

Uwaga! Dodając pliki multimedialne na stronie internetowej zawsze musimy pamiętać o prawach autorskich.

Dobrym "testerem" jest YouTube.
Zalecam umieszczanie muzyki na licencji Creative Commons.
Można ją znależć na takich stronach jak np. jamendo.com

Audio

Podstawowy sposób dodania pliku audio na stronie jest następujący:

<audio src="muzyczka.mp3" controls></audio>

otrzymujemy efekt

Dodanie kilku typów plików muzycznych:
<audio controls> <source src="muzyczka.ogg" type="audio/ogg"> <source src="muzyczka.mp3" type="audio/mp3"> <a href="muzyczka.mp3">Pobierz plik</a> </audio>
i efekt...
Atrybuty znacznika <audio>:

controls - wyświetlanie przycisków "play, pause" oraz osi trwania pliku
```
<audio controls>
```
autoplay - automatyczny start pliku muzycznego
```
<audio autoplay>
```
loop - po zakończeniu odtwarzania pliku muzycznego, automatycznie odtwarzanie rozpocznie się od początku (muzyka w pętli)
```
<audio loop>
```
preload - określa buforowanie pliku audio przed jego odtworzeniem (szczególnie przy większych plikach jest to przydatne)
- możliwe wartości:
none (brak buforowania),
auto (plik będzie buforowany),
metadata (jedynie metadane zostaną zbuforowane)
```
<audio preload="auto">
```
muted - muzyka domyślnie wyciszona
```
<audio muted>
```

Video

Dodanie filmu jest bardzo podobne do dodania audio.
Stosujemy tu zapis:

<video controls>
  <source src="film.mp4" type="video/mp4" />
  <source src="film.ogg" type="video/ogg" />
  <source src="film.webm" type="video/webm" />
  Twoja przeglądarka nie wspiera znacznika video
</video>

Atrybuty znacznika <video>:

Poza atrybutami stosowanymi w audio możemy jeszcze użyć:

poster - obrazek wyświetlany przed uruchomieniem odtwarzania filmu
```
<video poster="obrazek.jpg">
```

przykład
po wprowadzeniu kodu:

<video controls poster="film.jpg" style="width:480px; height:320px;">
  <source src="film.mp4" type="video/mp4" />
  Twoja przeglądarka nie wspiera znacznika video
</video>

otrzymujemy:

YouTube

Film umieszczony w serwisie możemy wstawić do naszego projektu.
W tym celu:

Wybieramy film z serwisu YouTube
Klikamy przycisk [Udostępnij] poniżej filmu:
W otwartym oknie wybieramy [umieść]:
Kopiujemy wygenerowany kod, klikając [Kopiuj]:
Wkejamy kod do naszego pliku html
Usuwamy zaznaczony fragment kodu:
Zastępujemy opisem css:
Kasujemy:
Wynik naszych działań
Znacznik <iframe> pozwala nam na osadzanie obiektów (IFRAME: insert frame) w naszych dokumentach.
Jeśli serwis udostępnia wstawianie obiektu, możemy zawsze dodać do naszej strony film, animację, itp.

W serwisie vimeo należy wybrać zaznaczony kod... ...i dodać do naszego projeku, tak jak opisałem umieszczanie filmu z YouTube.

Osadzanie mapy google

Otwieramy stronę maps.google.pl
Wybieramy właściwą lokalizację np.:
W górnym, lewym rogu wybieramy menu
Następnie
W otwartym oknie wybiweramy:
Dostosowujemy wielkość mapy:
Klikamy:
Zapamiętany kod wklejamy do naszego projektu.