◎HTML5瀏覽器選按”另存新檔”

1.      可以將整個網頁內容下載到電腦

2.      但是額外的連結檔案,可能會下載得不完全

3.      <video>的例子就是這種情況

4.      <參考第21講的附加檔HTMLMediaElement Interface example - Video Player.htm &第22講.rtf>

◎如何將額外的連結檔也一併下載?

˙要先辨識出儲存路徑

◎<source src=”videos/bbb_240p_stereo.ogv”>

--到videos資料夾找bbb_240p_stereo.ogv

--如果找不到就不呈現

à與js_videoPlayer_en.html相同的資料夾下有一個資料夾叫videos，其底下有一個檔案叫bbb_240p_stereo.ogv

***URL(網址)

  http://html5.komplett.cc/code/chap_video/js_videoplayer_en.html

àhttp://html5.komplett.cc/code/chap_video/videos/bbb_240p_stereo.ogv

à這個就是ogv檔所儲存的網路位址。

à利用此位址，我們可以藉由瀏覽器進行下載

◎下載source code與完整檔案的作用?

˙***下載到local harddisk，可以使用Browser打開html檔，進行視訊撥放，那麼就可以觀察語法與呈現效果的關係、進行學習.

˙--還可以修改語法，觀察變化。

◎音樂控制面板

˙與<audio>tag搭配使用

◎HTML特殊符號的編碼即可

˙<Iinput type=button value=”&#x25B6;”onclick=”playPause(this);”

Id=”playButton”>

˙有些符號不需用圖像表示,使用特殊符號的HTML5編碼即可

◎附件：

※    HTMLMediaElement Interface example - Video Player.htm

(打開此一檔案,只有文字未有video圖案,是因為未有此圖檔)

(在21講的資料夾內)

※第22講.rtf

***

<video preload="metadata" poster="videos/bbb_poster.jpg" width="854" height="480" oncanplay="initControls()" ontimeupdate="updateProgress()">

  <source src="videos/bbb_240p_stereo.ogv" type="video/ogg;codecs=&quot;theora, vorbis&quot;">

  Sorry, your browser is unable to play this video.

</video>

*** <source src="videos/bbb_240p_stereo.ogv"  >

-- 開放授權的格式

*** 下拉式選單

<select name="scenes" onchange="selectScene(this)" size="19">

--> 當 item 有被選取, onchange 事件就發生.

--> selectScene(this) 功能被呼叫

***<source src="videos/bbb_240p_stereo.ogv"

--到video資料夾找bbb_240p_stereo.ogv

--如果找不到就不呈現

--與js_videoplayer_en.html相同的資料夾(路徑)下有一個資料夾叫videos,其底下有一個檔案叫bbb_240p_stereo.ogv

***URL（網址）

http://html5.komplett.cc/code/chap_video/js_videoplayer_en.html

──＞http://html5.komplett.cc/code/chap_video/videos/bbb_240p_stereo.ogv

（此是一個絕對路徑,要儲存在網路上的網址）

à這個就是ogv檔所儲存的網路位址。

à利用此位址，我們可以藉由瀏覽器進行

***下載到local harddisk，可以使用Browser打開html檔，進行視訊撥放，那麼就可以觀察語法與呈現效果的關係、進行學習.

--還可以修改語法，觀察變化。

***poster="videos/bbb_poster.jpg"

http://html5.komplett.cc/code/chap_video/videos/ bbb_poster.jpg

※buttonTile.htm

<input type="button" value=”往前撥"> <br>

<input type="button" value=”&#x25B6">

※22.rtf

&#x25B6

-> & 代表之後的碼有特別用途

-> # 表示之後的碼是一個數值

-> x 表示之後的數值是 16 進位表示法

-> 25B6 是 16 進位表示 , 每一個代表 4 位元, 共有 16 個位元

->UTF-8 編碼