HTML - osadzanie multimediów
Czasami musisz dodać muzykę lub wideo do swojej strony internetowej. Najłatwiejszym sposobem dodania wideo lub dźwięku do witryny internetowej jest dołączenie specjalnego tagu HTML o nazwie<embed>. Ten znacznik powoduje, że przeglądarka sama zawiera elementy sterujące dla automatycznie dostarczanych multimediów. Przeglądarka obsługuje tag <embed> i dany typ multimediów.
Możesz również dołączyć plik <noembed>tag dla przeglądarek, które nie rozpoznają tagu <embed>. Możesz na przykład użyć <embed>, aby wyświetlić wybrany film i<noembed> aby wyświetlić pojedynczy obraz JPG, jeśli przeglądarka nie obsługuje znacznika <embed>.
Przykład
Oto prosty przykład odtwarzania osadzonego pliku midi -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Atrybuty tagu <embed>
Poniżej znajduje się lista ważnych atrybutów, których można używać ze znacznikiem <embed>.
Note- Atrybuty align i autostart są przestarzałe w HTML5. Nie używaj tych atrybutów.
| Sr.No | Atrybut i opis |
|---|---|
| 1 | align Określa sposób wyrównywania obiektu. Można go ustawić na środku, w lewo lub w prawo . |
| 2 | autostart Ten atrybut logiczny wskazuje, czy nośnik powinien zostać uruchomiony automatycznie. Możesz ustawić wartość true lub false. |
| 3 | loop Określa, czy dźwięk powinien być odtwarzany w sposób ciągły (ustaw pętlę na true), określoną liczbę razy (wartość dodatnia), czy wcale (fałsz) |
| 4 | playcount Określa, ile razy ma być odtwarzany dźwięk. Jest to alternatywna opcja pętli, jeśli używasz IE. |
| 5 | hidden Określa, czy obiekt multimedialny ma być wyświetlany na stronie. Wartość fałszywa oznacza nie, a wartości prawdziwe oznaczają tak. |
| 6 | width Szerokość obiektu w pikselach |
| 7 | height Wysokość obiektu w pikselach |
| 8 | name Nazwa używana do odniesienia do obiektu. |
| 9 | src Adres URL obiektu do osadzenia. |
| 10 | volume Kontroluje głośność dźwięku. Może mieć wartość od 0 (wyłączone) do 100 (pełna głośność). |
Obsługiwane typy wideo
W tagu embed można używać różnych typów plików multimedialnych, takich jak filmy Flash (.swf), AVI (.avi) i MOV (.mov).
.swf files - to typy plików utworzone przez program Flash firmy Macromedia.
.wmv files - to typy plików Microsoft Windows Media Video.
.mov files - to format Quick Time Movie firmy Apple.
.mpeg files - to pliki filmowe utworzone przez grupę Moving Pictures Expert Group.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>To da następujący wynik -
Dźwięk w tle
Możesz użyć HTML <bgsound>, aby odtworzyć ścieżkę dźwiękową w tle Twojej strony internetowej. Ten tag jest obsługiwany tylko przez Internet Explorer, a większość innych przeglądarek ignoruje ten tag. Pobiera i odtwarza plik audio, gdy dokument główny jest po raz pierwszy pobierany przez użytkownika i wyświetlany. Plik dźwiękowy tła będzie również odtwarzany za każdym razem, gdy użytkownik odświeży przeglądarkę.
Note- Znacznik bgsound jest przestarzały i powinien zostać usunięty w przyszłej wersji HTML. Dlatego nie należy ich raczej używać, zaleca się użycie dźwięku znacznika HTML5 do dodania dźwięku. Wciąż jednak dla celów edukacyjnych, w tym rozdziale szczegółowo wyjaśnimy tag bgsound.
Ten znacznik ma tylko dwie pętle atrybutów i src . Oba te atrybuty mają takie samo znaczenie, jak wyjaśniono powyżej.
Oto prosty przykład odtworzenia małego pliku midi -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Spowoduje to wyświetlenie pustego ekranu. Ten znacznik nie wyświetla żadnego komponentu i pozostaje ukryty.
Internet Explorer może również obsługiwać tylko trzy różne pliki w formacie dźwiękowym - wav, format natywny dla komputerów PC; au, format natywny dla większości stacji roboczych Unix; i MIDI, uniwersalny schemat kodowania muzyki.
Znacznik obiektu HTML
HTML 4 wprowadza <object>element, który oferuje uniwersalne rozwiązanie do ogólnego dołączania obiektów. Plik<object> element pozwala autorom HTML określić wszystko, co jest wymagane przez obiekt do jego prezentacji przez klienta użytkownika.
Oto kilka przykładów -
Przykład 1
Możesz osadzić dokument HTML w samym dokumencie HTML w następujący sposób -
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Tutaj atrybut alt pojawi się na obrazku, jeśli przeglądarka nie obsługuje znacznika obiektu .
Przykład - 2
Możesz osadzić dokument PDF w dokumencie HTML w następujący sposób -
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Przykład - 3
Możesz określić niektóre parametry związane z dokumentem z rozszerzeniem <param>etykietka. Oto przykład osadzania pliku wav -
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Przykład - 4
Możesz dodać dokument Flash w następujący sposób -
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Przykład - 5
Możesz dodać aplet java do dokumentu HTML w następujący sposób -
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>Plik classidatrybut określa, której wersji wtyczki Java należy użyć. Możesz użyć opcjonalnego atrybutu codebase, aby określić, czy i jak pobrać środowisko JRE.