HTML 視訊

admin發表於2018-10-22
HTML

在HTML中播放視訊的方法有很多種；需要考慮到一定的相容型問題。

一.使用<embed>標籤:

此標籤的作用是在HTML頁面中嵌入多媒體元素。

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

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<embed src="demo/html5/flash/antzone.swf" width="200" height="200">
</body>
</html>

特別說明:

（1）.HTML4無法識別 <embed> 標籤。您的頁面無法通過驗證。

（2）.如果瀏覽器不支援 Flash，那麼視訊將無法播放。

（3）.iPad 和 iPhone 不能顯示 Flash 視訊。

（4）.如果您將視訊轉換為其他格式，那麼它仍然不能在所有瀏覽器中播放。

二.使用<object>標籤:

此標籤的作用是在HTML頁面中嵌入多媒體元素。

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

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<object height="200" width="200" data="demo/html5/flash/antzone.swf"></object>
</body>
</html>

特別說明:

（1）.如果瀏覽器不支援 Flash，將無法播放視訊。

（2）.iPad 和 iPhone 不能顯示 Flash 視訊。

（3）.如果您將視訊轉換為其他格式，那麼它仍然不能在所有瀏覽器中播放。

三.使用HTML5<video>元素:

此標籤定義了一個視訊或者影片.

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

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

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<video id="video" width="420" style="margin-top:15px;">
  <source src="demo/html5/video/antzone.mp4" type="video/mp4" />
  <source src="demo/html5/video/softwhy.ogg" type="video/ogg" />
  <source src="demo/html5/video/softwhy.webm" type="video/webm" />
  瀏覽器不支援video標籤
</video>
</body>
</html>

四.最好的HTML解決方法: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<video width="320" height="240" controls>
  <source src="demo/html5/video/antzone.mp4" type="video/mp4">
  <source src="demo/html5/video/softwhy.ogg" type="video/ogg">
  <source src="demo/html5/video/movie.webm" type="video/webm">
  <object data="demo/html5/video/movie.mp4" width="320" height="240">
    <embed src="demo/html5/video/movie.swf" width="320" height="240">
  </object> 
</video>
</body>
</html>

上面的程式碼能夠解決當前的相容性問題。

相關文章