天天看點
傳回

HTML_07_多媒體

HTML_07_多媒體
HTML_07_多媒體

HTML 多媒體

Web 上的多媒體指的是音效、音樂、視訊和動畫。

現代網絡浏覽器已支援很多多媒體格式。

什麼是多媒體？

多媒體來自多種不同的格式。

它可以是您聽到或看到的任何内容，文字、圖檔、音樂、音效、錄音、電影、動畫等等。

在網際網路上，您會經常發現嵌入網頁中的多媒體元素，現代浏覽器已支援多種多媒體格式。

在本教程中，您将了解到不同的多媒體格式，以及如何在您的網頁中使用它們。

浏覽器支援

第一款網際網路浏覽器隻支援文本，而且即使是對文本的支援也僅限于單一字型和單一顔色。

随後誕生了支援顔色、字型和文本樣式的浏覽器，圖檔支援也被加入。

不同的浏覽器以不同的方式處理對音效、動畫和視訊的支援。

某些元素能夠以内聯的方式處理，而某些則需要額外的插件。

多媒體格式

格式 多媒體元素（比如視訊和音頻）存儲于媒體檔案中。

确定媒體類型的最常用的方法是檢視檔案擴充名。

當浏覽器得到檔案擴充名 .htm 或 .html 時，它會假定該檔案是 HTML 頁面。

.xml 擴充名訓示 XML 檔案，

而 .css 擴充名訓示樣式表。

圖檔格式則通過 .gif 或 .jpg 來識别。

多媒體元素元素也擁有帶有不同擴充名的檔案格式，

比如 .swf、.wmv、.mp3 以及 .mp4。

視訊格式

HTML_07_多媒體

MP4是網際網路推出新的視訊格式。

YouTube 推薦使用 MP4 。

Flash Players 支援 MP4

HTML5 支援 MP4。
格式 檔案 描述
AVI .avi

AVI (Audio Video Interleave) 格式是由微軟開發的。

所有運作 Windows 的計算機都支援 AVI 格式。

它是網際網路上很常見的格式，但非 Windows 計算機并不總是能夠播放。
WMV .wmv

Windows Media 格式是由微軟開發的。

Windows Media 在網際網路上很常見，

但是如果未安裝額外的（免費）元件，就無法播放 Windows Media 電影。

一些後期的 Windows Media 電影在所有非 Windows 計算機上都無法播放，

因為沒有合适的播放器。
MPEG
  • .mpg
  • .mpeg

MPEG (Moving Pictures Expert Group) 格式是網際網路上最流行的格式。

它是跨平台的，得到了所有最流行的浏覽器的支援。
QuickTime .mov

QuickTime 格式是由蘋果公司開發的。

QuickTime 是網際網路上常見的格式，

但是 QuickTime 電影不能在沒有安裝額外的（免費）元件的 Windows 計算機上播放。
RealVideo
  • .rm
  • .ram

RealVideo 格式是由 Real Media 針對網際網路開發的。

該格式允許低帶寬條件下（線上視訊、網絡電視）的視訊流。

由于是低帶寬優先的，品質常會降低。
Flash
  • .swf
  • .flv

Flash (Shockwave) 格式是由 Macromedia 開發的。

Shockwave 格式需要額外的元件來播放。

但是該元件會預裝到 Firefox 或 IE 之類的浏覽器上。
Mpeg-4 .mp4

Mpeg-4 (with H.264 video compression) 是一種針對網際網路的新格式。

事實上，YouTube 推薦使用 MP4。

YouTube 接收多種格式，然後全部轉換為 .flv 或 .mp4 以供分發。

越來越多的視訊釋出者轉到 MP4，

将其作為 Flash 播放器和 HTML5 的網際網路共享格式。
HTML_07_多媒體
 最新的 HTML5 标準隻支援 MP4, WebM, 和 Ogg 視訊格式。

聲音格式

MP3是一種音頻壓縮技術，其全稱是:

動态影像專家壓縮标準音頻層面3(Moving Picture Experts Group Audio Layer III),簡稱為MP3。

它被設計用來大幅度地降低音頻資料量。

