DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 10.1 網頁中插入音頻和視頻
10.1 網頁中插入音頻和視頻
編輯:HTML入門知識     

一、插入音頻和視頻

在網頁中常見的多媒體文件包括音頻文件和視頻文件,對於在線音頻和視頻,我們往往都是使用embed標簽來插入。

embed是HTML5新增的標簽。

語法:

<embed src="多媒體文件地址" width="播放界面的寬度" height="播放界面的高度"/>

舉例1:插入音頻文件

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>插入音頻文件</title>
</head>
<body>
    <embed src="media/西班牙舞曲.mp3" width="400px" height="80px"/>
</body>
</html>

在浏覽器預覽效果如下:

embed標簽插入音頻文件

說明:

我們可以看到,使用embed標簽插入音頻文件還會有一個播放界面,界面上有幾個簡單的功能按鈕。

舉例2:插入視頻文件

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>插入音頻文件</title>
</head>
<body>
    <embed src="media/小蘋果.wmv" width="400px" height="80px"/>
</body>
</html>

在浏覽器預覽效果如下:

embed標簽插入視頻文件

說明:

由於音頻和視頻文件比較大,所以在這裡我們就不提供大家在線測試的功能。不過大家可以在自己計算機上面測試一下代碼。

使用embed標簽插入視頻,在浏覽器我們也可以看到,浏覽器提供了一個簡單的操作界面。embed標簽支持的視頻格式很多,大部分主流格式都支持。

embed標簽能支持大部分格式的視頻文件,反正主流的如.mp4、.avi、.rmvb等都支持。如果你使用embed標簽不能播放視頻,那就可能是你視頻格式有問題或者編碼有問題。你可以用格式工廠轉換一下格式。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved