HTML＋CSS初學筆記精選系列
在 HTML 中播放聲音或者視頻的方法有很多種。
HTML 音頻
問題，以及解決方法
在 HTML 中播放音頻並不容易！
您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬體上（PC, Mac , iPad, iPhone）都能夠播放。
使用插件
瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。
插件有很多用途：播放音樂、顯示地圖、驗證銀行賬號，控制輸入等等。
可使用 或 標籤來將插件添加到 HTML 頁面。
這些標籤定義資源（通常非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。
使用 元素
標籤定義外部（非 HTML）內容的容器。（這是一個 HTML5 標籤，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。
下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：
問題：
1) 標籤在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
2)不同的瀏覽器對音頻格式的支持也不同。
3)如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
4)如果用戶的計算機未安裝插件，無法播放音頻。
5)如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。
注釋：使用 (HTML5) 解決驗證問題。
使用 元素
標籤也可以定義外部（非 HTML）內容的容器。
下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：
實例
問題
1)不同的瀏覽器對音頻格式的支持也不同。
2)如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
3)如果用戶的計算機未安裝插件，無法播放音頻。
4)如果把該文件轉換為其他格式，仍然無法在所有瀏覽器中播放。
使用 HTML5 元素
元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。
Your browser does not support this audio format.
上面的例子使用了一個 mp3 文件，這樣它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
為了使這段音頻在 Firefox 和 Opera 中同樣有效，添加了一個 ogg 類型的文件。如果失敗，會顯示錯誤消息。
問題：
1) 標籤在 HTML 4 中是無效的。頁面無法通過 HTML 4 驗證。
2)您必須把音頻文件轉換為不同的格式。
3)元素在老式瀏覽器中不起作用。
注釋：使用 (HTML5) 解決驗證問題。
最好的 HTML 解決方法
height="100" width="100">
type="audio/mp3" />
type="audio/ogg" />
width="100" src="song.mp3" />
上面的例子使用了兩個不同的音頻格式。HTML5 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 元素。
問題：
1)您必須把音頻轉換為不同的格式。
2) 元素無法通過 HTML 4 和 XHTML 驗證。
3) 元素無法通過 HTML 4 和 XHTML 驗證。
4) 元素無法回退來顯示錯誤消息。
注釋：使用 (HTML5) 解決驗證問題。
向網站添加音頻的最簡單方法
向網頁添加音頻的最簡單的方法是什麼？
雅虎的媒體播放器絕對算其中之一。
使用雅虎媒體播放器是一個不同的途徑。您只需簡單地讓雅虎來完成歌曲播放的工作就好了。
它能播放 mp3 以及一系列其他格式。通過一行簡單的代碼，您就可以把它添加到網頁中，輕鬆地將 HTML 頁面轉變為專業的播放列表。
雅虎媒體播放器
Play Sound
使用雅虎播放器是免費的。如需使用它，您需要把這段 JavaScript 插入網頁底部：
然後只需簡單地把 MP3 文件鏈接到您的 HTML 中，JavaScript 會自動地為每首歌創建播放按鈕：
Play Song 1Play Song 2.........
雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。
請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。
使用超鏈接
如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用"輔助應用程序"來播放文件。
以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動"輔助應用程序"來播放該文件：
Play the sound
內聯的聲音
當您在網頁中包含聲音，或者作為網頁的組成部分時，它被稱為內聯聲音。
如果您打算在 web 應用程序中使用內聯聲音，您需要意識到很多人都覺得內聯聲音令人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯聲音選項。
我們最好的建議是只在用戶希望聽到內聯聲音的地方包含它們。一個正面的例子是，在用戶需要聽到錄音並點擊某個鏈接時，會打開頁面然後播放錄音。
HTML 視頻
controls="controls">
type="video/mp4" />
type="video/ogg" />
type="video/webm" />
width="320" height="240">
width="320" height="240" />
使用 標籤
下面的 HTML 代碼顯示嵌入網頁的 Flash 視頻：
問題：
1)、HTML4 無法識別 標籤。您的頁面無法通過驗證。
2)、如果瀏覽器不支持 Flash，那麼視頻將無法播放。
3)、iPad 和 iPhone 不能顯示 Flash 視頻。
4)、如果您將視頻轉換為其他格式，那麼它仍然不能在所有瀏覽器中播放。
使用 標籤
標籤的作用是在 HTML 頁面中嵌入多媒體元素。
下面的 HTML 代碼顯示嵌入網頁的 Flash 視頻：
height="200" width="200"/>
問題：
1)、如果瀏覽器不支持 Flash，將無法播放視頻。
2)、iPad 和 iPhone 不能顯示 Flash 視頻。
3)、如果您將視頻轉換為其他格式，那麼它仍然不能在所有瀏覽器中播放。
使用 標籤
是 HTML 5 中的新標籤。
標籤的作用是在 HTML 頁面中嵌入視頻元素。
以下 HTML 片段會顯示一段嵌入網頁的 ogg、mp4 或 webm 格式的視頻：
height="240" controls="controls">
type="video/mp4" />
type="video/ogg" />
type="video/webm" />Your browser does not support the video tag.
問題：
1)、您必須把視頻轉換為很多不同的格式。
2)、 元素在老式瀏覽器中無效。
3)、 元素無法通過 HTML 4 和 XHTML 驗證。
最好的 HTML 解決方法
HTML 5 + +
height="240" controls="controls">
type="video/mp4" />
type="video/ogg" />
type="video/webm" />
width="320" height="240">
width="320" height="240" />
上例中使用了 4 中不同的視頻格式。HTML 5 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 元素。
問題：
1)、您必須把視頻轉換為很多不同的格式。
2)、 元素無法通過 HTML 4 和 XHTML 驗證。
3)、 元素無法通過 HTML 4 和 XHTML 驗證。
注釋：使用 (HTML5) 解決驗證問題。
優酷解決方案
在 HTML 中顯示視頻的最簡單的方法是使用優酷等視頻網站。
如果您希望在網頁中播放視頻，那麼您可以把視頻上傳到優酷等視頻網站，然後在您的網頁中插入 HTML 代碼即可播放視頻：
使用超鏈接
如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用"輔助應用程序"來播放文件。
以下代碼片段顯示指向 AVI 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動"輔助應用程序"，比如 Windows Media Player 來播放這個 AVI 文件：
Play a video file
關於內聯視頻的一段注釋
當視頻被包含在網頁中時，它被稱為內聯視頻。
如果您打算在 web 應用程序中使用內聯視頻，您需要意識到很多人都覺得內聯視頻令人惱火。
同時請注意，用戶可能已經關閉了瀏覽器中的內聯視頻選項。
我們最好的建議是只在用戶希望看到內聯視頻的地方包含它們。一個正面的例子是，在用戶需要看到視頻並點擊某個鏈接時，會打開頁面然後播放視頻。
關於我們
蓬勃健康發展的CSTP北京中關村順義基地是大學生、高中學生實訓的最佳選擇，國內唯一「國字頭」互聯網+教育工程。基地設多個專業：電商與新媒體運營、web前端工程師、java軟體工程師， UI設計等。
互聯網行業的年輕人，你們面對著怎樣的職業瓶頸、困惑與未來選擇？加入CSTP，讓行業專家、技術大牛、教育專家、職業規劃專家給你解惑吧！
或搜索ID「cstpcn」
中國軟體專業人才培養工程
中關村知尚軟體學院
國內唯一「國字頭」互聯網+教育工程
TAG:知尚教育 |