8000 feat: adjust video quality (#65) · zhihu/griffith@f34077c · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f34077c

Browse files
xiaoyuhenxiaoyuhen
authored
feat: adjust video quality (#65)
* feat: adjust video quality
1 parent 93867af commit f34077c

File tree

4 files changed

+40
-7
lines changed

4 files changed

+40
-7
lines changed

‎packages/griffith-hls/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import VideoComponent from './Video'
22

33
export default {
4-
pluginName: 'griffith-mp4',
4+
pluginName: 'griffith-hls',
55
VideoComponent,
66
willHandleSrcChange: true,
77
}

‎packages/griffith-mp4/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ import VideoComponent from './player'
33
export default {
44
pluginName: 'griffith-mp4',
55
VideoComponent,
6+
willHandleSrcChange: true,
67
}

‎packages/griffith-mp4/src/mse/controller.js

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default class MSE {
1010
constructor(video, src) {
1111
this.video = video
1212
this.src = src
13+
this.qualityChangeFlag = false
1314
this.videoQueue = []
1415
this.audioQueue = []
1516
this.sourceBuffers = {
@@ -67,7 +68,7 @@ export default class MSE {
6768

6869
init() {
6970
// 获取 mdat 外的数据
70-
this.loadData()
71+
return this.loadData()
7172
.then(res => {
7273
return new MP4Parse(new Uint8Array(res)).mp4BoxTreeObject
7374
})
@@ -116,10 +117,17 @@ export default class MSE {
116117
FMP4.moov(this.mp4Probe.mp4Data, 'audio')
117118
)
118119

119-
this.mediaSource.addEventListener('sourceopen', () => {
120+
// 如果是切换清晰度，mediaSource 的 readyState 已经 open 了，可以直接 append 数据。
121+
// mediaSource is already open when we switch video quality.
122+
if (this.qualityChangeFlag) {
120123
this.handleAppendBuffer(videoRawData, 'video')
121124
this.handleAppendBuffer(audioRawData, 'audio')
122-
})
125+
} else {
126+
this.mediaSource.addEventListener('sourceopen', () => {
127+
this.handleAppendBuffer(videoRawData, 'video')
128+
this.handleAppendBuffer(audioRawData, 'audio')
129+
})
130+
}
123131
})
124132
}
125133

@@ -144,10 +152,13 @@ export default class MSE {
144152

145153
// 对于已经请求的数据不再重复请求
146154
// No need to repeat request video data
147-
if (time && this.hasBufferedCache(this.video.currentTime)) {
155+
if (
156+
time &&
157+
this.hasBufferedCache(this.video.currentTime) &&
158+
!this.qualityChangeFlag
159+
) {
148160
return
149161
}
150-
151162
this.handleReplayCase()
152163

153164
this.loadData(start, end).then(mdatBuffer => {
@@ -180,9 +191,30 @@ export default class MSE {
180191
if (time) {
181192
this.needUpdateTime = true
182193
}
194+
195+
this.qualityChangeFlag = false
183196
})
184197
}
185198

199+
changeQuality(newSrc) {
200+
this.src = newSrc
201+
this.qualityChangeFlag = true
202+
this.removeBuffer()
203+
204+
this.init().then(() => {
205+
this.video.currentTime = this.video.currentTime
206+
})
207+
}
208+
209+
removeBuffer() {
210+
for (const key in this.sourceBuffers) {
211+
const track = this.sourceBuffers[key]
212+
const length = track.buffered.length
213+
214+
track.remove(track.buffered.start(0), track.buffered.end(length - 1))
215+
}
216+
}
217+
186218
loadData(start = 0, end = MAGIC_NUMBER) {
187219
return new Promise(resolve => {
188220
new FragmentFetch(this.src, start, end, resolve)

‎packages/griffith-mp4/src/player.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default class Player extends Component {
1212

1313
componentDidUpdate(prevProps) {
1414
if (this.props.src !== prevProps.src) {
15-
this.mse = new MSE(this.video, this.props.src)
15+
this.mse.changeQuality(this.props.src)
1616
}
1717
}
1818

0 commit comments

Comments
 (0)
0