台灣最大程式設計社群網站
線上人數
2673
 
會員總數:246575
討論主題:190032
歡迎您免費加入會員
討論區列表 >> Blog精華文章 >> 使用HTML5播放影片
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
使用HTML5播放影片
價值 : 0 QP  點閱數:834 回應數:0
樓主

擺渡人 版主
初學者
741 83
2631 316
發送站內信

捐贈 VP 給 擺渡人

一早接到一個緊急的指示,希望在兩天後可以在公司櫃檯擺放一台螢幕,同時撥放歡迎影片與公司產片介紹影片,一開始還想要利用支援雙訊號源的液晶顯示器,也想到利用市面上常見的廣告撥放程式,後來突然想起,以前在台北捷運公司時,車站的到站資訊系統,就是利用瀏覽器的方式來處理,經過電話與同事詢問後,聯想到HTML5不就有支援影片播放功能嗎?所以立刻動手蒐集相關資訊。

利用HTML5來撥放影片還真的沒有想像中的複雜,利用Notepad++就搞定了,只要先將要撥放的投影片或影片檔案,先轉換成.mp4檔案,接下來只要編輯一下html檔案就搞定了,完成作品如下:  

要注意的是,IE9(含)以前的版本可是不支援的喔,利用Chrome,全螢幕撥放,效果就跟廣告撥放類似了。

至於Video所支援的屬性有:

屬性說明
autoplay自動撥放
controls顯示播放控制列
height撥放器高度
loop重複播放
muted靜音
posterSpecifies an image to be shown while the video is downloading, or until the user hits the play button
preloadSpecifies if and how the author thinks the video should be loaded when the page loads
src影片位置
width撥放器寬度

 

大功告成,剩下的就是找螢幕了。

參考資料:

如何使用HTML5的影片播放?

[HTML]HTML5 New Feature - video tag


本篇文章發表於2013-03-11 10:23
目前尚無任何回覆
   

回覆
如要回應,請先登入.