影片播放器語法
影音播放器普遍使用Flash的方式內嵌至本文或區域. 除非是網站提供的影音服務, 你只需要上傳檔案即可取得播放網址. 否則每次更換影片時就需要更新製作新的flash檔案; 或是更新xml列表.
如果不想使用flash, 也可以考慮HTML5的表現方式.
在此借用網站服務, 都幫你準備好基本架構, 只要依照說明位置插入CSS及HTML即可. 基本架構安插好了, 以後只需準備好影片網址替換.
注意到一件有趣的情形, 關鍵字搜尋『 音樂播放器語法 』時, 居然是這篇『 影片播放器語法 』優先顯示. 要找 - 站內換頁時音樂不中斷的音樂播放器, 請移駕.
* Step 1. 先到 HTML5 Video Player 這個網站觀看說明, 使用方法很簡單, 所以網頁用法不另說明. 本篇是適用於Blogger.
打開HTML範本, 修改CSS. 添加以下程式碼於 <head> 下方.
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"/> <script src="http://vjs.zencdn.net/c/video.js"></script>
* Step 2. 上傳影片, 取得影音網址.
這個部分比較麻煩... 對flash來說, 只需準備一種格式就可以播放出來. 但是HTML5還在發展階段, 而且還不確定要多久才能取得各種瀏覽器的共識. 必須準備不同格式的影片網址讓不同瀏覽器讀取.
格式有MP4, Ogv, Webm, 當然也可以只準備其中一種; 有的瀏覽器兼容兩種以上的格式. 為了準備不同格式意味著： 你必須花時間轉檔, 上傳.
* Step 3. HTML5 使用媒體的元素很簡明, 基本使用方法參考如下：
<video width="320" height="240" controls="controls">
<source src="movie.webm" type="video/webm" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
其中 controls="controls" 是使用瀏覽器自帶的控制鈕, 這個就不用管他.HTML5 Video Player 提供的是比較有變化的控制器. 可以切換全螢幕.
影片用 <video> 標籤, 播放音樂就把 <video> 改成 <audio>, </audio> 如下：
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
* 實際操作：在部落格裡撰寫文章草稿時, 切換成HTML模式. 貼入以下語法:
<style>
#shadow{-webkit-box-shadow:0 0 20px #000;-moz-box-shadow:0 0 20px #000;box-shadow:0 0 20px #000;width:550px;height:100%;overflow:hidden;text-align:center;margin: 0px auto}
</style>
<div align="center" id="shadow">
<video class="video-js vjs-default-skin" controls="" data-setup="{}" height="300" id="example_video" poster="preview.png" preload="auto" width="550">
<source src="my_video.mp4" type="video/mp4"></source>
<source src="my_video.ogv" type="video/ogg"></source>
<source src="my_video.webm" type="video/webm"></source>
Your browser does not support the video tag.
</video>
</div>
我稍加修改他的語法, MP4播放器加上立體陰影. (非必要)
也可以將 #shadow 這一段的樣式修改到 CSS 裡面, 而不加入文章內的HTML. 找到 " Posts " 此段下方貼入, 以避免Blogger行動版讀取網頁時多出一層黑色色塊.
/*---------- Posts ----------*/
#shadow{-webkit-box-shadow:0 0 20px #000;-moz-box-shadow:0 0 20px #000;box-shadow:0 0 20px #000;width:550px;height:100%;overflow:hidden;text-align:center;margin: 0px auto}
width, height 依據影片自行修改縮放尺寸. 紅字部分修改成影片網址.
poster="preview.png" 是影片預覽圖片, 將圖片網址換上去; 空白也可以.
轉成 ogv 格式檔案會變得比較大（轉成同檔案大小則畫質模糊）, 頻寬流速的消耗也比其他大許多. 我是建議可以省略這個格式, 以後也可能發展出通用的主流格式.
這類基於 HTML5 編寫技術的播放器有個很大的缺點 ... 要準備一堆不同格式的影片.
範例影片在基本網頁的使用 影片來源: +Terje Sorgjerd
