播放吧! 網頁上的影片

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

Transcript

1. 播放吧! 網頁上的影片 su1205su@gmail.com
2. 需求: 有影片，要放在網頁上面播放
3. 第一部 : 我的上古時代 2000年左右的電腦使用者的回憶
4. 步驟1: 把影片傳到伺服器，用早期的影片播放語法… <object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version= 5,1,52,701" type="application/x-oleobject" width="320" height="310"> <param name="filename" value="test.wmv"> <param name="autostart" value="true"> <param name="showcontrols" value="true"> <param name="ShowStatusBar" value="true"> <embed src="test.wmv" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="320" height="310"> </object>
5. (XP, IE8 ) 重灌後必備… Windows Media Player Quicktime Player Real Player….. 步驟2: 需要安裝各種 Player，才能看網頁上的影片…
6. 步驟3: 成功看到影片了!
7. 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 <object> 屬性介紹
8. 以前的技術能否解決現代的問題?  ActiveX 在非 IE 的瀏覽器不支援  NPAPI 相關技術在現代瀏覽器被停用。  Codebase 插件路徑失連  Flash 人人喊打  Sliverlight – 微軟宣布將終止支援  行動裝置時代來臨
9. 第二部: 新時代 吃飯配智慧型手機，用 IE 上網會被譏笑的年代
10. HTML5 Video 標籤  使用 <video> 標籤與相關屬性，即可產生影片播放介面。  IE9(含)以上支援 <video> 標籤。  由瀏覽器負責解碼影片，影片格式支援性依瀏覽器而定:  MP4 (除了IE8, Android 4.3-，支援性最高)  OGG (不支援 IE, Edge, Firefox3.5-, Chrome3-)  WebM (不支援 IE, Edge, Safari, Firefox4-, Chrome 6-)  m3u8 ( HLS 串流影音格式，Chrome 不支援)  其餘的格式，如 FLV …等仍須仰賴外部套件(通常使用 Flash 做的播放器套件)。
11. HTML5 Video 標籤的相關屬性  autoplay - 是否自動撥放(行動裝置無效)  loop – 是否循環  poster – 影片故障/影片載入中/影片未撥放顯示一張圖片  preload – 是否預先下載，或是等按下 play 之後才開始下載  source – 影片路徑  controls - 影片控制條  Play/Pause 撥放/暫停按鈕  Seeking 撥放進度條  Volume 音量控制  Fullscreen 全螢幕按鈕  track (目前只有 Edge 跟 Safari 支援)
12. Chrome IE11/Edge Firefox http://jsfiddle.net/jtsq5s3z/1/ 以下為同一段 html 語法在各瀏覽器顯示的樣子 為什麼變灰色的呢? 全螢幕按鈕呢? 為什麼是全黑的呢? 影片只有2秒，時間 要顯示這麼多位嗎?
13. 珍惜生命 遠離程式碼 Safari (iOS) Safari (MAC OS) 播放時才會顯示工具列 以下為同一段 html 語法在各瀏覽器顯示的樣子 只看得到 poster 跟中央的 play 按鈕 看得到 poster 跟完整的 control bar、 影片總長
14. 為了達成瀏覽器相容性，Flash 不能亡 影片廣告版位 TED.com 的影片
15. 為了達成瀏覽器相容性，Flash 不能亡
16. Q:為什麼 Youtube 號稱使用 HTML5， 但是播放器好像在每個瀏覽器都長得一樣? A: 因為播放器介面是另外做的
17. 外部播放器套件 • 使用 html5 video + Flash 播放器 + JS 等綜合技術，達成最高的瀏覽器覆蓋率 • 各瀏覽器統一的播放器介面、可換面板、自訂樣式… • 方便的 API 與事件呼叫方式 • 擴充套件，如各種樣式的播放清單、影片段落縮圖 • 商業授權、持續更新 • 額外的服務，如串流影音輸出，雲端伺服器串接 wordpress 影音套件播放範例
18. 網頁與影片的相關技術重點 1. 大家都能看到影片 2. 串流影音 3. 保護機制 4. 壓縮技術 5. 動態置入內容 6. 網頁互動
19. 網頁與影片的相關技術重點 大家 IE8等舊瀏覽器 PC 使用者 一般 PC user 一般 行動裝置 Android 2.x,~4.3 使用者 Webview / InAppBrowser 低速 網路環境 電腦中毒、故障、奇 怪的瀏覽器套件 其他  大家都能看到影片  串流影音  保護機制  壓縮技術  動態置入內容  網頁互動
20. 網頁與影片的相關技術重點  大家都能看到影片  串流影音  保護機制  壓縮技術  動態置入內容  網頁互動 HTTP Live Streaming(HLS) 讓影片有邊載入邊播放的效果， 不須等到整個檔案下載完才能播放 相關伺服器技術 https://en.wikipedia.org/wiki/HTTP_Live_Streaming
21. 網頁與影片的相關技術重點  大家都能看到影片  串流影音  保護機制  壓縮技術  動態置入內容  網頁互動 數位著作權管理 (Digital Rights Management，DRM) 防盜錄 加浮水印 防盜連 設定限定網域的請求來源 才能下載檔案 防下載 瀏覽器套件、下載軟體太多了， 不防小人。 撥放權限 由伺服器端進行驗證 道高一尺 魔高一丈
22. 網頁與影片的相關技術重點  大家都能看到影片  串流影音  保護機制  壓縮技術  動態置入內容  網頁互動 高科技: 要馬兒跑很快，但草吃得越少越好 流量 低 畫質 高 壓 縮 技 術
23. 網頁與影片的相關技術重點  大家都能看到影片  串流影音  保護機制  壓縮技術  動態置入內容  網頁互動 廣告影片驗證碼 動態置入廣告
24. 網頁與影片的相關技術重點  大家都能看到影片  串流影音  保護機制  壓縮技術  動態置入內容  網頁互動 http://www.apple.com/tw/mac-pro/ 用數個 mp4 影片作內容切換轉場 http://tw.battle.net/hearthstone/zh 用一個 2 MB 的影片當背景 事件控制
25. 最簡單的方法 - 把影片放在線上影片平台  如隨意窩、Youtube、優酷、Vimeo, Facebook, Google Drive..  優點  外部曝光/作者廣告收益  串流處理  持續的播放技術更新  不須占用自己主機的傳輸流量  平台提供簡易的剪輯工具  缺點  廣告  影片被檢舉、失效  服務收攤 (ex: vlog, 無名小站,…)
26. 把影片上傳到 Youtube 就結束了嗎? 要如何將網站嵌入到您的網站內? Iframe 中包含著各影音平台的工藝技術， 如果影片要在手機上撥放，千萬不要選到另外兩種。
27. 現有的網站編輯器，嵌入影片很不方便 需求:  視覺化的選擇影片插入位置，免進原始碼模式  可重複編輯  安全的刪除，不殘留，不誤刪。  顯示尺寸大小、位置與影片縮圖，方便編排  相容各大影片 台灣: youtube, facebook, … 國外: youtube, vimeo, … 中國: 優酷、土豆網、愛奇藝… Ckeditor - MediaEmbed 套件
28. 理想的網站編輯器影片嵌入功能 功能需求: 1. 視覺化的選擇影片插入位置，不用切到原始碼模式 2. 可方便的重複編輯修改，不用在原始碼模式裡面找嵌入碼 3. 安全的刪除，不會把把包在附近的東西一起刪掉。 4. 乾淨的刪除，不會留下任何殘留的容器。 5. 在編輯區中可正確顯示影片尺寸、位置與影片預覽，方便編排 技術重點: 有些嵌入語法是 iframe(如youtube)，有些是一般資料 ID 配 JS (如FB) 6. 相容各大影音平台影片 台灣: youtube, facebook, … / 國外: youtube, vimeo, vine, IG, … / 中國: 優酷、土豆網、愛奇藝… 7. 影音空間串接 可從編輯器直接把影片上傳到 Youtube 或 雲端伺服器。
29. 理想編輯範例 – weebly 與 webnode 需求:  視覺化的選擇影片插入位置，免原始碼模式  可重複編輯  安全的刪除，不殘留，不誤刪。  顯示尺寸大小、位置與影片縮圖，方便編排  相容各大影片 台灣: youtube, facebook, … 國外: youtube, vimeo, … 中國: 優酷、土豆網、愛奇藝… webnode
30. 理想編輯範例 – weebly