Kaedah asas untuk membenamkan main balik audio dan video dalam halaman web menggunakan petua tutorial HTML5

Kaedah asas untuk membenamkan main balik audio dan video dalam halaman web menggunakan petua tutorial HTML5_html5

WBOY

Lepaskan： 2016-05-16 15:45:52

asal

3008 orang telah melayarinya

Ciri HTML5 termasuk sokongan audio dan video asli tanpa Flash.

Teg

HTML5

Benamkan video
Berikut ialah cara paling mudah untuk membenamkan fail video dalam halaman web:

Kod XML/HTMLSalin kandungan ke papan keratan

<video src="foo.mp4" lebar="300" tinggi="200" mengawal>
Penyemak imbas anda tidak menyokong elemen <video>.
video>

Spesifikasi draf HTML5 semasa tidak menyatakan format video mana yang perlu disokong oleh penyemak imbas dalam teg video. Tetapi format video yang paling biasa digunakan ialah:

Ogg: Fail Ogg dengan pengekod video Thedora dan pengekod audio Vorbis.

mpeg4: Fail MPEG4 dengan pengekod video H.264 dan pengekod audio AAC.

Kami boleh menentukan fail media menggunakan teg dengan jenis media dan atribut lain. Elemen video membenarkan berbilang elemen sumber dan penyemak imbas akan menggunakan format pertama yang diiktiraf:

Kod XML/HTML

Salin kandungan ke papan keratan

>
<html>
<badan>
<video lebar="300" tinggi="200" mengawal automain>
<sumber src="/html5 /foo.ogg" taip="video/ogg" /> ;
<sumber src="/html5 /foo.mp4" taip="video/mp4" /> ;
Pelayar anda tidak menyokong elemen <video> .
video>
badan>
html>

Video 属性规范
video HTML5 标签可以使用多个属性控制外观和感觉以玜可以使用多个属性控制外观和感觉以玜及：外观和感觉以玜及：外观和感觉以玜及🎜>

Benamkan audio
HTML5 menyokong teg

Kod XML/HTMLSalin kandungan ke papan keratan

<audio src="foo.wav" mengawal automain>
Penyemak imbas anda tidak menyokong elemen <audio>.
audio>

Spesifikasi draf HTML semasa belum lagi menentukan format audio mana yang perlu disokong oleh penyemak imbas dalam teg audio. Tetapi format audio yang paling biasa digunakan ialah ogg, mp3 dan wav.

Kami boleh menentukan media menggunakan teg dengan jenis media dan atribut lain. Elemen Audio membenarkan berbilang elemen sumber dan penyemak imbas akan menggunakan format pertama yang diiktiraf:

Kod XML/HTML

Salin kandungan ke papan keratan

>
<html>
<badan>
<audio mengawal automain>
<sumber src="/html5 /audio.ogg" taip="audio/ogg" /> ;
<sumber src="/html5 /audio.wav" taip="audio/wav" /> ;
<audio>.

audio

> badan> html>

Spesifikasi atribut audio

Teg audio HTML5 boleh menggunakan berbilang atribut untuk mengawal penampilan, rasa dan pelbagai fungsi kawalan:

属性	描述
autoplay	如果指定这个布尔值属性，只要没停止加载数据，音频就会立刻自动开始播放。
autobuffer	如果指定这个布尔值属性，即使没有设置自动播放，音频也会自动开始缓冲。
controls	如果指定这个属性，表示允许用户控制音频播放，包括音量控制，快进以及暂停/恢复播放。
loop	如果指定这个布尔值属性，表示允许音频播放结束后自动回放。
preload	这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。
src	要嵌入的音频 URL。可选，可以在音频块里面使用元素指定要嵌入的音频来替代。

Mengendalikan acara media
Teg audio dan video HTML5 boleh menggunakan berbilang atribut untuk mengawal pelbagai fungsi kawalan menggunakan JavaScript:

事件	描述
abort	播放中止时生成这个事件。
canplay	足够的数据可用并且媒体可以播放时生成这个事件。
ended	播放完成时生成这个事件。
error	发生错误时生成这个事件。
loadeddata	媒体第一帧载入完成时生成这个事件。
loadstart	开始加载媒体时生成这个事件。
pause	播放暂停时生成这个事件。
play	播放开始或者恢复时生成这个事件。
progress	定期通知媒体下载进度时生成这个事件。
ratechange	播放速度改变时生成这个事件。
seeked	快进操作完成时生成这个事件。
seeking	快进操作开始时生成这个事件。
suspend	媒体加载被暂停时生成这个事件。
volumechange	音频音量变化时生成这个事件。
waiting	请求操作（比如播放）被延迟，等待另一个操作完成（比如快进）时生成这个事件。

Berikut ialah contoh yang membenarkan video tertentu dimainkan:

Kod XML/HTMLSalin kandungan ke papan keratan

>
<kepala>
<skrip taip="teks/ javascript">
fungsi PlayVideo(){
var v = dokumen.getElementsByTagName("video")[0]; >
skrip>
kepala>
<html>
<badan>
<borang>
<video lebar="300" tinggi="200" src="/html5/foo.mp4">
<video>.

video

> <

input taip="butang" onclick="PlayVideo();" nilai="Main"/> borang> badan> html>

Mengkonfigurasi Jenis Media Pelayan

Kebanyakan pelayan tidak menyediakan media Ogg atau mp4 menggunakan jenis MIME yang betul secara lalai, jadi kami mungkin perlu menambah konfigurasi yang sesuai.

Salin kod

Kodnya adalah seperti berikut:AddType audio/ogg .oga AddType audio/ wav .wav

AddType video/ogg .ogv .ogg

AddType video/mp4 .mp4