Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-13 14:45:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Some progress for thumbnail fix on iOS

Browse Source
This commit is contained in:
Jip Fr 2023-12-10 22:12:09 +01:00
parent c4dcc42b9d
commit 3109da2154
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/player/internals/ThumbnailScraper.tsx
View File

@ -40,6 +40,10 @@ class ThumnbnailWorker {
start(source: LoadableSource) { start(source: LoadableSource) {
const el = document.createElement("video"); const el = document.createElement("video");
el.setAttribute("muted", "true");
// ! Remove before merging
el.setAttribute("controls", "true");
el.setAttribute("playsinline", "true");
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
this.hls = new Hls(); this.hls = new Hls();
if (source.type === "mp4") { if (source.type === "mp4") {
@ -65,6 +69,8 @@ class ThumnbnailWorker {
private async initVideo() { private async initVideo() {
if (!this.videoEl || !this.canvasEl) return; if (!this.videoEl || !this.canvasEl) return;
// ! Remove before merging
document.body.appendChild(this.videoEl);
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
this.videoEl?.addEventListener("loadedmetadata", resolve); this.videoEl?.addEventListener("loadedmetadata", resolve);
this.videoEl?.addEventListener("error", reject); this.videoEl?.addEventListener("error", reject);
@ -76,9 +82,14 @@ class ThumnbnailWorker {
private async takeSnapshot(at: number) { private async takeSnapshot(at: number) {
if (!this.videoEl || !this.canvasEl) return; if (!this.videoEl || !this.canvasEl) return;
await this.videoEl.play(); // so that `seeked` actually triggers
this.videoEl.currentTime = at; this.videoEl.currentTime = at;
await new Promise((resolve) => { await new Promise((resolve) => {
this.videoEl?.addEventListener("seeked", resolve); const onSeeked = () => {
this.videoEl?.removeEventListener("seeked", onSeeked);
resolve(null);
};
this.videoEl?.addEventListener("seeked", onSeeked);
}); });
if (!this.videoEl || !this.canvasEl) return; if (!this.videoEl || !this.canvasEl) return;
const ctx = this.canvasEl.getContext("2d"); const ctx = this.canvasEl.getContext("2d");
@ -91,6 +102,16 @@ class ThumnbnailWorker {
this.canvasEl.height this.canvasEl.height
); );
const imgUrl = this.canvasEl.toDataURL(); const imgUrl = this.canvasEl.toDataURL();
// ! Remove before merging
const img = new Image();
img.src = imgUrl;
img.style.border = "1px solid yellow";
document.body.appendChild(img);
const p = document.createElement("p");
p.innerText = `${at}`;
document.body.appendChild(p);
if (this.interrupted) return; if (this.interrupted) return;
if (imgUrl === "data:," || !imgUrl) return; // failed image rendering if (imgUrl === "data:," || !imgUrl) return; // failed image rendering

2
src/pages/developer/VideoTesterView.tsx
View File

@ -19,7 +19,7 @@ const testMeta: PlayerMeta = {
const testStreams: Record<StreamType, string> = { const testStreams: Record<StreamType, string> = {
hls: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8", hls: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
mp4: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4", mp4: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
}; };
const streamTypes: Record<StreamType, string> = { const streamTypes: Record<StreamType, string> = {