當前位置 : IT培訓網 > Web前端 > Web教程 > 如何讓HTML視頻(Videos)動起來

如何讓HTML視頻(Videos)動起來

時間:2016-12-13 16:00:15??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
在 HTML 中播放視頻并不容易!您需要諳熟大量技巧,以確保您的視頻文件在所有瀏覽器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能夠播放。

在HTML中插入視頻并不是一件容易的事情,不僅需要網頁設計人員有很好的代碼功底,而且還要有視頻制作的經驗,如此才能在網頁中展現暢快淋漓的視頻效果來,如果你想要學習這方面知識,趕緊與IT培訓網小編聯系吧!

HTML 視頻(Videos

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

HTML 多媒體標簽

New : HTML5新標簽.

標簽

描述

<embed>

定義內嵌對象。HTML4 中不贊成,HTML5 中允許。

<object>

定義內嵌對象。

<param>

定義對象的參數。

<audio>New

定義了聲音內容

<video>New

定義一個視頻或者影片

<source>New

定義了media元素的多媒體資源(<video> 和 <audio>)

<track>New

規定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)

 

HTML視頻(Videos)播放

實例

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

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

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

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

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

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

  </object>

</video>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

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

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

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

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

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

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

  </object>

</video>

 

</body>

</html>

運行結果:

點擊播放視頻

問題以及解決方法

在 HTML 中播放視頻并不容易!

您需要諳熟大量技巧,以確保您的視頻文件在所有瀏覽器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能夠播放。

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

使用 <embed> 標簽

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

下面的 HTML 代碼顯示嵌入網頁的 Flash 視頻:

實例

<embed src="chhch20161213003.swf" height="200" width="200">

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<h2>Playing the Object</h2>

 

<embed src="chhch20161213003.swf" width="200" height="200"><p>如果你無法看到該視頻,那么可能你的電腦不支持該文件格式。</p>

 

</body>

</html>

運行結果:

Playing the Object

如果你無法看到該視頻,那么可能你的電腦不支持該文件格式。

問題

HTML4 無法識別 <embed> 標簽。您的頁面無法通過驗證。

如果瀏覽器不支持 Flash,那么視頻將無法播放

iPad 和 iPhone 不能顯示 Flash 視頻。

如果您將視頻轉換為其他格式,那么它仍然不能在所有瀏覽器中播放。

使用 <object> 標簽

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

下面的 HTML 片段顯示嵌入網頁的一段 Flash 視頻:

實例

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

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

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

 

</body>

</html>

運行結果:

點擊播放視頻

問題:

如果瀏覽器不支持 Flash,將無法播放視頻。

iPad 和 iPhone 不能顯示 Flash 視頻。

如果您將視頻轉換為其他格式,那么它仍然不能在所有瀏覽器中播放。

使用 HTML5 <video> 元素

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

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

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

實例

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

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

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

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

您的瀏覽器不支持 video 標簽。

</video>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

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

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

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

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

  您的瀏覽器不支持 video 屬性。

</video>

 

</body>

</html>

運行結果:

點擊播放視頻

問題:

您必須把視頻轉換為很多不同的格式。

<video> 元素在老式瀏覽器中無效。

最好的 HTML 解決方法

以下實例中使用了 4 中不同的視頻格式。HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗,則回退到 <embed> 元素。

HTML 5 + <object> + <embed>

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

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

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

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

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

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

  </object>

</video>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

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

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

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

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

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

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

  </object>

</video>

 

</body>

</html>

運行結果:

點擊播放視頻

問題:

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

優酷解決方案

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

如果您希望在網頁中播放視頻,那么您可以把視頻上傳到優酷等視頻網站,然后在您的網頁中插入 HTML 代碼即可播放視頻:

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

使用超鏈接

如果網頁包含指向媒體文件的超鏈接,大多數瀏覽器會使用"輔助應用程序"來播放文件。

以下代碼片段顯示指向 AVI 文件的鏈接。如果用戶點擊該鏈接,瀏覽器會啟動"輔助應用程序",比如 Windows Media Player 來播放這個 AVI 文件:

實例

<a href="chhch20161213003.swf">Play a video file</a>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

 

<h2>點擊這個鏈接打開查看</h2>

 

<a href="chhch20161213003.swf">播放視頻文件</a>

 

</body>

</html>

運行結果:

點擊這個鏈接打開查看

播放視頻文件

關于內聯視頻的說明

當視頻被包含在網頁中時,它被稱為內聯視頻。

如果您打算在 web 應用程序中使用內聯視頻,您需要意識到很多人都覺得內聯視頻令人惱火。

同時請注意,用戶可能已經關閉了瀏覽器中的內聯視頻選項。

我們最好的建議是只在用戶希望看到內聯視頻的地方包含它們。一個正面的例子是,在用戶需要看到視頻并點擊某個鏈接時,會打開頁面然后播放視頻。

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天