如果你的站點是音樂類型的，你可以選擇mp3格式。

格式 檔案 描述
MIDI
  • .mid
  • .midi

MIDI (Musical Instrument Digital Interface) 是一種針對電子音樂裝置（比如合成器和聲霸卡）的格式。

MIDI 檔案不含有聲音，但包含可被電子産品（比如聲霸卡）播放的數字音樂指令。

因為 MIDI 格式僅包含指令，是以 MIDI 檔案極其小巧。

點選這裡播放 The Beatles。

上面的例子隻有 23k 的大小，但卻能播放将近 5 分鐘。

MIDI 得到了廣泛的平台上的大量軟體的支援。

大多數流行的網絡浏覽器都支援 MIDI。
RealAudio
  • .rm
  • .ram

RealAudio 格式是由 Real Media 針對網際網路開發的。

該格式也支援視訊。該格式允許低帶寬條件下的音頻流（線上音樂、網絡音樂）。

由于是低帶寬優先的，品質常會降低。
Wave .wav

Wave (waveform) 格式是由 IBM 和微軟開發的。

所有運作 Windows 的計算機和所有網絡浏覽器（除了 Google Chrome）都支援它。
WMA .wma WMA 格式 (Windows Media Audio)，品質優于 MP3，相容大多數播放器，除了 iPod。WMA 檔案可作為連續的資料流來傳輸，這使它對于網絡電台或線上音樂很實用。
MP3
  • .mp3
  • .mpga

MP3 檔案實際上是 MPEG 檔案的聲音部分。

MPEG 格式最初是由運動圖像專家組開發的。

MP3 是其中最受歡迎的針對音樂的聲音格式。

期待未來的軟體系統都支援它。
HTML_07_多媒體
 HTML5 的最新标準隻支援 MP3, WAV, 和 Ogg 音頻格式。

HTML 插件

插件的功能是擴充 HTML 浏覽器的功能。

HTML 助手（插件）

輔助應用程式（helper application）是可由浏覽器啟動的程式。

輔助應用程式也稱為插件。

輔助程式可用于播放音頻和視訊（以及其他）。

輔助程式是使用 <object> 标簽來加載的。

使用輔助程式播放視訊和音頻的一個優勢是:您能夠允許使用者來控制部分或全部播放設定。

插件可以通過 <object> 标簽或者 <embed> 标簽添加在頁面中。

object 和 embed 元素都通過 添加對浏覽器不直接支援的插件 的支援 來擴充浏覽器的功能。 

大多數輔助應用程式允許對音量設定和播放功能（比如後退、暫停、停止和播放）的手工（或程式的）控制。

HTML_07_多媒體
 我們可以使用 <video> 和 <audio> 标簽來顯示視訊和音頻

<object> 元素

所有主流浏覽器都支援 <object> 标簽。

<object> 元素定義了在 HTML 文檔中嵌入的對象。

<object> 元素具有局部屬性:

data，type，height，width，usemap，name，form

。

該标簽用于插入對象 (例如在網頁中嵌入 Java 小程式, PDF 閱讀器, Flash 播放器) 。

播放 我和MM.swf代碼如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免費零基礎教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の動漫神作清單</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
 	<div style="text-font:center;">
	 	<object width="300" height="300" data="http://localhost/static/swf/mm.swf"></object>
 	</div>
 	
<p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML_07_多媒體

<object> 元素同樣可用于包含HTML檔案:

插入網頁,代碼如下:

<div style="text-font:center;">
	 	<object width="400" height="380" data="html_42.html"></object>
</div>

效果如下:

HTML_07_多媒體

或者插入一張圖檔:

代碼如下:

<div style="text-font:center;">
	 	<object width="200" height="200" data="http://localhost/static/images/mathilda.jpg"></object>
 	</div>

效果如下:

HTML_07_多媒體

<embed> 元素

所有主流浏覽器都支援 <embed> 元素。

<embed> 元素實作與 <object> 元素相同的結果。

<embed> 元素表示一個 HTML Embed 對象 。

<embed> 元素已經出現很長一段時間了，

但是在 HTML5 前并未被詳細說明，該元素在 HTML 5 頁面上會被驗證，在 HTML 4 上不會。

