北京
你發了一條產品演示視頻，后臺只告訴你“67%的人看完了”。這個數字回答不了核心疑問：大家是在第15秒的客套話里流失的，還是在第3分鐘的操作演示處反復回拖？完成率只講“看了多少”，熱力圖才能標出“看了哪里”——那些被集體跳過的開頭、被反復觀看的段落、以及觀眾突然離開的斷崖點。
目前，這類每秒鐘觀看熱度的圖表，往往是視頻托管平臺的高級分析功能。但原理并不玄乎，核心就是一條規則：別盯著播放事件，改為追蹤播放時間里的“區間段”。因為快進、重看會讓事件說謊，但一段段覆蓋到的媒體時間不會。你只需準備一個客戶端間隔追蹤器、一個信標接收端和一段畫布渲染代碼，不用引入任何分析廠商，數據也留在自己手里。
我們動手寫一個追蹤器，不到80行，零外部依賴。一次觀看會話被表達為若干區間：{start, end}，時間軸用的是媒體自身的時間。播放推進時打開一個區間，一旦發生暫停、跳轉、播放結束或標簽頁隱藏，就關閉區間。有人倒退重看，只會形成重疊的新區間，這正是熱力圖需要的信號——同一個位置被多次覆蓋，說明觀眾在那段糾結或琢磨。
具體實現上，我們監聽timeupdate事件來驅動tick，但做了一個防御：如果在兩次tick之間，時間位置后退或往前跳躍超過5秒，就認為錯過了一次跳轉，主動關閉當前區間并以新位置重新開始。這樣能適應timeupdate在不同設備上4赫茲到66赫茲的觸發頻率差異。關閉區間時，我們過濾掉長度小于0.5秒的雜訊，只保留有價值的觀看片段。當頁面隱藏或關閉，立即觸發flush，以JSON格式打包videoId、sessionId和spans數組，通過navigator.sendBeacon發送到指定的收集端點。
sendBeacon是這套機制能存活的關鍵。它不會因為標簽頁關閉而被瀏覽器取消，相當于一個“發射后不管”的請求，保證數據最終到達。即便用戶看完視頻直接關窗，追蹤到的區間也會完整送出。與任何video元素對接都很簡單，不論是原生的標簽，還是hls.js、video.js驅動的播放器，只需在實例化WatchTracker時傳入視頻元素、videoId和收集地址。
熱力圖的構建邏輯也隨之清晰：收集到的所有區間，在服務端按每秒一個計數器展開聚合，最終用Canvas繪制出來。你立刻就能看見，哪一秒是黃金停留點，哪一秒是觀眾拍拍屁股走人的懸崖。這個自己搭建的工具，也許不會比商業平臺精細，但它解答問題時，你手里握著全部原始數據，而且知道每一行代碼為什么這樣寫。
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
