如何使用HTML5的影片播放?

筆者在前幾篇文章中曾經談過HTML5在影片播放上與Flash相比之下的優點,也提到現在許多先進的瀏覽器、網站均已經開始使用HTML5作為影片播放。而在這篇文章中,筆者將會在簡短的篇幅內介紹如何使用HTML5的
評論
評論

筆者在前幾篇文章中曾經談過 HTML5 在影片播放上與 Flash 相比之下的優點 ,也提到現在許多先進的瀏覽器、網站均已經開始使用 HTML5 作為影片播放。而在這篇文章中,筆者將會在簡短的篇幅內介紹如何使用 HTML5 的標籤來播放影片,並且討論跨平台的播放方法。

Safari、Chrome

這在一次的實做中,我們將先採用 Apple Safari 跟 Google Chrome 作為練習的對象,並逐步擴展所支援的瀏覽器。之所以使用 Safari/Chrome,乃是因為其對於 H.264 編碼器提供了完整的支援,而 H.264 證是目前 iPad/iPhone 上唯一支援的編碼格式、也是大多數數位相機、攝影機所拍攝出來的格式。

要使用 H.264 作為影片播放,首先我們當然得先取得 H.264 的檔案,誠如前面所提及的,若是你是從手機、攝影機或照相機等裝置拍攝影片,那大多數的影片便是 H.264 格式。而若是其他來源的影片,則可以參考網路上眾多的轉檔教學先行進行轉檔。

在 HTML5 中的影片播放均得透過標籤,架構大約如下:

<video width="640" height="480" poster="_YOUR-POSTER_PATH_.JPG" controls>     <source src="_YOUR-FILE-PATH_.MP4" type="video/mp4"></source> </video>

我們可以看到在<video> 標籤中存在著許多不同的屬性,如下:

  • width/height -- 長寬
  • poster -- 影片播放前的預覽圖
  • controls -- 開啟影片控制功能、像是快轉等
  • autoplay -- 自動播放

而下方的<source> 標籤自然就是記載你影片檔案所存放的路徑,這樣就能正常使用了!

Firefox、Opera

筆者前一篇談 HTML5 影片播放的文章曾經提過,由於 H.264 並非免費開放的授權,故 Firefox/Opera 雖然支援 HTML5 影片播放,但 source 並不能使用 H.264 作為影片的格式、而是使用 OGG 作為影片格式。

聰明的讀者可能已經注意到,在 HTML5 中的標籤中含有可以指定影片來源,所以我們只需要在 H.264 的後在新增一個 OGG 的影片來源就可以了!

因此程式碼變成如下:

<video width="640" height="480" poster="_YOUR-POSTER_PATH_.JPG" controls>     <source src="_YOUR-FILE-PATH_.mp4" type="video/mp4"></source>     <source src="_YOUR-FILE-PATH_.ogv" type="video/ogg"></source> </video>

這樣一來,當使用者使用 iPad/iPhone 或是其他各種支援 H.264 的瀏覽裝置讀到這段程式碼時,便會優先使用 H.264 格式的檔案,若是使用的瀏覽器無法讀取時,則會跳到下一則<source> 所提供的 ogg 格式檔案作為播放。

Internet Explorer 與其他

但若是遇到完全不支援 HTML5 的瀏覽器時又該怎麼辦?別擔心,我們可以在<video> 標籤內的最後放入無法播放影片時的替代選項,像是顯示影片下載連結、或是提示使用者更換瀏覽器播放,或者是使用 Flash 作為最後的播放選擇。

透過加入 Flash 的支援,便可以幾乎確保所有瀏覽裝置用最佳的影片播放方案。程式碼如下:

<video width="640" height="480" poster="_YOUR-POSTER_PATH_.JPG" controls>     <source src="_YOUR-FILE-PATH_.mp4" type="video/mp4"></source>     <source src="_YOUR-FILE-PATH_.ogv" type="video/ogg"></source>     <object width="640" height="480" type="application/x-shockwave-flash" data="_DO-YOUR-FLASH-EMBEDED">     </object> </video>

在 <object> 中,你可以如同一般的 Flash 嵌入一般的自由設定、加入<parms> 標籤。或者是你也可以直接加入 YouTube、Vimeo 等外嵌程式片段。

範例

以下範例為 HTML5 的影片播放實做,只提供 H.264 的檔案編碼,還請各位讀者使用 Safari 或 Chrome 等瀏覽器瀏覽。

結論

在這一次的內容中,我們簡單的介紹了如何透過 HTML5 在網頁中加入影片播放,並且使用 Flash 作為 IE 相容的解決方法。若是讀者有任何疑惑、心得,還請留言與我們討論!

參考資源


Google 開創雲端運算新時代,Industry Summit Recap 線上研討會聚焦製造、零售業加速轉型

一場疫情,讓許多行業意識到「數位轉型,不轉不行」的危機,尤其是轉型腳步相對緩慢的製造業、零售流通業,在疫情當下更是受創嚴重的兩大業態。Google Cloud將在 9 月 29 日、9 月 30 日舉辦 Industry Summit Recap 線上研討會,主題多元豐富而且不用出門、不必花錢,究竟議程有多吸引人?
評論
評論