代碼如下:

<div style="text-font:center;">
	 <embed width="400" height="400" src="http://localhost/static/swf/mm.swf" />
</div>

效果如下:

HTML_07_多媒體
HTML_07_多媒體
 注意 <embed> 元素沒有關閉标簽。 不能使用替代文本。

<embed> 元素同樣可用于包含 HTML 檔案:

代碼如下:

<div style="text-font:center;">
	 	<embed width="400" height="400" src="html_421.html" />
</div>

效果如下:

HTML_07_多媒體

或者插入一張圖檔,代碼如下:

<div style="text-font:center;">
	 	<embed width="200" height="200" src="http://localhost/static/images/hurutelika.png" />
</div>

效果如下:

HTML_07_多媒體

HTML 音頻(Audio)

問題以及解決方法

在 HTML 中播放音頻實屬不易！

您需要谙熟大量技巧，以確定您的音頻檔案在所有浏覽器中

如（IE, Chrome, Firefox, Safari, Opera）

和所有硬體上（PC, Mac , iPad, iPhone,Android等）都能夠播放。

在本章，W3Cschool為您總結了問題和解決方法。

使用插件

浏覽器插件是一種擴充浏覽器标準功能的小型計算機程式。

插件可以使用 <object> 标簽 或者 <embed> 标簽添加在頁面上. 

這些标簽定義資源（通常非 HTML 資源）的容器，

根據類型，它們即會由浏覽器顯示，也會由外部插件顯示。

使用 <embed> 元素 (無關閉标簽)

<embed>标簽定義 外部内容(即非HTML内容) 的容器。

（這是一個 HTML5 标簽，在 HTML4 中是非法的，但是所有浏覽器中都有效）。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 檔案:

注意:如果是mid檔案,會直接下載下傳

代碼如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免費零基礎教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の動漫神作清單</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
 	<div style="text-font:center;">
	 	<embed width="300" height="50" src="http://localhost/static/media/daremoinai.mp3" />

	 	<embed width="300" height="338" src="http://localhost/static/images/daremoinai.jpg" />
 	</div>
 	<p style="text-align:center;font-style:normal;">空無一人的小鎮.mp3</p>
<p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML_07_多媒體

問題:

  • <embed> 标簽在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
  • 不同的浏覽器對音頻格式的支援也不同。
  • 如果浏覽器不支援該檔案格式，沒有插件的話就無法播放該音頻(如mid在chrome上會直接下載下傳了)。
  • 如果使用者的計算機未安裝插件，無法播放音頻。
  • 如果把該檔案轉換為其他格式，仍然無法在所有浏覽器中播放。

使用 <object> 元素 (有關閉标簽 )

<object> 标簽也可以定義 外部内容(即非HTML内容) 的容器。

下面的代碼片段能夠顯示嵌入網頁中的 MP3 檔案:

代碼如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免費零基礎教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の動漫神作清單</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
 	<div style="text-font:center;">
	 	<object width="300" height="50" data="http://localhost/static/media/daremoinai.mp3"></object>

	 	<object width="300" height="338" data="http://localhost/static/images/daremoinai.jpg"></object>
 	</div>
 	<p style="text-align:center;font-style:normal;">空無一人的小鎮.mp3</p>
<p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML_07_多媒體

問題:

  • 不同的浏覽器對音頻格式的支援也不同。
  • 如果浏覽器不支援該檔案格式，沒有插件的話就無法播放該音頻(如mid在chrome直接下載下傳了)。
  • 如果使用者的計算機未安裝插件，無法播放音頻。
  • 如果把該檔案轉換為其他格式，仍然無法在所有浏覽器中播放。

使用 HTML5 <audio> 元素

HTML5 <audio> 元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在所有浏覽器中都有效。

以下我們将使用 <audio> 标簽來描述 MP3 檔案(Internet Explorer、Chrome 以及 Safari 中是有效的), 

同樣添加了一個 OGG 類型檔案(Firefox 和 Opera浏覽器中有效).

如果失敗，它會顯示一個錯誤文本資訊,

