影音串流

網路層對影音串流延遲的影響

網路層對影音串流延遲的影響

基於 TCP 的 HLS 為何還會延遲或卡頓? 雖然 HLS(HTTP Live Streaming)是基於 TCP 傳輸協定,能保證資料不丟失且順序正確,但它天生具有「緩慢啟動、嚴格順序交付」的特性,會導致:啟播延遲(Startup Delay)、再傳延遲(Retransmission Delay)、突發性網路問題容易影響流暢性。 RTT(Round Trip Time)過高 RTT 是封包從客戶端傳送到伺服器再回來的總耗時。 * RTT 高 → Initial connection 慢:尤其 HTTPS handshake 或 CDN 的 chunk 請求階段會很明顯。 * 多個小請求的串流格式(如 HLS)會被放大影響:
SimonAllen
淺談 Web EME API

淺談 Web EME API

什麼是 EME? EME 是簡稱,全名 Encrypted Media Extensions (加密媒體擴充 API),它現在是瀏覽器標準內建的 Web API,讓瀏覽器可以播放受 DRM 保護的影片。使用它的核心目標是讓 HTML5 <video> 支援加密內容,並確保只有合法授權的使用者能夠解碼和播放影片。 要注意的是: EME 不負責解密影片,它只是 API,提供 Interface 與電腦底層 DRM 系統溝通的機制。 為什麼需要 EME? 早年大多數的線上影音網站使用 Flash 或 Silverlight 來播放影片(這些技術也有實作 DRM 的保護機制,例如 Flash 的 Flash Media Rights Management、
SimonAllen
iOS Safari 播放器全螢幕強制進入原生播放器

iOS Safari 播放器全螢幕強制進入原生播放器

系統限制 Web 工程師在做影音播放器功能時,容易遇到在 iOS Safari 播放器點擊全螢幕,會進入 Safari 原生播放器的議題。當影片進入全螢幕模式後,會使用 iOS 原生的影片播放器介面,因此無法客製化全螢幕的 UI 介面。 Windows Browser (ex: Chrome) Mac Safari iOS Safari Android Browser (ex: Chrome) 非全螢幕 顯示客製化 UI 顯示客製化 UI 顯示客製化 UI 顯示客製化 UI 全螢幕 顯示客製化 UI 顯示客製化 UI 強制切入原生播放器 顯示客製化 UI 此功能導致影響 廣告造成體驗不佳 目前觀察到播放中出現廣告時,會從全螢幕原生播放器「
SimonAllen
瀏覽器影音限制:自動播放與靜音

瀏覽器影音限制:自動播放與靜音

為什麼網頁自動播放需要靜音? 自動播放的聲音可能會影響使用者的瀏覽體驗。舉例來說,各位早期網路世代的使用者,一定都被打開某些網站跳出 Jumpscare 嚇過,輕一點則是剛打開網頁,被背景播放的奇怪音樂震撼到,為了避免這種嚇到使用者的行為,現代瀏覽器(如 Chrome、Firefox 和 Safari)已預設禁止未靜音的影音檔自動播放。 請參考 https://developer.chrome.com/blog/autoplay?hl=zh-tw 上面這篇是最重要的,建議先看過再往下看。 Chrome 自動播放政策 * 一律允許靜音自動播放。 * 僅在下列情況下,系統允許使用有聲音自動播放影片的情況: * 使用者已與此 domain 網域互動 (點擊、輕觸、滑動..etc)。 * 當使用者在電腦上的媒體參與度指數門檻時超過了門檻,代表使用者先前已播放有聲影片。 * 使用者已將網站新增至行動裝置主畫面,或在電腦上安裝 PWA。 * 熱門影格可以將自動播放權限委派給自己的 iframe,以便自動播放有聲的功能。 最重要的是這個: * 使用者已與此
SimonAllen
自 Chrome 109 版本開始靜音影片在切換分頁會被暫停..?

自 Chrome 109 版本開始靜音影片在切換分頁會被暫停..?

這是一篇隨手紀錄,大概在 1/30 收到回報。 若進入播放頁是預設靜音 + 自動播放時,切換到其他瀏覽器 tabs 分頁一段時間再切回來,會發現原本播放頁的影片是被暫停又重新播放的。 但是..但是瀏覽器的行為原本不是這樣啊!!! 排查過程 測試影片平台 * 公司平台任何一部影片 * Youtube 平台任何一部影片 錯誤複現 * 使用 Chrome 進入目前的播放頁 * 或是把有播放器自動播放且靜音的網頁作為該網站的首次進入點(ex:Youtube 播放頁)也就是初次打開網站即遇見播放器,即可複現此一情境。 排查方向 瀏覽器 核心版本 影片平台 是否複現(暫停影片) Chrome Chromium 109 Youtube 是 Brave Chromium 108 Youtube 否 Edge Chromium 108 Youtube 否 Firefox
SimonAllen

Day30 心得-持續成長、持續前進

不知不覺就完成第二次鐵人賽 這次有幸加入一個公司團隊,前端 team 內有過半的成員參加鐵人賽,雖然前輩喊團報好幾次,但最終大家還是下水餃般的各自報名。我先自首我是拖到最後才報名的 不可否認,當周遭也有夥伴參賽時,對參賽者的動力會有很大的幫助。 賽後檢討 一樣來點賽後檢討 時間分配不均 去年就有的問題,不過今年可用時間和去年不一樣 ( 時間更壓縮 ),雖然在學習、筆記時間的拿捏已經比去年好許多,但仍有調整的空間。 心態調配 主要得面對自己心中的障礙,畢竟去年的這個時候,也是在前公司處理影音相關的任務,說實話有點膩了,現在完全不敢想明年會不會也是這樣XD 反過來說,自己是不是不穩定? 這 30 天不斷思索這個問題,是否心態上還有調整的地方?但 今日不做,明日就會後悔是一定的。 學習事項的優先性 鐵人賽期間,常常有似乎有更重要的事要做這種想法。 隨著前端技能的增加,對網頁眼界的擴展反而讓待學習事項越積越多,這 30 天得忍住摸其他東西的慾望,花時間在鐵人賽主題上,也算是對前端工程師的一種考驗吧。 文筆流暢度 與去年相比
SimonAllen

Day29 Video.js 影片標題套件

今天的內容仍是 Video.js 如果我想要替 Video.js 影片添加標題文字,例如 Youtube 全螢幕時,左上角會有標題文字一樣,我該怎麼做呢? 播放器的影片標題和昨天的浮水印一樣,可以透過純 HTML + CSS 來達成,這裡我一樣選擇使用 Videojs plugins 的方式來添加浮水印。 video.js 影片標題套件 ITMAN_title 既然昨天都能自定義、修改別人的 Video.js 浮水印套件,那當然自己也能寫一個,今天就來介紹自己寫的 video.js 標題套件:video.js 影片標題套件 ITMAN_title。 安裝、引入檔案 git clone 此專案後,取出 ITMAN.title.css
SimonAllen