HTML
Elementy medialne
Szukaj…
Parametry
| Atrybut | Detale |
|---|---|
| szerokość | Ustawia szerokość elementu w pikselach. |
| wysokość | Ustawia wysokość elementu w pikselach. |
<source> | Definiuje zasoby plików audio lub wideo |
| tor | Definiuje ścieżkę tekstową elementów multimedialnych |
| sterownica | Wyświetla elementy sterujące |
| Automatyczne odtwarzanie | Automatycznie rozpocznij odtwarzanie multimediów |
| pętla | Odtwarza media w powtarzanym cyklu |
| wyciszony | Odtwarza multimedia bez dźwięku |
| plakat | Przypisuje obraz do wyświetlenia do momentu załadowania wideo |
Uwagi
Wsparcie w przeglądarkach
| Funkcja | Chrom | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Podstawowe wsparcie | 3.0 | 3.5 (1.9.1) | 9.0 | 10,50 | 3.1 |
<audio> : PCM w WAVE | (Tak) | 3.5 (1.9.1) | Bez wsparcia | 10,50 | 3.1 |
<audio> : Vorbis w WebM | (Tak) | 4.0 (2.0) | Bez wsparcia | 10,60 | 3.1 |
<audio> : Streaming Vorbis / Opus w WebM przez MSE | ? | 36,0 | ? | ? | ? |
<audio> : Vorbis in Ogg | (Tak) | 3.5 (1.9.1) | Bez wsparcia | 10,50 | Bez wsparcia |
<audio> : MP3 | (Tak) | (Tak) | 9.0 | (Tak) | 3.1 |
<audio> : MP3 w MP4 | ? | ? | ? | ? | (Tak) |
<audio> : AAC w MP4 | (Tak) | (Tak) | 9.0 | (Tak) | 3.1 |
<audio> : Opus in Ogg | 27,0 | 15,0 (15,0) | ? | ? | ? |
<video> : VP8 i Vorbis w WebM | 6.0 | 4.0 (2.0) | 9.0 | 10,60 | 3.1 |
<video> : VP9 i Opus w WebM | 29,0 | 28,0 (28,0) | ? | (Tak) | ? |
<video> : Streaming WebM przez MSE | ? | 42,0 (42,0) | ? | ? | ? |
<video> : Theora i Vorbis in Ogg | (Tak) | 3.5 (1.9.1) | Bez wsparcia | 10,50 | Bez wsparcia |
<video> : H.264 i MP3 w MP4 | (Tak) | (Tak) | 9.0 | (Tak) | (Tak) |
<video> : H.264 i AAC w MP4 | (Tak) | (Tak) | 9.0 | (Tak) | 3.1 |
| dowolny inny format | Bez wsparcia | Bez wsparcia | Bez wsparcia | Bez wsparcia | 3.1 |
Używanie `
Użyj elementu HTML lub <audio> , aby osadzić zawartość wideo / audio w dokumencie. Element wideo / audio zawiera jedno lub więcej źródeł wideo / audio. Aby określić źródło, użyj atrybutu src lub elementu <source> ; przeglądarka wybierze najbardziej odpowiedni.
Przykład tagu audio:
<!-- Simple video example -->
<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>
<!-- Video with subtitles -->
<video src="foo.webm">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!-- Simple video example -->
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
Your browser doesn't support HTML5 video tag.
</video>
Przykład tagu audio:
<!-- Simple audio playback -->
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
<!-- Audio playback with captions -->
<audio src="foo.ogg">
<track kind="captions" src="foo.en.vtt" srclang="en" label="English">
<track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>
Audio
HTML5 zapewnia nowy standard osadzania pliku audio na stronie internetowej.
Możesz osadzić plik audio na stronie za pomocą elementu <audio> :
<audio controls>
<source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Wideo
Możesz także osadzić wideo na stronie za pomocą elementu <video> :
<video width="500" height="700" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Nagłówek wideo lub tło
Dodanie filmu, który będzie odtwarzany automatycznie w pętli i nie będzie zawierał żadnych elementów sterujących ani dźwięku. Idealny do nagłówka wideo lub tła.
<video width="1280" height="720" autoplay muted loop poster="video.jpg" id="videobg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
</video>
Ten CSS zapewnia awarię, jeśli wideo nie może zostać załadowane. Pamiętaj, że zaleca się użycie pierwszej klatki wideo jako plakatu video.jpg.
#videobg {
background: url(video.jpg) no-repeat;
background-size: cover;
}
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow
