在視頻網站上看視頻，切換視頻的時候怎麼保證不閃？

網站上切換解析度就相當於切換到另一個視頻。我自己試著將video.src的切換到不同的stream時中間總是會閃一下再切換到另一個視頻，那麼那些視頻網站是怎麼做到轉換視頻是不閃的？用一張圖片覆蓋直到video.src完全轉換到另一個stream嗎？

if (this.indicator.hasUserMedia()) {
navigator.getUserMedia({ video: true, audio: true }, function (stream) {
self.localVideo.src = window.URL.createObjectURL(stream);
setInterval(function(){
self.localVideo.src = window.URL.createObjectURL(stream);
}, 1000);
}, function(){});
}


就是在1秒鐘之後我把localVideo.src換成另外一個stream（代碼裡面還是同樣一個stream）的時候會閃一下。

---

用 MediaSource API 。

MediaSource 實例可以 .appendBuffer() ，你可以在切換 source 時調用 video.pause() ，待下一個 buffer 準備好之後調用 source.appendBuffer(buffer) ，再繼續播放視頻 video.play() 。

Media Source Extensions

http://html5-demos.appspot.com/static/media-source.html

---

實際看各家切換清晰度時，你會發現不是立即切換的，提示你正在切換中，其實是因為視頻已經切片了，更換清晰度的切片要等當前的播放完畢

安卓上，我自己寫的播放器，是視頻的包放在緩衝池了，當編碼不一致（某些需要重新初始化解碼器，某些不需要（H.264））的時候，解碼線程不會被block，解碼後的視頻幀，仍然放在一個緩衝池裡，渲染器從緩衝池裡拿解碼後的幀，這樣可以不閃

---

瀉藥，但沒研究過這方面..

不過你看看源碼，ctrl+f找找對應的js什麼看看或者搬過來肯定是可以的。。

而且你最好發個樣例看看

---

突然想到那些視頻網站的視頻原文件並不是只有一個，而是被切分了的吧？那如果真是這樣～嘿嘿嘿

---

推薦閱讀：