代碼如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免費零基礎教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の動漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
	<div style="text-align:center">

		<audio controls>
			<source src="daremoinai.ogg" type="audio/ogg">
		 	<source src="daremoinai.mp3" type="audio/mpeg">
			您的浏覽器不支援audio标簽
		</audio>

	 	<br/>
	 	<object width="300" height="338" data="http://localhost/static/images/daremoinai.jpg"></object>

	</div>

 	<p style="text-align:center;font-style:normal;color: rgba(113,112,127,1);">空無一人的小鎮.mp3</p>
<p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML_07_多媒體

問題:

  • <audio> 标簽在 HTML 4 中是無效的。您的頁面無法通過 HTML 4 驗證。
  • 您必須把音頻檔案轉換為不同的格式。
  • <audio> 元素在老式浏覽器中不起作用。

最好的 HTML 解決方法

下面的例子使用了兩個不同的音頻格式。

HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼将回退嘗試 <embed> 元素。

代碼如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免費零基礎教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の動漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
	<div style="text-align:center">

		<audio controls>
			<source src="daremoinai.ogg" type="audio/ogg">
		 	<source src="daremoinai.mp3" type="audio/mpeg">
			您的浏覽器不支援audio标簽,embed沒有閉合标簽
			<embed height="50" width="300" src="daremoinai.mp3" />
			<object height="50" width="300" data="daremoinai.mp3"></object>
		</audio>

	 	<br/>
	 	<object width="300" height="338" data="http://localhost/static/images/daremoinai.jpg"></object>

	</div>

 	<p style="text-align:center;font-style:normal;color: rgba(113,112,127,1);">空無一人的小鎮.mp3</p>
<p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML_07_多媒體

問題:

  • 您必須把音頻轉換為不同的格式。
  • <embed> 元素無法回退來顯示錯誤消息。???Excuse Me???

使用超連結

如果網頁包含指向媒體檔案的超連結，大多數浏覽器會使用"輔助應用程式"來播放檔案。

以下代碼片段顯示指向 mp3 檔案的連結。如果使用者點選該連結，浏覽器會啟動"輔助應用程式"來播放該檔案:

代碼如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免費零基礎教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の動漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
	<div style="text-align:center">
	 	<object width="300" height="338" data="http://localhost/static/images/daremoinai.jpg"></object>
	</div>
	
 	<a href="daremoinai.mp3" target="_blank" rel="external nofollow" ><p style="text-align:center;font-style:normal;color: rgba(113,112,127,1);">空無一人的小鎮.mp3</p></a>
<p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML_07_多媒體

點選MP3後,效果如下:

HTML_07_多媒體

内聯的聲音說明

當您在網頁中包含聲音，或者作為網頁的組成部分時，它被稱為内聯聲音。

如果您打算在 web 應用程式中使用内聯聲音，您需要意識到很多人都覺得内聯聲音令人惱火。

同時請注意，使用者可能已經關閉了浏覽器中的内聯聲音選項。

尤其是iOS裝置上為了保護使用者的流量,禁用了自動播放!!!

我們最好的建議是隻在使用者希望聽到内聯聲音的地方才包含它們。

一個正面的例子是，在使用者需要聽到錄音并在點選了某個連結時，才打開頁面然後播放錄音。

HTML 多媒體标簽

New : HTML5 新标簽

标簽 描述
<embed> 定義内嵌對象。HTML4 中不贊成，HTML5 中允許。
<object> 定義内嵌對象。
<param> 定義對象的參數。
<audio>New 定義了聲音内容
<video>New 定義一個視訊或者影片
<source>New 定義了media元素的多媒體資源(<video> 和 <audio>)
<track>New 規定media元素的字幕檔案或其他包含文本的檔案 (<video> 和<audio>)

HTML 視訊（Videos）

在 HTML 中播放視訊的方法有很多種。

可以使用 <embed> 标簽、<object> 标簽以及 <video> 标簽（HTML 5中啟用）

代碼如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="550">
	<meta name="description" content="免費零基礎教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の動漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
