本部落格已搬家
點此前往新部落格

新主機測試中...

播放吧! 網頁上的影片

近期遇到一個需求,客戶的行業會有自己的影片內容,想把影片放在自己的伺服器,在自己的網站上播放,而不是放在 Youtube 等線上影音服務平台,考察其他同性質的競爭業者,發現在網頁上播放自己的影片,這件事並不單純...

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:

第一部 : 我的上古時代
1.步驟1:把影片傳到伺服器,用早期的影片播放語法…
2.步驟2:電腦需要安裝各種 Player 才能看網頁上的影片… (您是否要執行此 ActiveX 控制項?)
3.步驟3:成功看到影片了!

4.< object> 屬性介紹:

5.以前的技術為何不能解決現代的問題?

  • ActiveX 在非 IE 的瀏覽器不支援
  • NPAPI 相關技術在現代瀏覽器被停用。
  • Codebase 插件路徑失連
  • Flash 人人喊打
  • Sliverlight – 微軟宣布將終止支援
  • 行動裝置時代來臨

第二部: 新時代
1.HTML5 Video 標籤

  • 使用 < video> 標籤與相關屬性,即可產生影片播放介面,不需要自己寫介面。
    影片播放器的功能細項:
    a.有一顆按鈕點一下會變成║,會停在剛剛的畫面,並且聲音暫停,再點一下會變成 ►,從剛剛的時間點繼續播放畫面與聲音。
    b.有一個矩形區塊,依目前已播放/影片總長度計算並顯示正確的長度,每秒更新,與 a 項功能連動。
    c.點擊 b 項區塊,會前往該位置對應的影格與音訊時間。
    族繁不及備載...

  • IE9(含)以上支援 < video> 標籤。

  • 由瀏覽器負責解碼影片,影片格式支援性依瀏覽器而定:

    • MP4 (除了IE8, Android 4.3-,支援性最高)
    • OGG (不支援 IE, Edge, Firefox3.5-, Chrome3-)
    • WebM (不支援 IE, Edge, Safari, Firefox4-, Chrome 6-)
    • m3u8 ( HLS 串流影音格式,Chrome 不支援)
    • 如果我有其餘的格式,如 FLV 可以直接用 video tag 來播嗎? 不,仍須仰賴外部套件(通常使用 Flash 做的播放器套件)。

2.HTML5 Video 標籤的相關屬性

  • autoplay - 是否自動撥放影片(行動裝置無效)
  • loop – 是否循環
  • poster – 影片故障/影片載入中/影片未撥放顯示一張圖片
  • preload – 是否預先下載,或是等按下 play 之後才開始下載
  • source – 影片路徑
  • controls - 影片控制條
    • Play/Pause 撥放/暫停按鈕
    • Seeking 撥放進度條
    • Volume 音量控制
    • Fullscreen 全螢幕按鈕
    • track (目前只有 Edge 跟 Safari 支援)

3.同一段 video 語法在各瀏覽器顯示的樣子都不一樣
4.為了達成瀏覽器相容性,Flash 不能亡
5.外部播放器套件

  • 使用 html5 video + Flash 播放器 + JS 等綜合技術,達成最高的瀏覽器覆蓋率
  • 各瀏覽器統一的播放器介面、可換面板、自訂樣式…
  • 方便的 API 與事件呼叫方式
  • 擴充套件,如各種樣式的播放清單、影片段落縮圖
  • 商業授權、持續更新
  • 額外的服務,如串流影音輸出,雲端伺服器串接
  • 商業授權: videojs, jwplayer, flowplayer
  • 免費授權可商用: Strobe Media Playback, Sewise Player

三、網頁與影片的相關技術重點
1.大家都能看到影片
2.串流影音技術 - HTTP Live Streaming(HLS),讓影片可以邊載入邊播放,
3.保護機制 - 限制影片只在在特定網站播放,或是播放給特定的人看
4.壓縮技術 - 使用者不喜歡等待,經營者不喜歡花錢在設備上
5.動態置入內容 - 動態置入廣告、動態廣告驗證碼
6.網頁互動 - Youtube Embed API,動作事件與影片互動

四、最簡單的方法 - 把影片放在線上影片平台
如隨意窩、Youtube、優酷、Vimeo, Facebook, Google Drive..
1.優點

  • 外部曝光/作者廣告收益
  • 串流處理
  • 持續的播放技術更新
  • 不須占用自己主機的傳輸流量
  • 平台提供簡易的剪輯工具

2.缺點

  • 廣告
  • 影片被檢舉、失效
  • 服務收攤 (ex: vlog, 無名小站,…)

五、把影片上傳到 Youtube 就結束了嗎?
1.嵌入影音時要選哪一種?
2.現有的網站編輯器,嵌入影片很不方便
3.理想的網站編輯器影片嵌入功能

  • 視覺化的選擇影片插入位置,不用切到原始碼模式
  • 可方便的重複編輯修改,不用在原始碼模式裡面找嵌入碼
  • 安全的刪除,不會把把包在附近的東西一起刪掉。
  • 乾淨的刪除,不會留下任何殘留的容器在畫面上。
  • 在編輯區中可正確顯示影片尺寸、位置與影片預覽,方便編排
  • 相容各大影音平台影片
  • 影音空間串接

4.理想編輯範例 - weeblywebnode


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


Comments 轉載文章請留言說一聲

comments powered by Disqus