影片播放器語法

8   Comments

本篇分享如何自製音樂或影片的播放器.
影音播放器普遍使用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  



Author Summary
影片播放器語法
Subject : 影片播放器語法
Author : - Dream Talker Updated at: 1:58 AM
Votes : 100% - 5.0 - based on 2015
Blogger文章內插入影片,使用HTML5播放mp4影片及音訊檔案.
5 Stars - Reviews
留言提示 - Comment Tips
◆ 如果您有任何想法或意見，歡迎參與留言。
◆ Disqus匿名留言，信箱及個人資訊不會公開顯示。
◆ 請多使用社群帳號留言，可簡化流程並訂閱回復。
◆ 『私密留言』請使用Google+分享按鍵，留言須使用『@Mark X』在訊息中，以免遺漏通知。
◆ G+ 訊息中指名分享對象的參考文件: 『 說明 』
  • Disqus
  • Blogger
  • Facebook
Anonymous left your nick please
  1. Anonymous3:35 PM

    yahoo播放器那一種比較簡單,語法也簡單.

    ReplyDelete
  2. Unknown3:48 AM

    To @Angela :
    是的, 我也覺得Yahoo播放器好用. 這裡只是提供另一種選擇.
    HTML5的編寫方式很適合自己架站使用, 就不必透過Yahoo或Youtube這類網站服務,上傳的影片不需受限於網站的規範與傳輸限速.
    而且還能夠在本頁切換成全螢幕狀態.
    假使是很珍貴,很清晰的結婚影片. 用這種方式遠比用Youtube播放同樣品質的影片快又清晰.

    ReplyDelete
  3. Anonymous3:58 PM

    請問，步驟2上傳影片到哪個網站？ 例如我在youtube的影音網址怎麼找？
    另一個問題，mp4要先轉檔成甚麼尺寸才不會有黑邊？　例如您的範例 謝謝。

    ReplyDelete
    Replies
    1. Unknown8:55 PM

      上傳到網路空間(可外連檔案的那種)取得影片網址, 上傳到Youtube就不需要這種HTML5的播放器, Youtube影片網址已經包含播放器, 使用"embed"語法執行影片框架.

      我對第二個問題有點不了解?
      不想要有陰影, 省略以下部分語法 :

      <style type="text/css">
      #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:none;text-align:center;margin: 0px auto}
      </style>

      還是說mp4影片不要看到上下或左右有黑邊?
      只要您原本的影片沒黑邊就不會以這個問題. width,height的尺寸要符合比例即可. 例如原尺寸是1280x720 (16：9), 播放器的尺寸按比例縮放.

      Delete
    2. Anonymous3:38 AM

      謝謝您的回覆，大心～
      再請問一個問題，我的影片載入好久才播放［真的很久］可有解決方法？

      Delete
    3. Unknown4:24 PM

      You are welcome.

      1. 網速慢造成載入延遲.
      2. 整部影片很長,影片資訊寫到其他段落. 可參考此篇: 如何修改mp4影片延遲載入
      3. 轉檔時編碼器複寫錯誤. 可參考其他轉檔軟體使用. Miro Video Converter

      Delete
  4. 老元10:57 PM

    假設放上2G以上大小的mp4影片會不會很慢，謝謝

    ReplyDelete
    Replies
    1. Unknown1:23 AM

      2G是影片總容量,長度因為壓縮率不同, 跟播放時流暢與否有關, 您沒註明.
      播放的快慢則是和收看者的頻寬限制有關, 跟2G大小的影片無關. 因為mp4影片可以載入部分資料後開始播放;並同時載入未播放的影片. 假使訪客的頻寬下載速度低於播放速度就會停頓再停頓. 例外: 影片的資料頭被編寫到後段;這樣要載入到資料load header的部分後才會開始播放.

      這樣說比較容易了解. 假設同樣的影片,有的人頻寬10M和頻寬1.5M的,在觀賞影片時就差很多. 以2G約2小時的影片來說,約要3M以上的頻寬才能順暢,載入後開始播放大約需5秒左右. 可是2G約30分鐘的影片卻需要10M左右的頻寬吧! 在完全沒有分散頻寬到其他網路工作的情形下, 仍然需扣除約12~15%的訊號控制流.

      所以在網路上使用mp4影片時很難兼顧影片品質, 因為要考慮儲存空間的流量速度與傳輸品質外, 更要考慮訪客的網路速度(不是自己看得爽就足夠). 壓縮率的控制設定需要一些經驗, 這部分我不是很專精, 可能要請教影片達人比較準確.

      Delete

SUBSCRIBE TO POST COMMENTS
Subscribe to:Post Comments( Atom )