</head>
<body>
	<div style="text-align:center">
	 	<video width="300" height="300" controls autoplay>
	 		<source src="anime.mp4" type="video/mp4"/>
	 		<source src="anime.ogg" type="video/ogg"/>
	 		<source src="anime.webm" type="video/webm"/>

	 		<object data="anime.mp4" width="300" height="300">
	 			<embed width="300" height="300" src="anime.mp4"/>
	 		</object>
	 	</video>
	</div>

 	<a href="anime.mp4" target="_blank" rel="external nofollow" ><p style="text-align:center;font-style:normal;color: rgba(113,112,127,1);">動漫神作.mp4</p></a>
<p style="font-size:14px;text-align:center">     Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML_07_多媒體

問題以及解決方法

在 HTML 中播放視訊實屬不易

您需要谙熟大量技巧，以確定您的視訊檔案

在所有浏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）

和所有硬體上（PC, Mac , iPad, iPhone, Android等）都能夠播放。

使用 <embed> 标簽

<embed> 标簽的作用是在 HTML 頁面中嵌入多媒體元素。

下面的 HTML 代碼顯示嵌入網頁的 Flash 視訊：

執行個體

<embed src="anime.mp4" height="300" width="300" />

效果如下:

HTML_07_多媒體

問題

  • HTML4 無法識别 <embed> 标簽。您的頁面無法通過驗證。
  • 如果浏覽器不支援 Flash，那麼視訊将無法播放
  • iPad 和 iPhone 不能顯示 Flash 視訊。
  • 如果您将視訊轉換為其他格式，那麼它仍然不能在所有浏覽器中播放。

使用 <object> 标簽

<object> 标簽的作用是在 HTML 頁面中嵌入多媒體元素。

下面的 HTML 片段顯示嵌入網頁的一段 Flash 視訊：

執行個體

<object data="mm.swf" height="200" width="200"></object>

問題:

  • 如果浏覽器不支援 Flash，将無法播放視訊。
  • iPad 和 iPhone 不能顯示 Flash 視訊。
  • 如果您将視訊轉換為其他格式，那麼它仍然不能在所有浏覽器中播放。

使用 HTML5 <video> 元素

HTML5 <video> 标簽定義了一個視訊或者影片.

<video> 元素在所有現代浏覽器中都支援。

以下 HTML 片段會顯示一段嵌入網頁的 ogg、mp4 或 webm 格式的視訊：

執行個體

<video width="320" height="240" controls autoplay>

  <source src="anime.mp4" type="video/mp4">

  <source src=" anime.ogg" type="video/ogg">

  <source src=" anime.webm" type="video/webm">

  Your browser does not support the video tag.

</video>

HTML_07_多媒體

Tip: 

ogg：帶有 Theora 視訊編碼和 Vorbis 音頻編碼的 Ogg 檔案

mp4：帶有 H.264 視訊編碼和 AAC 音頻編碼的 mp4 檔案 

webm：帶有 VP8 視訊編碼和 Vorbis 音頻編碼的 webm 檔案 

問題:

  • 您必須把視訊轉換為很多不同的格式。
  • <video> 元素在老式浏覽器中無效。

最好的 HTML 解決方法 牛X

以下執行個體中使用了4種不同的視訊格式。

HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視訊。

如果均失敗，則回退到 <embed> 元素。

HTML 5 + <object> + <embed>

<video width="320" height="240" controls>

  <source src="anime.mp4" type="video/mp4">

  <source src=" anime .ogg" type="video/ogg">

  <source src=" anime .webm" type="video/webm">

  <object data =" anime .mp4" width="320" height="240">

    <embed src=" anime .swf" width="320" height="240" />

  </object> 

</video>

問題:

  • 您必須把視訊轉換為很多不同的格式

優酷解決方案

在 HTML 中顯示視訊的最簡單的方法是使用優酷等視訊網站。

如果您希望在網頁中播放視訊，那麼您可以把視訊上傳到優酷等視訊網站，

然後在您的網頁中插入 HTML 代碼即可播放視訊：

<embed src="http://player.youku.com/player.php/sid/XMzI222NTc4NTMy/v.swf" width="480" height="400" type="application/ x-shockwave-flash " />

使用超連結

