分類
程式技術

使用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 來操作, 更容易讓開發者使用自己熟悉的語言來進行開發.

分類
Blog服務

PictureTrail好玩的相簿及特效播放

picturetrail (http://www.picturetrail.com)網站提供了免費的相簿空間, 而且也提供了大量的特效播放方法, 操作介面簡單, 而且提供了瀏覽器上傳, 網址連結上傳及手機上傳等三種方式. 其實手機上傳是利用了一個email信箱的方式進行傳送, 利用相機手機將圖片發送至該信箱而達到上傳的目的.

這個網站還提供了輸出相片等功能, 不過看起來比較炫的還是播放器的部分, 方便地將相片利用特效播放供內嵌於其他網站上. 而且上傳的圖片也供內嵌, 看起來服務相當不錯, 下面是一個測試的 sample. (該網站需要加入會員才能使用這些功能哦, 不過是免費的, 和 slide.com 不同) 另外也提供了社交功能, 這看起來應該也是個社群經營的目的.

不過他有一個比較重大的缺點, 其一為在下載該FLASH PLAYER時, 並沒有進度顯示, 這個使用者來說會是比較容易造成困擾的. 還有就是播放時吃的資源相對於slide.com來說是比較重的(CPU較高)

(flash errrrr)

相關文章: https://diary.tw/archives/404

分類
Blog服務

真好用的線上相片播放器-slide.com

看到一個很炫的網站, www.slide.com

這個網站的功能主要是在做幻燈片產生器, 也就是上傳相片(或圖片), 即可線上進行幻燈片的產生. 內容千變萬化, 還可加上文字, 特效非常多, 而且還提供產生的結果供內嵌使用(代表著也提供了空間供應).

這個網站還將許多 blog 或社群網站列在上面, 並做出了如何將結果放在網頁上的操流程, 方便使用者能更容易地將產生的結果放入自己想放的地方. 除此之外, 應該本身也在經營著社群, 使用者加入該網站會員後, 可以訂閱或看許多其他的製作的幻燈片, 看起來似乎也是在凝聚人氣及使用率.

操作的頻驟十分容易, 就是

  1. 創作幻燈秀
  2. 儲存幻燈秀
  3. 播放幻燈秀