數位轉型成為近年各產業最夯的關鍵詞,尤其 COVID-19 疫情爆發後,工廠缺工、缺料造成產線大亂,無法掌握上下游供應鏈的數據,對生產排程更是致命一擊。另一現象則是消費力從實體門市往電商跑,網路買了東西卻遲遲收不到貨,零售商能否即時掌握商品流、物流、金流的資訊,也是零售業受疫情衝擊之下,順利存活下去的關鍵。

一場疫情,讓許多行業意識到「數位轉型,不轉不行」的危機。不過數位轉型的命題如此大,加上不同產業的運作模式各有特色,因此在轉型方案的選擇、轉型方向的調度,也將呈現差異化策略。

例如,根據勤業眾信Deloitte於2020年底發布的《台灣智慧製造關鍵能力調查》,發現光是在製造業本身,轉型的腳步就有落差,半導體與電腦電子屬於轉型領先者,化學製品製造業的數位化投資相對落後。

為了加速產業邁向雲端轉型,善用數位科技的力量幫助自身企業不斷創新,Google Cloud 特別舉辦為期兩天的Industry Summit Recap 線上研討會。精選製造業、零售流通業當中最熱門的轉型主題,協助企業找到雲端轉型的密鑰,在後疫情時代享受最新的雲端解決方案。

Google Cloud Industry Summit Recap 線上研討會報名連結

製造業鎖定 9月 29 日,邁向工業 4.0 就該把生產數據全都拋上雲

工業 4.0 概念提出好多年,但你的企業是否還停留在 3.0 甚至 2.0 的階段?行業內的專家一定都知道,在工廠內安裝感測設備,透過即時掌握生產數據,進而彈性調整產線、優化製造流程、提高設備稼動率、降低人力成本,是邁向智慧製造的第一步。

導入自動化設備、架設全廠 IoT 環境、落實遠端監控之後的下一步呢?把生產資訊拋上雲端,甚至進一步運用 AI 技術,回過頭來調整生產流程,這部分將是許多製造業者亟需關注的轉型環節。

Google Cloud Industry Summit Recap 在 9 月 29 日,專注探討製造業該如何透過雲端解決方案,協助工廠設備運作更有效率、更為流暢。相關議題包含如下:

● 解密製造業上雲

● 雲端技術打造未來製造業

● 利用分析和人工智能實現製造業數位轉型

● 在 Google Cloud 上運行 SAP

● 借助 Anthos 實現工業 4.0 轉型

● Google 如何賦能智能製造

上述議題除了有華麗的 Google Cloud 講師陣容之外,更重要的是,本次線上研討會邀請製造行業的代表企業,藉由他們的最佳實踐經驗,分享親自走過的雲端轉型心路歷程,包含Askey亞旭電腦、Ennoconn樺漢科技、Footprintku富比庫 、HTC宏達電、ITTS東捷資訊,多元涵蓋製造產業不同領域的轉型模式與方法。

有些業者想了解究竟生產資料這麼多,該如何把 IT 基礎設備做現代化翻新,如有這方面的煩惱可以從「解密製造業上雲」主題獲得解答;又或者有些工廠已經部署各式各樣的 IoT 設備,但不知如何把不同設備及人員網絡串聯起來,洞察數據並發揮數據的價值,那就千萬不可錯過「利用分析和人工智能實現製造業數位轉型」。

當然有些企業已經導入 SAP 的 ERP 系統,希望把營運資料、生產數據一起整合到雲端,可以從「在 Google Cloud 上運行 SAP」專題了解實際的操作方式。在「賦能智能製造」議程,Google Cloud將攜手產業電腦整合方案領導業者Ennoconn樺漢科技,共同展示Google Meet + Google Glass的應用,透過人機協作有效釋放員工雙手,進而提升工作效率展現創新。

零售流通業鎖定 9 月 30 日,運用雲端方案為供應鏈業務做好準備

講到數位轉型風潮,絕對不能不提到全球的零售行業也受到大數據、AI 影響,展開智慧零售的佈局,藉此串聯全通路的數據,以提升顧客終身價值,讓獲利模式更加多元。從疫情可以發現,零售業是高度承受市場變動的產業,而且除了銷售端,把商品送到消費者手上的最後一厘路,更需要流通業者的協助。

看準零售流通行業長期遭遇的痛點,Google Cloud Industry Summit Recap 將在 9 月30 日,分享雲端解決方案可以從哪些角度切入,協助零售流通業者培養敏捷的營運體質,快速回應是廠及顧客的需求。相關議題包含如下:

● Google Cloud 打造由資料驅動的消費者體驗與創新

● 串聯線上線下零售商機並提升客戶體驗

● 企業數據決勝零售轉型

● 雲端科技加速市場回應與服務變現

● 如何透過 API 技術連結消費者需求並改善企業運營

● 描繪您對於未來零售的想像

● 建立數位供應鏈平台

● 物流運輸效能再升級:Google Map 應用

想要打造客製化的購物體驗嗎? API(Application Programming Interface)是近年的新顯學,從「透過 API 技術連結消費者需求並改善企業運營」學習如何從系統串接API,拓展更多服務功能。優化銷售、物流效率的關鍵就在於數據的洞察,進而調整適合的商業模式,從「Google Cloud 打造由資料驅動的消費者體驗與創新」及「企業數據決勝零售轉型」將是不可錯過的主題。

因應疫情避免過多人潮群聚,Google Cloud 提供兩天豐富的知識饗宴,不用出門、不必花錢,就能學習與自己產業有關的轉型新知。現在就報名 Google Cloud Industry Summit Recap 線上研討會