三大雲端服務供應商提供的線上費用計算機:
使用雲端服務, 能快速方便地估算出每月費用, 以達成成本預估與預算爭取. 也容易做比較與達成遷移時成本的計算.
另外還有其他家的也整理如下:
同事介紹的這組 hls.js (https://github.com/video-dev/hls.js/)是應用於 video tag 中的播放 HLS (http live streaming) 的外掛, 可以讓原本的 video tag 增加播放 HLS 功能.
相較於之前介紹的 clappr player (https://diary.tw/archives/1811), 這組 hls.js 是直接使用 video tag 來進行(其實 clappr player 是在 div 下自建 video tag, 只是 hls.js 更直接).
hls.js 可以直接讓 browser 的 video tag 播放 hls 內容, 包含了 vod 與 live streming, 也提供了 web demo lab, 方便大家自行測試開發:
https://hls-js.netlify.app/demo/
(之前的 clappr demo 在這裡: http://clappr.io/demo/)
若需要公開測試的 hls 來源, 可以參考:
相信對於開發實作 hls video player 應用, 能有很大的幫忙.
之前 Flash Player 因為已經 EOL 下架了. 參考: https://diary.tw/archives/11 (相信很多人也已經改了 html5 的解決方案了).
不過若是以純 video player, 個人建議使用這個 clappr player 是適合的替代品( https://github.com/clappr/clappr) , 用純 html5 的 media element 解決方案來達成 media player 功能, 無論是 mp4 或是 hls 的 live streaming.
目前有個使用上的需求, 就是要能滿版 player , 也就是不要出現比例上不正確時的上下出黑(letterbox)或左右出黑(pillarbox)的狀況.
上下出黑的 letterbox 示意圖:
左右出黑的 pillarbox 示意圖:
而要拉伸視訊至滿版播放器要如何進行設定呢? 原本在查找 clappr doc (http://clappr.github.io/)時, 一直沒有找到對應的設定, 後來發現其實在原本的 css 就有個設定可以達成, object-fit 這個屬性: https://developer.mozilla.org/zh-TW/docs/Web/CSS/object-fit
當這個屬性設定為 object-fit: fill; 時, 就可以達成 stretch to fit 的功能, 也就是不成比例的拉伸(或壓縮)為對應的尺寸, 而不會出現為了維持比例而出現的 letterbox 或 pillarbox.
可以參考這個範例:
https://codepen.io/timhuang/pen/vYGvpqo
繼續閱讀:
https://www.jacksonlin.net/20181218-letterbox-on-youtube/