如果網頁包含指向媒體檔案的超連結，大多數浏覽器會使用"輔助應用程式"來播放檔案。

以下代碼片段顯示指向 AVI 檔案的連結。

如果使用者點選該連結，浏覽器會啟動"輔助應用程式"，比如 Windows Media Player 來播放這個 AVI 檔案：

執行個體

<a href="anime.avi" target="_blank" rel="external nofollow" >觀看視訊</a>

關于内聯視訊的說明

當視訊被包含在網頁中時，它被稱為内聯視訊。

如果您打算在 web 應用程式中使用内聯視訊，

您需要意識到很多人都覺得内聯視訊令人惱火。

同時請注意，使用者可能已經關閉了浏覽器中的内聯視訊選項。

我們最好的建議是隻在使用者希望看到内聯視訊的地方包含它們。

一個正面的例子是，在使用者需要看到視訊并且點選了某個連結時，才會打開頁面然後播放視訊。

HTML 多媒體标簽

New : HTML5新标簽.

标簽 描述
<embed> 定義内嵌對象。HTML4 中不贊成，HTML5 中允許。
<object> 定義内嵌對象。
<param> 定義對象的參數。
<audio>New 定義了聲音内容
<video>New 定義一個視訊或者影片
<source>New 定義了media元素的多媒體資源(<video> 和 <audio>)
<track>New 規定media元素的字幕檔案或其他包含文本的檔案 (<video> 和<audio>)

附錄:

HTML 參考手冊- (HTML5 标準)

按字母順序排列

New : HTML5新标簽

