分類
程式技術

使用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/

 

分類
WebTrend

什麼是LBRY, 和Youtube有什麼關係?!

這個 LBRY 讀做 library, 主要的訴求是:

LBRY is a free, open, and community-run digital marketplace.
Build the future of content freedom.

可以參考這裡: https://lbry.tech/

LBRY is a secure, open, and community-run digital marketplace.

可以參考這裡: https://lbry.org/

簡單地說就是一個供應安全、自由、開放、又是社群經營的數位市集, 所以能有內容儲存、交易、推薦等機能的一個開放架構.

分類
WebTrend

遠距醫療挑戰與契機

  1. 遠距醫療挑戰與契機!健保署:2021 年正式納入健保給付範圍 https://geneonline.news/index.php/2020/12/04/telemedicine-future-trend/
  2. 台灣遠距醫療法規現況與未來挑戰 https://udn.com/news/story/6871/5009650
  3. 健保署葉逢明:匡列一億臺幣預算 2021將為健保給付遠距醫療元年 https://news.gbimonthly.com/tw/article/show.php?num=35138

看起來遠距醫療因為疫情與偏鄉等資源分配議題, 加速開放了, 這個產業應用, 實際上的難度不在遠距, 而是在診斷啊, 若不是能用視訊方式來實現的檢查, 實務上真的能看診或解決病患的問題嗎?

這個方式很棒, 但是是否能有效看診, 或是解決病患的痛苦, 才是要思考的問題, 不過政府與醫界能正視與肯投入這個應用技術的方式來擴大與解決醫病問題, 的確是很值得鼓勵的!

分類
blog服務

方便好用的媒體寄存發行工具-Publit.io

網站有時需要寄存媒體服務(像是圖片, 影片等), 可以放在本機, 可以利用CDN, 也可以利用這種寄存服務. Publit.io

https://publit.io?fpr=diarytim (此連結為本站推薦代碼)

它提供了圖片寄存, 影片寄存, 而且免費方案就能享有10GB空間, 每月20GB傳輸量可供應用.

分類
好用軟體

VideoLink2me快速線上視訊會議網站

通常要開視訊會議需要高昂的硬體設備, 當然, 也有軟體的解決方案, 是不是有更快速的方式呢? 有的, 可以利用這個網站: https://videolink2.me/

只需要在線上直接建立視訊會議室即可快速發起視訊會議, 不用註冊, 馬上可以發起一個線上的視訊會議, 而且免費.

另外它也直接只有聲音參與的方式, 並可以有文字聊天與傳送檔案功能, 目前使手瀏覽器可用外, 還有 chrome browser 的 app: http://bit.ly/vl-chrome-app, 還有 iPhone/iPad 的 App: https://itunes.apple.com/en/app/apple-store/id983787504?mt=8

需要快速開個會嗎? 用 videolink2.me 試看看.

繼續閱讀:
http://www.playpcesor.com/2015/01/videolink2me-p2p.html

分類
Javascript

有趣的trackingjs javascript framework

這個利用 javascript 寫的 tracking js 用來做許多視訊與圖形辨識上的應用, 官方介紹在這裡:

http://trackingjs.com/

來看看他的應用有哪些:

  1. 相片裡的人臉辨識 http://trackingjs.com/examples/face_tag_friends.html 像 facebook 裡的標記朋友那樣的功能.
  2. 人臉的眼、口辨識: http://trackingjs.com/examples/face_hello_world.html
  3. 動態的人臉追蹤, 這是從 webcam 動態追蹤人臉: http://trackingjs.com/examples/face_camera.html
  4. 相片的顏色辨識: http://trackingjs.com/examples/color_hello_world.html
  5. 從 webcam 的影像做顏色辨識: http://trackingjs.com/examples/color_camera.html
  6. 從 video 中的影像做顏色辨識: http://trackingjs.com/examples/color_video.html

還有很多其他型式的應用, 簡單來說, 這個 framework 把原本是在應用程式中才能做的特殊影像辨識技術應用在 browser 裡的 javascript 來達來, 目前比較會有問題的是在效率的問題, 不過若是未來 browser 強化與隨著 cpu 等級提升, 相對這些也就都不會是問題了.

快來玩看看吧.

分類
WebTrend

有趣的360全影攝影

剛在 youtube 上看到有趣的 360全景影片, 可以用滑鼠拖拉的方式進行角度的調整, 這樣的攝影方式十分有意思, 目前有一些全景相機(攝影機)可以錄製這樣的影像.

像是這款 Ricoh Theta:

RICOH Theta M15 全天球360°球型環景相機(公司貨)

來看看有趣的全景影片吧:

