標籤: HLS

分類
Javascript

hls.js 應用於html video tag播放 HLS功能的外掛

同事介紹的這組 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 應用, 能有很大的幫忙.

 

分類
程式技術

使用Clappr Video Player時滿版需求(CSS)

之前 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/

 

分類
系統技術

在 Azure 上 Media Service的服務功能與應用介紹

剛在 Channel 9 上看到的, 很棒的內容分享介紹, 給大家參考:

互聯網流媒體架構設計模式與實踐 – 如何使用 Azure Media Service 構建端到端的流媒體服務平臺

https://channel9.msdn.com/Events/DevOps-TW/DeveloperDay/A02

微軟的媒體雲端服務, 基本上包含了完整的媒體應用時所需要的所有功能, 包含了 VOD, Live Streaming, DRM, Player 等, 而且也與原來的 Azure Storage 結合, 可以存放大量內容與上傳轉檔等功能, 另外播放器也十分完整, 可以在各不同平台上提供播放功能, 而傳輸的協議上也同時提供了 MPEG-DASH, HLS, Smooth Streaming (影片中提到的 Azure Media Player 連結: https://ampdemo.azureedge.net/).

這篇影音很清楚地介紹許多在開發人員面對要實作 Media service 時的應用情境, 可以讓大家在開發這類的應用服務時, 有更快速方便的工具.

另外開發的程式語言支援了 .NET, JAVA, PHP, NODEJS 等, 基本上在 Azure 的服務上, 就算是不支援的程式語言也可以透過 Restful API 來操作, 更容易讓開發者使用自己熟悉的語言來進行開發.