網頁程式設計 學習紀錄 (六) 影音多媒體
包含以下八個部分：
- HTML5的影音功能
- 嵌入影片與聲音 <video>與<audio>元素
- 嵌入資源檔案 <embed>元素
- 嵌入物件 <object>元素
- 嵌入Scripts <script>、<noscript>元素
- 嵌入CSS樣式表<style>元素
- 嵌入浮動框架<iframe>元素
- 網頁自動導向
1.HTML5的影音功能
<video>與<audio>提供了網頁上嵌入影片與聲音的標準方式
<video>的用法語<img>相似，都是使用src屬性指定影片的來源
例如以下：
<video src="clover.mp4" autoplay><video>
預設情況下，影片會停留在第一個影格，這邊加入了autoplay屬性讓影片自動撥放
2.嵌入影片與聲音 <video>與<audio>元素
<video>在網頁上提供了嵌入影片的標準方式，其屬性如下：
| 屬性 | 說明 |
| src="uri" |
指定影片相對或絕對位址(HTML5支援格式有WebM(*.webm)、Ogg Theora(*ogv)、H-264/MPEG-4(*mp4、*.m4v)) |
| poster="uri" | 指定影片在下載完畢之前或開始播放之前所顯示的第一個畫格 |
| preload="{none,metadata,auto}" |
指定是否要在載入網頁的同時將影片下載到緩衝區(none=否，metadata=指預先取得影片資訊但不載入影片內容，auto=表示由瀏覽器決定是否預先下載內容，例如PC瀏覽器就可能會，行動裝置反之) |
| autoplay | 指定讓瀏覽器載入網頁的同時自動播放影片 |
| loop | 指定重複播放影片 |
| muted | 指定影片為靜音 |
| controls | 指定要顯示瀏覽器內建的控制面板 |
| width="n" | 指定影片的寬度 |
| height="n" | 指定影片的高度 |
<audio>在網頁上提供了嵌入聲音的標準方式，其屬性有src、preload、autoplay、mediagroup、loop、muted、controls
3.嵌入資源檔案 <embed>元素
<embed>一直被用來嵌入Adobe Flash的外掛程式，HTML5終於將它標轉化，其屬性如下：
| 屬性 | 說明 |
| src="url" | 指定欲嵌入之資源檔案的相對或絕對位址 |
| type="content-type" | 指定欲嵌入之資源檔案的MIME類型(網際網路媒體類型) |
| width="n" | 指定欲嵌入之資源檔案的寬度 |
| height="n" | 指定欲嵌入之資源檔案的高度 |
當希望瀏覽器播放的資源檔案需要借助外掛程式時，就可以使用<embed>元素
下列就是借助Adobe Flash外掛程式來播放ivan.swf檔案：
<embed src="ivan.swf" type="application/x-shockware-flash" width="400" heigh="400">
※<embed>沒有結束標籤
4.嵌入物件 <object>元素
<object>在HTML4.01就已經提供，若瀏覽器不支援<video>、<audio>，或是手上的影片格式無法被其支援，
就可以使用<object>元素在HTML文件中嵌入圖片、影片、ActiveX Controls、Flash動畫或瀏覽器支援的其他物件
| 屬性 | 說明 |
|
align="left,right,center,texttop,middle,textmiddle,baseline,textbottom}" |
指定物件的對齊方式 |
| border="n" | 指定物件的框線大小 |
| width="n" | 指定物件的寬度 |
| height="n" | 指定物件的高度 |
| hspace="n" | 指定物件的水平間距 |
| vspace="n" | 指定物件的垂直間距 |
| name="n" | 指定物件的名稱 |
| classid="uri" | 指定物件的URI |
| codebase="uri" | 指定物件程式碼的相對或絕對位址 |
| codetype="content-type" | 指定物件程式碼的MIME類型 |
| data=uri" | 指定物件資料的相對或絕對位址 |
| declare | 宣告物件而不是將物件載入文件 |
| type="content-type" | 指定物件的MIME類型 |
| standby="..." | 指定瀏覽器正在下載物件時所顯示的文字訊息 |
| usemap="uri" | 指定指定用戶端影像地圖所在的檔案位址及名稱 |
| typemustmatch | 指定只有在type屬性的值和物件的內容類型符合時，才能使用data屬性所指定的物件資料 |
| form="formid" | 指定物件隸屬於ID為formid的表單 |
(1)嵌入影片
可以使用<object>在文件中嵌入影片：
<object data="ivan.wmv"><object>
(2)嵌入聲音
可以使用<object>在文件中嵌入聲音：
<object data="song.wmv" type="audio/wav" width="200" height="200"><object>
若不希望顯示控制面板，希望向背景音樂一般，則可以把長寬都設定為0
5.嵌入Scripts <script>、<noscript>元素
可以在HTML文件中嵌入Scripts，包括JavaScriptc 和 VBScript，其屬性如下：
| 屬性 | 說明 |
|
lauguage="..." |
指定Scripts的類型 |
| src="uri" | 指定Scripts的相對或絕對位址 |
| type="content-type" | 指定Scripts的內容類型 |
範例如下：
<script lauguage="javascript"> <!--javascript程式碼--> </script>
6.嵌入CSS樣式表<style>元素
可以在HTML文件中的<head>元素裡面使用<style>元素嵌入CSS樣式表
<style> 元素的屬性如下：
| 屬性 | 說明 |
| media="{screen,print,projection,braille,speech,tv,handheld,all}" | 指定樣式表的目的媒體類型 |
| type="content-type" | 指定樣式表的內容類型 |
| scoped | 指定將樣式表套用至樣式元素的父元素和子元素，省略的話將套用至整個HTML文件 |
7.嵌入浮動框架<iframe>元素
可以使用<iframe>元素在HTML文件嵌入浮動框架，其屬性如下：
| 屬性 | 說明 |
|
align="left,right,center}" |
指定浮動框架的的對齊方式 |
| frameborder="{1,0}" | 指定是否顯示浮動框架的框線 |
| width="n" | 指定浮動框架的寬度 |
| height="n" | 指定浮動框架的高度 |
| scrolling="{yes,no}" | 指定是否顯示浮動框架的卷軸 |
| src="uri" | 指定浮動框架的來源網頁相對或絕對位址 |
| name="n" | 指定浮動框架的名稱 |
| marginheight="n" | 指定浮動框架的上下邊界大小 |
| marginwidth="n" | 指定浮動框架的左右邊界大小 |
| seamless | 指定以無縫的方式顯示浮動框架的框線 |
| sendbox="{allow-forms,allow-same,orign,allow-scripts,allow-top-navigation}" | 指定一組限制套用到浮動框架的內容 |
| srcdoc="..." | 指定浮動框架的內容 |
8.網頁自動導向
若要令網頁在指定時間內自動導向到其他網頁，可以再<head>裡面加上如下敘述：
<meta http-equiv="refresh" content="秒數;url=欲連結網址">
留言列表
NAS (1)