(引用自: https://www.youtube.com/watch?v=7IaYJZ2Usdk )

繼續閱讀:
https://blog.3bro.info/archives/youtube-360-degree-streaming-video/
http://www.playpcesor.com/2015/03/youtube360google.html

更多 Youtube 360影片:
https://www.youtube.com/channel/UCzuqhhs6NWbgTzMuM09WKDQ

分類
WebTrend

線上轉檔服務-bitcodin

線上影音轉檔服務 bitcodin, 強調快速, 而且支援 MPEG-DASH, 當然也支援 HLS.

之前有介紹過 AWS 上的 Amazon Elastic Transcode 服務(link), 現在這家 bitcodin 來了, 速度很快, 利用他的 sample video 測試, 約是 17倍快的時間可以轉檔完成. 很厲害.

網站在這裡: https://www.bitcodin.com/

而且價格不算貴, 一樣是有 free tier 而且可以選擇多種計價, 依使用量來選擇方案: https://www.bitcodin.com/pricing/

Input 的方式可以用 HTTP、FTP、Dropbox, Output 的方式可以用 FTP、Amazon S3、Dropbox 都有各三種的方式可供選擇, 配合他的 REST API 可以應用的情境就十分廣泛了, 自建的影音庫, 線上隨訊視訊等.

這麼快的轉檔效率, 看起來真的還蠻有競爭力的.

分類
程式技術

在bootstrap下的影片responsive設定

在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/

分類
WebTrend

Amazon Elastic Transcoder

今天收到了AWS的通知信, 有個新上線的服務Amazon Elastic Transcoder, 用來做影音的線上轉碼, 網址說明在這裡

http://aws.amazon.com/elastictranscoder/

這個服務提供很容易的方式將影音的格式進行轉碼, 可以支援的輸出格式為 h.264 + AAC 的 mp4 檔案, 當然也是目前支援性高也廣泛應用的格式, 內建的幾組預設輸出(preset)如下:

Generic 1080p mp4 System preset generic 1080p
Generic 720p mp4 System preset generic 720p
Generic 480p 16:9 mp4 System preset generic 480p 16:9
Generic 480p 4:3 mp4 System preset generic 480p 4:3
Generic 360p 16:9 mp4 System preset generic 360p 16:9
Generic 360p 4:3 mp4 System preset generic 360p 4:3
Generic 320×240 mp4 System preset generic 320×240
iPhone4 mp4 System preset: iPod touch 5G, 4G, iPad 1G, 2G
iPhone4S mp4 System preset: iPhone 5, iPad 3G, 4G, iPad mini, Samsung Galaxy S2/S3/Tab 2
iPhone3GS mp4 System preset: iPhone 3GS
iPod Touch mp4 System preset: iPhone 1, 3, iPod classic
Apple TV 2G mp4 System preset: Apple TV 2G
Apple TV 3G mp4 System preset: Apple TV 3G, Roku HD/2 XD
Web mp4 System preset: Facebook, SmugMug, Vimeo, YouTube
KindleFireHD mp4 System preset: Kindle Fire HD
KindleFireHD8.9 mp4 System preset: Kindle Fire HD 8.9
KindleFire mp4 System preset: Kindle Fire

若是內建的 preset 不夠用, 也可以自行建立 preset, 建立畫面如下:

如此一來便能建立更符合應用需求的尺寸, 不過一般來說, 內建的 preset 已經很夠用了. 另外大家有沒有注意到, 還有 thumbnails 這項, 對了, 就是產生縮圖的功能, 在轉換影片的過程中, 也一併產生縮圖, 方便在實際應用上的圖片預覽, 在預設的 preset 中也有.

再來就是計價的部分, 是以影片的長度來計算, 以最便宜的地區來看, 每一分鐘轉出的SD影片為0.015美元, 而轉出HD影片為0.03美元, 也是相當便宜呢. 將一部 120分鐘的影片轉檔為SD的格式, 只需要 1.8美元.

以實際上傳來進行轉檔, 把檔案放到 s3 中, 指定好輸入檔案和輸出檔案後, 測試一支 3:30 長度的影片, 720P轉為 480P, 16:9, 只需要不到2分鐘的時間, 效率也很不錯.

目前有每月免費20分鐘的影片轉檔試用, 大家可以來體驗看看這個新上線的 amazon 服務!

[1/30 10:57]
為能再次測試看得到的範例, 從 HD Demo world找了一支影片來測試, 網址在這裡:

http://www.demo-world.eu/trailers/high-definition-trailers.php

使用的是 BBC Germany 22.1MB 20sec

上傳到 s3 的 bucket 裡, 並開始進行轉換, 不過可能是檔案格式為 hd_distributor_bbc_germany.m2ts 是 m2ts 的格式, 所以轉換失敗, 而凌晨測試的格式是 720p 的 mp4 轉為 480p 的 mp4, 所以是順利轉出.

查了一下這個 Amazon Elastic Transcoder 支援的輸入格式說明如下:

Formats: Amazon Elastic Transcoder supports transcoding into H.264 video and AAC audio in an MP4 container. We support most common media formats for input including H.264, AAC, MP4, MPEG-2, FLV, 3GP and AVI.

看起來 m2ts 可能不被支援, 所以測試失敗.

再查了一下, 發現是輸出設定檔案衝突, 所以無法輸出, 真囧, 再次建立 job 進行測試, 於 45sec完成轉換(輸出仍為1080p-生成檔案大小為 30.9MB).

在建立 job 時, 順便看了一下 Additional Job Details 中, Input Container 預設是自動(用預設即可), 下拉後, 有格式選擇如下:

共有 3gp, asf, avi, divx, flv, mkv, mov, mpeg, mpeg-ps, mpeg-ts, mxf, ogg, vob, wav, webm 這些格式, 基本上常用的都有了.

再來繼續測試:

輸出 720p 的格式, 所需時間為 32sec, 輸出檔案大小為 16.7MB
輸出 480p 16:9 的格式, 所需時間為 61sec, 輸出檔案大小為 8.8MB
輸出 360p 16:9 的格式, 所需時間為 27sec, 輸出檔案大小為 5.2MB

雖然 480p 16:9 稍慢一點, 不過看起來可能只是一個案例, 再測一次 480p 16:9 的輸出為 51sec, 有稍快一點, 整體來說轉檔的時間真的還蠻快的呢!