播放吧! 網頁上的影片
近期遇到一個需求，客戶的行業會有自己的影片內容，想把影片放在自己的伺服器，在自己的網站上播放，而不是放在 Youtube 等線上影音服務平台，考察其他同性質的競爭業者，發現在網頁上播放自己的影片，這件事並不單純…
上面有一個 ppt，如果看不到 ppt 請點播放吧! 網頁上的影片 // Speaker Deck。
內容摘要:
第一部 : 我的上古時代
1.步驟1:把影片傳到伺服器，用早期的影片播放語法…
2.步驟2:電腦需要安裝各種 Player 才能看網頁上的影片… (您是否要執行此 ActiveX 控制項?)
3.步驟3:成功看到影片了!
4.< object> 屬性介紹:
– Classid – 每一種副檔名都有不同ID – 讓系統知道如何處理這檔案
– wmv (classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″)
– swf (classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″)
– Codebase – 讓系統知道如果影片解不出來，要去哪邊下載解碼器
– http://www.apple.com/qtactivex/qtplugin.cab
– http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab
– http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
– Pluginspage – 如果沒安裝，讓使用者知道要去哪裡下載軟體
-http://www.macromedia.com/go/getflashplayer
-http://java.sun.com/j2se/1.7.0/download.html
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.理想的網站編輯器影片嵌入功能
– 視覺化的選擇影片插入位置，不用切到原始碼模式
– 可方便的重複編輯修改，不用在原始碼模式裡面找嵌入碼
– 安全的刪除，不會把把包在附近的東西一起刪掉。
– 乾淨的刪除，不會留下任何殘留的容器在畫面上。
– 在編輯區中可正確顯示影片尺寸、位置與影片預覽，方便編排
– 相容各大影音平台影片
– 影音空間串接