标簽 描述
<!--...--> -->√定義注釋
<!DOCTYPE> -->√定義文檔類型
<a> -->√定義超文本連結
<abbr> -->√定義縮寫
<acronym> 定義隻取首字母的縮寫，不支援HTML5  ???Excuse Me???
<address> 定義文檔作者或擁有者的聯系資訊
<applet> 定義嵌入的 applet。HTML5中不支援使用。
<area> -->√定義圖像映射内部的區域
<article>New 定義一個文章區域
<aside>New 定義頁面的側邊欄内容
<audio>New -->√定義音頻内容
<b> -->√定義文本粗體
<base> -->√定義頁面中所有連結的預設位址或預設目标。
<basefont> 定義頁面中文本的預設字型、顔色或尺寸。HTML5不支援使用。
<bdi>New 允許您設定一段文本，使其脫離其父元素的文本方向設定。
<bdo> -->√定義文字方向, 例如:從右往左,就是 dir="rtl"
<big> 定義大号文本，HTML5不支援使用。
<blockquote> -->√定義長的引用
<body> -->√定義文檔的主體
<br> -->√定義換行
<button> -->√定義一個點選按鈕
<canvas>New 定義圖形，比如圖表和其他圖像,标簽隻是圖形容器，您必須使用腳本來繪制圖形
<caption> -->√定義表格标題
<center> 定義居中文本。HTML5不支援使用。
<cite> -->√定義引用(citation)
<code> -->√定義計算機代碼文本
<col> -->√定義表格中一個或多個列的屬性值
<colgroup> 定義表格中供格式化的列組
<command>New 定義指令按鈕，比如單選按鈕、複選框或按鈕
<datalist>New 定義選項清單。請與 input 元素配合使用該元素，來定義 input 可能的值。
<dd> -->√定義定義清單中項目的描述
<del> -->√定義被删除文本 (删除線效果)
<details>New 用于描述文檔或文檔某個部分的細節
<dfn> 定義定義項目
<dialog>New 定義對話框，比如提示框
<dir> 定義目錄清單。HTML5不支援使用。
<div> -->√定義文檔中的節
<dl> -->√定義清單詳情
<dt> -->√定義清單中的項目
<em> -->√定義強調文本
<embed>New -->√定義嵌入的内容，比如插件。無關閉标簽
<fieldset> -->√定義圍繞表單中元素的邊框
<figcaption>New 定義<figure> 元素的标題
<figure>New 規定獨立的流内容（圖像、圖表、照片、代碼等等）。
<font> 定義文字的字型、尺寸和顔色。HTML5不支援使用。
<footer>New 定義 section 或 document 的頁腳。
<form> -->√定義了HTML文檔的表單
<frame> -->√定義架構集的視窗或架構
<frameset> -->√定義架構集
<h1> to <h6> -->√定義 HTML 标題
<head> -->√定義關于文檔的資訊
<header>New 定義了文檔的頭部區域
<hr> -->√定義水準線
<html> -->√定義 HTML 文檔
<i> -->√定義斜體字
<iframe> -->√定義内聯架構
<img> -->√定義圖像
<input> -->√定義輸入控件
<ins> -->√定義被插入文本 (下劃線效果)
<kbd> -->√定義鍵盤文本
<keygen>New 規定用于表單的密鑰對生成器字段。
<label> 定義 input 元素的标注
<legend> -->√定義 fieldset 元素的标題。
<li> -->√定義清單的項目
<link> -->√定義文檔與外部資源的關系
<map> -->√定義圖像映射
<mark>New 定義帶有記号的文本。請在需要突出顯示文本時使用 <m> 标簽。
<menu> 定義菜單清單。HTML5不支援使用。
<meta> -->√定義關于 HTML 文檔的元資訊。
<meter>New 定義度量衡。僅用于已知最大和最小值的度量。
<nav>New 定義導航連結的部分
<noframes> 定義針對不支援架構的使用者的替代内容。HTML5不支援
<noscript> -->√定義針對不支援用戶端腳本的使用者的替代内容。
<object> -->√定義内嵌對象 源使用的是data屬性
<ol> -->√定義有序清單。
<optgroup> 定義選擇清單中相關選項的組合。
<option> -->√定義選擇清單中的選項。
<output>New 定義不同類型的輸出，比如腳本的輸出。
<p> -->√定義段落。
<param> 定義對象的參數。
<pre> -->√定義預格式文本。
<progress>New 定義運作中的進度（程序）。
<q> -->√定義短的引用。
<rp>New <rp> 标簽在 ruby 注釋中使用，以定義不支援 ruby 元素的浏覽器所顯示的内容。
<rt>New <rt> 标簽定義字元（中文注音或字元）的解釋或發音。
<ruby>New <ruby> 标簽定義 ruby 注釋（中文注音或字元）。
<s> 不贊成使用。定義加删除線的文本。
<samp> -->√定義計算機代碼樣本。
<script> -->√定義用戶端腳本。
<section>New <section> 标簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。
<select> -->√定義選擇清單（下拉清單）。
<small> -->√定義小号文本。
<source>New -->√<source> 标簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<span> 定義文檔中的節。
<strike> HTML5不支援，不贊成使用。定義加删除線文本。
<strong> -->√定義強調文本。
<style> -->√定義文檔的樣式資訊。
<sub> -->√定義下标文本。
<summary>New <summary> 标簽包含 details 元素的标題，"details" 元素用于描述有關文檔或文檔片段的詳細資訊。
<sup> -->√定義上标文本。
<table> -->√定義表格。
<tbody> 定義表格中的主體内容。
<td> -->√定義表格中的單元。
<textarea> -->√定義多行的文本輸入控件。
<tfoot> 定義表格中的表注内容（腳注）。
<th> -->√定義表格中的表頭單元格。
<thead> 定義表格中的表頭内容。
<time>New 定義日期或時間，或者兩者。
<title> -->√定義文檔的标題。
<tr> -->√定義表格中的行。
<track>New <track> 标簽為諸如 video 元素之類的媒介規定外部文本軌道。
<tt> 定義打字機文本。
<u> 不贊成使用。定義下劃線文本。
<ul> -->√定義無序清單。
<var> 定義文本的變量部分。
<video>New -->√<video> 标簽定義視訊，比如電影片段或其他視訊流。
<wbr>New 規定在文本中的何處适合添加換行符。

未完待續,下一章節,つづく

HTML_07_多媒體
HTML/H5 多媒體 音頻 視訊 object Embed
上一篇: 在Win7上使用QtCreator開發Qt for Android程式
下一篇: Python程式設計可以做很多事情，但在工作中有哪些作用？

繼續閱讀