mirror of
https://github.com/Swiftgram/Telegram-iOS.git
synced 2025-08-08 08:31:13 +00:00
HLS player updates
This commit is contained in:
Isaac
parent
575fa5264d
commit
5959eb29d3
File diff suppressed because one or more lines are too long
@ -57,6 +57,7 @@ export class SourceBufferStub extends EventTarget {
|
||||
window.bridgeObjectMap[this.bridgeId] = this;
|
||||
|
||||
window.bridgeInvokeAsync(this.bridgeId, "SourceBuffer", "constructor", {
|
||||
"mediaSourceId": this.mediaSource.bridgeId,
|
||||
"mimeType": mimeType
|
||||
});
|
||||
}
|
||||
@ -146,6 +147,7 @@ export class MediaSourceStub extends EventTarget {
|
||||
this._duration = NaN;
|
||||
|
||||
window.bridgeInvokeAsync(this.bridgeId, "MediaSource", "constructor", {
|
||||
"id": this.internalId
|
||||
});
|
||||
|
||||
// Simulate asynchronous opening of MediaSource
|
||||
@ -167,14 +169,25 @@ export class MediaSourceStub extends EventTarget {
|
||||
const sourceBuffer = new SourceBufferStub(this, mimeType);
|
||||
this.sourceBuffers._add(sourceBuffer);
|
||||
this.activeSourceBuffers._add(sourceBuffer);
|
||||
|
||||
window.bridgeInvokeAsync(this.bridgeId, "MediaSource", "updateSourceBuffers", {
|
||||
"ids": this.sourceBuffers._buffers.map((sb) => sb.bridgeId)
|
||||
}).then((result) => {
|
||||
})
|
||||
|
||||
return sourceBuffer;
|
||||
}
|
||||
|
||||
removeSourceBuffer(sourceBuffer) {
|
||||
if (!this.sourceBuffers._remove(sourceBuffer)) {
|
||||
throw new DOMException('SourceBuffer not found', 'NotFoundError');
|
||||
throw new DOMException('SourceBuffer not found', 'NotFoundError');
|
||||
}
|
||||
this.activeSourceBuffers._remove(sourceBuffer);
|
||||
|
||||
window.bridgeInvokeAsync(this.bridgeId, "MediaSource", "updateSourceBuffers", {
|
||||
"ids": this.sourceBuffers._buffers.map((sb) => sb.bridgeId)
|
||||
}).then((result) => {
|
||||
})
|
||||
}
|
||||
|
||||
endOfStream(error) {
|
||||
|
||||
@ -2,9 +2,11 @@ import { TimeRangesStub } from "./TimeRangesStub.js"
|
||||
import { TextTrackStub, TextTrackListStub } from "./TextTrackStub.js"
|
||||
|
||||
export class VideoElementStub extends EventTarget {
|
||||
constructor() {
|
||||
constructor(id) {
|
||||
super();
|
||||
|
||||
this.instanceId = id;
|
||||
|
||||
this.bridgeId = window.nextInternalId;
|
||||
window.nextInternalId += 1;
|
||||
window.bridgeObjectMap[this.bridgeId] = this;
|
||||
@ -23,13 +25,14 @@ export class VideoElementStub extends EventTarget {
|
||||
this.autoplay = false;
|
||||
this.controls = false;
|
||||
this.error = null;
|
||||
this.src = '';
|
||||
this._src = '';
|
||||
this.videoWidth = 0;
|
||||
this.videoHeight = 0;
|
||||
this.textTracks = new TextTrackListStub();
|
||||
this.isWaiting = false;
|
||||
|
||||
window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "constructor", {
|
||||
"instanceId": this.instanceId
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
@ -52,6 +55,7 @@ export class VideoElementStub extends EventTarget {
|
||||
this.dispatchEvent(new Event('seeking'));
|
||||
|
||||
window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "setCurrentTime", {
|
||||
"instanceId": this.instanceId,
|
||||
"currentTime": value
|
||||
}).then((result) => {
|
||||
this.dispatchEvent(new Event('seeked'));
|
||||
@ -59,6 +63,33 @@ export class VideoElementStub extends EventTarget {
|
||||
}
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this._src;
|
||||
}
|
||||
|
||||
set src(value) {
|
||||
this._src = value;
|
||||
var media = window.mediaSourceMap[this._src];
|
||||
if (media) {
|
||||
window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "setMediaSource", {
|
||||
"instanceId": this.instanceId,
|
||||
"mediaSourceId": media.bridgeId
|
||||
}).then((result) => {
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
removeAttribute(name) {
|
||||
if (name === "src") {
|
||||
this._src = "";
|
||||
}
|
||||
}
|
||||
|
||||
querySelectorAll(name) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
return fragment.querySelectorAll('*');
|
||||
}
|
||||
|
||||
bridgeUpdateBuffered(value) {
|
||||
const updatedRanges = value;
|
||||
var ranges = [];
|
||||
@ -103,6 +134,7 @@ export class VideoElementStub extends EventTarget {
|
||||
play() {
|
||||
if (this.paused) {
|
||||
return window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "play", {
|
||||
"instanceId": this.instanceId,
|
||||
}).then((result) => {
|
||||
this.dispatchEvent(new Event('play'));
|
||||
this.dispatchEvent(new Event('playing'));
|
||||
@ -118,6 +150,7 @@ export class VideoElementStub extends EventTarget {
|
||||
this.dispatchEvent(new Event('pause'));
|
||||
|
||||
return window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "pause", {
|
||||
"instanceId": this.instanceId,
|
||||
}).then((result) => {
|
||||
})
|
||||
}
|
||||
@ -131,43 +164,12 @@ export class VideoElementStub extends EventTarget {
|
||||
return window.mediaSourceMap[this.src];
|
||||
}
|
||||
|
||||
/*_simulateTimeUpdate() {
|
||||
if (this._isPlaying) {
|
||||
// Simulate time progression
|
||||
setTimeout(() => {
|
||||
var bufferedEnd = 0.0;
|
||||
|
||||
const media = this._getMedia();
|
||||
if (media) {
|
||||
if (media.sourceBuffers.length != 0) {
|
||||
this.buffered = media.sourceBuffers._buffers[0].buffered;
|
||||
bufferedEnd = this.buffered.length == 0 ? 0 : this.buffered.end(this.buffered.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Consume buffered data
|
||||
if (this.currentTime < bufferedEnd) {
|
||||
// Advance currentTime
|
||||
this._currentTime += 0.1 * this.playbackRate; // Increment currentTime
|
||||
this.dispatchEvent(new Event('timeupdate'));
|
||||
|
||||
// Continue simulation
|
||||
this._simulateTimeUpdate();
|
||||
} else {
|
||||
console.log("Buffer underrun");
|
||||
// Buffer underrun
|
||||
this._isPlaying = false;
|
||||
this.paused = true;
|
||||
this.dispatchEvent(new Event('waiting'));
|
||||
// The player should react by buffering more data
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}*/
|
||||
|
||||
addTextTrack(kind, label, language) {
|
||||
const textTrack = new TextTrackStub(kind, label, language);
|
||||
this.textTracks._add(textTrack);
|
||||
return textTrack;
|
||||
}
|
||||
|
||||
load() {
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,13 +40,11 @@ export function bridgeInvokeCallback(callbackId, result) {
|
||||
}
|
||||
}
|
||||
|
||||
var useStubs = true;
|
||||
|
||||
window.nextInternalId = 0;
|
||||
window.mediaSourceMap = {};
|
||||
|
||||
// Replace the global MediaSource with our stub
|
||||
if (useStubs && typeof window !== 'undefined') {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.MediaSource = MediaSourceStub;
|
||||
window.ManagedMediaSource = MediaSourceStub;
|
||||
window.SourceBuffer = SourceBufferStub;
|
||||
@ -57,178 +55,171 @@ if (useStubs && typeof window !== 'undefined') {
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function postPlayerEvent(eventName, eventData) {
|
||||
function postPlayerEvent(id, eventName, eventData) {
|
||||
if (window.webkit && window.webkit.messageHandlers) {
|
||||
window.webkit.messageHandlers.performAction.postMessage({'event': eventName, 'data': eventData});
|
||||
}
|
||||
};
|
||||
|
||||
var video;
|
||||
var hls;
|
||||
|
||||
var isManifestParsed = false;
|
||||
var isFirstFrameReady = false;
|
||||
|
||||
var currentTimeUpdateTimeout = null;
|
||||
|
||||
export function playerInitialize(params) {
|
||||
video.muted = false;
|
||||
|
||||
video.addEventListener('loadeddata', (event) => {
|
||||
if (!isFirstFrameReady) {
|
||||
isFirstFrameReady = true;
|
||||
refreshPlayerStatus();
|
||||
}
|
||||
});
|
||||
video.addEventListener("playing", function() {
|
||||
refreshPlayerStatus();
|
||||
});
|
||||
video.addEventListener("pause", function() {
|
||||
refreshPlayerStatus();
|
||||
});
|
||||
video.addEventListener("seeking", function() {
|
||||
refreshPlayerStatus();
|
||||
});
|
||||
video.addEventListener("waiting", function() {
|
||||
refreshPlayerStatus();
|
||||
});
|
||||
|
||||
hls = new Hls({
|
||||
startLevel: 0,
|
||||
testBandwidth: false,
|
||||
debug: params['debug'] || true,
|
||||
autoStartLoad: false,
|
||||
backBufferLength: 30,
|
||||
maxBufferLength: 60,
|
||||
maxMaxBufferLength: 60,
|
||||
maxFragLookUpTolerance: 0.001,
|
||||
nudgeMaxRetry: 10000
|
||||
});
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, function() {
|
||||
isManifestParsed = true;
|
||||
refreshPlayerStatus();
|
||||
});
|
||||
|
||||
hls.on(Hls.Events.LEVEL_SWITCHED, function() {
|
||||
refreshPlayerStatus();
|
||||
});
|
||||
hls.on(Hls.Events.LEVELS_UPDATED, function() {
|
||||
refreshPlayerStatus();
|
||||
});
|
||||
|
||||
hls.loadSource('master.m3u8');
|
||||
hls.attachMedia(video);
|
||||
}
|
||||
|
||||
export function playerLoad(initialLevelIndex) {
|
||||
hls.startLevel = initialLevelIndex;
|
||||
hls.startLoad(-1, false);
|
||||
}
|
||||
|
||||
export function playerPlay() {
|
||||
video.play();
|
||||
}
|
||||
|
||||
export function playerPause() {
|
||||
video.pause();
|
||||
}
|
||||
|
||||
export function playerSetBaseRate(value) {
|
||||
video.playbackRate = value;
|
||||
}
|
||||
|
||||
export function playerSetLevel(level) {
|
||||
if (level >= 0) {
|
||||
hls.currentLevel = level;
|
||||
} else {
|
||||
hls.currentLevel = -1;
|
||||
window.webkit.messageHandlers.performAction.postMessage({'instanceId': id, 'event': eventName, 'data': eventData});
|
||||
}
|
||||
}
|
||||
|
||||
export function playerSeek(value) {
|
||||
video.currentTime = value;
|
||||
}
|
||||
export class HlsPlayerInstance {
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
this.isManifestParsed = false;
|
||||
this.currentTimeUpdateTimeout = null;
|
||||
this.video = new VideoElementStub(this.id);
|
||||
}
|
||||
|
||||
export function playerSetIsMuted(value) {
|
||||
video.muted = value;
|
||||
}
|
||||
|
||||
function getLevels() {
|
||||
var levels = [];
|
||||
for (var i = 0; i < hls.levels.length; i++) {
|
||||
var level = hls.levels[i];
|
||||
levels.push({
|
||||
'index': i,
|
||||
'bitrate': level.bitrate || 0,
|
||||
'width': level.width || 0,
|
||||
'height': level.height || 0
|
||||
playerInitialize(params) {
|
||||
this.video.addEventListener("playing", () => {
|
||||
this.refreshPlayerStatus();
|
||||
});
|
||||
}
|
||||
return levels;
|
||||
}
|
||||
|
||||
function refreshPlayerStatus() {
|
||||
var isPlaying = false;
|
||||
if (!video.paused && !video.ended && video.readyState > 2) {
|
||||
isPlaying = true;
|
||||
this.video.addEventListener("pause", () => {
|
||||
this.refreshPlayerStatus();
|
||||
});
|
||||
this.video.addEventListener("seeking", () => {
|
||||
this.refreshPlayerStatus();
|
||||
});
|
||||
this.video.addEventListener("waiting", () => {
|
||||
this.refreshPlayerStatus();
|
||||
});
|
||||
|
||||
this.hls = new Hls({
|
||||
startLevel: 0,
|
||||
testBandwidth: false,
|
||||
debug: params['debug'] || true,
|
||||
autoStartLoad: false,
|
||||
backBufferLength: 30,
|
||||
maxBufferLength: 60,
|
||||
maxMaxBufferLength: 60,
|
||||
maxFragLookUpTolerance: 0.001,
|
||||
nudgeMaxRetry: 10000
|
||||
});
|
||||
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
this.isManifestParsed = true;
|
||||
this.refreshPlayerStatus();
|
||||
});
|
||||
|
||||
this.hls.on(Hls.Events.LEVEL_SWITCHED, () => {
|
||||
this.refreshPlayerStatus();
|
||||
});
|
||||
this.hls.on(Hls.Events.LEVELS_UPDATED, () => {
|
||||
this.refreshPlayerStatus();
|
||||
});
|
||||
|
||||
this.hls.loadSource(params["urlPrefix"] + "master.m3u8");
|
||||
this.hls.attachMedia(this.video);
|
||||
}
|
||||
|
||||
postPlayerEvent('playerStatus', {
|
||||
'isReady': isManifestParsed,
|
||||
'isFirstFrameReady': isFirstFrameReady,
|
||||
'isPlaying': !video.paused,
|
||||
'rate': isPlaying ? video.playbackRate : 0.0,
|
||||
'defaultRate': video.playbackRate,
|
||||
'levels': getLevels(),
|
||||
'currentLevel': hls.currentLevel
|
||||
});
|
||||
playerLoad(initialLevelIndex) {
|
||||
this.hls.startLevel = initialLevelIndex;
|
||||
this.hls.startLoad(-1, false);
|
||||
}
|
||||
|
||||
refreshPlayerCurrentTime();
|
||||
playerPlay() {
|
||||
this.video.play();
|
||||
}
|
||||
|
||||
if (isPlaying) {
|
||||
if (currentTimeUpdateTimeout == null) {
|
||||
currentTimeUpdateTimeout = setTimeout(() => {
|
||||
refreshPlayerCurrentTime();
|
||||
}, 200);
|
||||
playerPause() {
|
||||
this.video.pause();
|
||||
}
|
||||
|
||||
playerSetBaseRate(value) {
|
||||
this.video.playbackRate = value;
|
||||
}
|
||||
|
||||
playerSetLevel(level) {
|
||||
if (level >= 0) {
|
||||
this.hls.currentLevel = level;
|
||||
} else {
|
||||
this.hls.currentLevel = -1;
|
||||
}
|
||||
} else {
|
||||
if(currentTimeUpdateTimeout != null){
|
||||
clearTimeout(currentTimeUpdateTimeout);
|
||||
currentTimeUpdateTimeout = null;
|
||||
}
|
||||
|
||||
playerSeek(value) {
|
||||
this.video.currentTime = value;
|
||||
}
|
||||
|
||||
playerSetIsMuted(value) {
|
||||
this.video.muted = value;
|
||||
}
|
||||
|
||||
getLevels() {
|
||||
var levels = [];
|
||||
for (var i = 0; i < this.hls.levels.length; i++) {
|
||||
var level = this.hls.levels[i];
|
||||
levels.push({
|
||||
'index': i,
|
||||
'bitrate': level.bitrate || 0,
|
||||
'width': level.width || 0,
|
||||
'height': level.height || 0
|
||||
});
|
||||
}
|
||||
return levels;
|
||||
}
|
||||
|
||||
refreshPlayerStatus() {
|
||||
var isPlaying = false;
|
||||
if (!this.video.paused && !this.video.ended && this.video.readyState > 2) {
|
||||
isPlaying = true;
|
||||
}
|
||||
|
||||
postPlayerEvent(this.id, 'playerStatus', {
|
||||
'isReady': this.isManifestParsed,
|
||||
'isPlaying': !this.video.paused,
|
||||
'rate': isPlaying ? this.video.playbackRate : 0.0,
|
||||
'defaultRate': this.video.playbackRate,
|
||||
'levels': this.getLevels(),
|
||||
'currentLevel': this.hls.currentLevel
|
||||
});
|
||||
|
||||
this.refreshPlayerCurrentTime();
|
||||
|
||||
if (isPlaying) {
|
||||
if (this.currentTimeUpdateTimeout == null) {
|
||||
this.currentTimeUpdateTimeout = setTimeout(() => {
|
||||
this.refreshPlayerCurrentTime();
|
||||
}, 200);
|
||||
}
|
||||
} else {
|
||||
if(this.currentTimeUpdateTimeout != null){
|
||||
clearTimeout(this.currentTimeUpdateTimeout);
|
||||
this.currentTimeUpdateTimeout = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
refreshPlayerCurrentTime() {
|
||||
postPlayerEvent(this.id, 'playerCurrentTime', {
|
||||
'value': this.video.currentTime
|
||||
});
|
||||
this.currentTimeUpdateTimeout = setTimeout(() => {
|
||||
this.refreshPlayerCurrentTime()
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshPlayerCurrentTime() {
|
||||
postPlayerEvent('playerCurrentTime', {
|
||||
'value': video.currentTime
|
||||
window.invokeOnLoad = function() {
|
||||
postPlayerEvent(this.id, 'windowOnLoad', {
|
||||
});
|
||||
currentTimeUpdateTimeout = setTimeout(() => {
|
||||
refreshPlayerCurrentTime()
|
||||
}, 200);
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
if (useStubs) {
|
||||
video = new VideoElementStub();
|
||||
} else {
|
||||
video = document.createElement('video');
|
||||
video.playsInline = true;
|
||||
video.controls = true;
|
||||
document.body.appendChild(video);
|
||||
}
|
||||
|
||||
postPlayerEvent('windowOnLoad', {
|
||||
});
|
||||
window.invokeOnLoad();
|
||||
};
|
||||
|
||||
window.playerInitialize = playerInitialize;
|
||||
window.playerLoad = playerLoad;
|
||||
window.playerPlay = playerPlay;
|
||||
window.playerPause = playerPause;
|
||||
window.playerSetBaseRate = playerSetBaseRate;
|
||||
window.playerSetLevel = playerSetLevel;
|
||||
window.playerSeek = playerSeek;
|
||||
window.playerSetIsMuted = playerSetIsMuted;
|
||||
window.bridgeInvokeCallback = bridgeInvokeCallback;
|
||||
window.hlsPlayer_instances = {};
|
||||
|
||||
window.hlsPlayer_makeInstance = function(id) {
|
||||
window.hlsPlayer_instances[id] = new HlsPlayerInstance(id);
|
||||
}
|
||||
|
||||
window.hlsPlayer_destroyInstance = function(id) {
|
||||
const instance = window.hlsPlayer_instances[id];
|
||||
if (instance) {
|
||||
delete window.hlsPlayer_instances[id];
|
||||
instance.video.pause();
|
||||
instance.hls.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
window.bridgeInvokeCallback = bridgeInvokeCallback;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user