HTML 多媒體
Web 上的多媒體指的是音效、音樂(lè)、視頻和動(dòng)畫(huà)
不同的瀏覽器以不同的方式處理音效、動(dòng)畫(huà)和視頻
某些元素能夠以內(nèi)聯(lián)的方式處理，而某些則需要額外的插件
多媒體元素（比如視頻和音頻）存儲(chǔ)于媒體文件中
確定媒體類型的最常用的方法是查看文件擴(kuò)展名
多媒體元素也擁有帶有不同擴(kuò)展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4
MP4 格式是一種視頻格式
HTML5 、Flash 播放器以及優(yōu)酷等視頻網(wǎng)站均支持它
| 視頻格式 | 文件 | 描述 |
|---|---|---|
| AVI | .avi | Audio Video Interleave格式是由微軟開(kāi)發(fā)，所有運(yùn)行 Windows 的計(jì)算機(jī)都支持 AVI 格式 |
| WMV | .wmv | Windows Media格式是由微軟開(kāi)發(fā)，但是如果未安裝額外的組件，就無(wú)法播放 Windows Media 電影 |
| MPEG | .mpg/.mpeg | Moving Pictures Expert Group格式是跨平臺(tái)的，得到了所有最流行的瀏覽器的支持 |
| QuickTime | .mov | QuickTime 格式是由蘋(píng)果公司開(kāi)發(fā)，但是 QuickTime 電影不能在沒(méi)有安裝額外的（免費(fèi)）組件的 Windows 計(jì)算機(jī)上播放 |
| RealVideo | .rm/.ram | RealVideo格式是由 Real Media 針對(duì)因特網(wǎng)開(kāi)發(fā)，允許低帶寬條件下（在線視頻、網(wǎng)絡(luò)電視）的視頻流 |
| Flash | .swf/.flv | Flash (Shockwave) 格式是由 Macromedia 開(kāi)發(fā)的。Shockwave 格式需要額外的組件來(lái)播放。但是該組件會(huì)預(yù)裝到 Firefox 或 IE 之類的瀏覽器上。 |
| Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一種針對(duì)因特網(wǎng)的新格式。事實(shí)上，YouTube 推薦使用 MP4。YouTube 接收多種格式，然后全部轉(zhuǎn)換為 .flv 或 .mp4 以供分發(fā)。越來(lái)越多的視頻發(fā)布者轉(zhuǎn)到 MP4，將其作為 Flash 播放器和 HTML5 的因特網(wǎng)共享格式 |
| 聲音格式 | 文件 | 描述 |
|---|---|---|
| MIDI | .mid/.midi | Musical Instrument Digital Interface是一種針對(duì)電子音樂(lè)設(shè)備（比如合成器和聲卡）的格式，MIDI 文件不含有聲音，但包含可被電子產(chǎn)品（比如聲卡）播放的數(shù)字音樂(lè)指令。因?yàn)?MIDI 格式僅包含指令，所以 MIDI 文件極其小巧，同時(shí)得到了廣泛的平臺(tái)上的大量軟件的支持。大多數(shù)流行的網(wǎng)絡(luò)瀏覽器都支持 MIDI |
| RealAudio | .rm/.ram | RealAudio 格式是由 Real Media 針對(duì)因特網(wǎng)開(kāi)發(fā)的。該格式也支持視頻。該格式允許低帶寬條件下的音頻流（在線音樂(lè)、網(wǎng)絡(luò)音樂(lè)）。由于是低帶寬優(yōu)先的，質(zhì)量常會(huì)降低 |
| Wave | .wav | waveform格式由IBM和微軟開(kāi)發(fā)。所有運(yùn)行 Windows 的計(jì)算機(jī)和所有網(wǎng)絡(luò)瀏覽器（除了 Google Chrome）都支持它 |
| WMA | .wma | Windows Media Audio，質(zhì)量?jī)?yōu)于 MP3，兼容大多數(shù)播放器，除了 iPod，同時(shí)WMA 文件可作為連續(xù)的數(shù)據(jù)流來(lái)傳輸，這使它對(duì)于網(wǎng)絡(luò)電臺(tái)或在線音樂(lè)很實(shí)用 |
| MP3 | .mp3/.mpga | MP3 文件實(shí)際上是 MPEG 文件的聲音部分。MPEG 格式最初是由運(yùn)動(dòng)圖像專家組開(kāi)發(fā)的。MP3 是其中最受歡迎的針對(duì)音樂(lè)的聲音格式。期待未來(lái)的軟件系統(tǒng)都支持它 |
HTML 插件 plug-in
插件是擴(kuò)展瀏覽器標(biāo)準(zhǔn)功能的計(jì)算機(jī)程序
大多數(shù)瀏覽器不再支持 Java Applet 和插件
所有瀏覽器均不再支持 ActiveX 控件
在現(xiàn)代瀏覽器中，對(duì) Shockwave Flash 的支持也已關(guān)閉
音頻 audio
需要諳熟大量技巧，以確保音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放
可使用 <object> 或 <embed> 標(biāo)簽來(lái)將插件添加到 HTML 頁(yè)面
<embed> 標(biāo)簽和<object> 標(biāo)簽都可以定義外部（非 HTML）內(nèi)容的容器
<embed heigth="60" width="150" src="/i/horse.mp3"></embed>
<object height="100" width="100" data="/i/horse.mp3"></object>
<audio controls="controls">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
為了使這段音頻在 Firefox 和 Opera 中同樣有效，添加了一個(gè) ogg 類型的文件
如果失敗，會(huì)顯示錯(cuò)誤消息
使用超鏈接的方式
如果網(wǎng)頁(yè)包含指向媒體文件的超鏈接，大多數(shù)瀏覽器會(huì)使用“輔助應(yīng)用程序”來(lái)播放文件
<p><a href="/i/song.mp3">Play MP3</a></p>
<p><a href="i/bird.wav">Play WAV</a></p>
視頻 video
<body>
<video width="320" height="240" controls="controls"autoplay="autoplay">
<source src="/i/movie.ogg" type="video/ogg" />
<source src="/i/movie.mp4" type="video/mp4" />
<source src="/i/movie.webm" type="video/webm" />
<object data="/i/movie.mp4" width="320" height="240">
<embed width="320" height="240" src="/i/movie.swf" />
</object>
</body>
使用超鏈接
<a href="movie.swf">Play a video file</a>
iPad 和 iPhone 不能顯示 Flash 視頻
YouTube
這個(gè)部分需要您的瀏覽器能夠訪問(wèn)YouTube
但是使用Bilibili也可以做到，使用時(shí)注意IP地址，二者不可同時(shí)訪問(wèn)
將視頻轉(zhuǎn)換為不同的格式可能既困難又耗時(shí)
一個(gè)更簡(jiǎn)單的解決方案是讓 YouTube 在您的網(wǎng)頁(yè)中播放視頻文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-469500.html
保存（或播放）視頻時(shí)，YouTube 會(huì)顯示一個(gè) id（例如 ih1l6wb7LhU）
可以使用這個(gè) id，并在 HTML 代碼中引用您的視頻文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-469500.html
1. 視頻上傳到 YouTube
2. 記下視頻 id
3. 網(wǎng)頁(yè)中定義 <iframe> 元素
4. src 屬性指向視頻的 URL
5. 使用 width 和 height 屬性來(lái)規(guī)定播放器的尺寸
6. 向 URL 添加其他參數(shù)
<iframe width="720" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>
B站可以直接復(fù)制嵌入代碼，但是最好自己設(shè)置寬高
<iframe src="//player.bilibili.com/player.html?aid=684057457&bvid=BV1nU4y1m7dh&cid=719387188&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
可以通過(guò)在 YouTube URL 上添加 autoplay=1 來(lái)讓視頻在用戶訪問(wèn)頁(yè)面時(shí)自動(dòng)開(kāi)始播放
在大多數(shù)情況下，Chromium 瀏覽器都不允許自動(dòng)播放。但始終允許靜音自動(dòng)播放
在 autoplay=1 之后添加 mute=1，可讓您的視頻自動(dòng)開(kāi)始播放（但已靜音）
<iframe width="420" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>
添加 loop=1 會(huì)讓視頻永遠(yuǎn)循環(huán)
值 0（默認(rèn)）：視頻將播放一次
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>
添加 controls=0 會(huì)使視頻播放器不顯示控件
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>
到了這里，關(guān)于【HTML 往日冒險(xiǎn) 09】多媒體 插件 音頻audio 視頻video iframe YouTube iframe bilibili的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
