Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/handle playing after ended #349

Merged
merged 6 commits into from
Jul 8, 2024
Merged

Feat/handle playing after ended #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
feac3ef
chore: improve debugging in demo app
martinstark Jul 3, 2024
3536fa2
feat: support playing again after ended
martinstark Jul 3, 2024
b6ce2e8
chore: update dev app
martinstark Jul 3, 2024
ae11be4
chore: update safari mute micro buffer comment
martinstark Jul 3, 2024
37dd857
chore: add comment to ended -> play handling
martinstark Jul 3, 2024
7e010b1
refactor: add reset method
martinstark Jul 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/favicon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 68 additions & 6 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<!doctype html>
<head>
<link rel="icon" href="favicon.svg" />
<title>Media Event Filter Demo</title>
<style>
html {
font-size: 67.5%;
Expand Down Expand Up @@ -104,33 +106,93 @@
];

const mediaElement = document.getElementById("videoEl");
mediaElement.src = videos[0];
let i = 1;
let seekOrBufferTimestamp = 0;

mediaElement.src = videos[0];

Object.values(MediaEvent).forEach((evt) =>
mediaElement.addEventListener(evt, () => {
console.log("%cNativeEv: %s", "color:#cf1313;font-weight:bold;", evt);
const mediaElementState = {
networkState: mediaElement.networkState,
readyState: mediaElement.readyState,
paused: mediaElement.paused,
ended: mediaElement.ended,
error: mediaElement.error,
currentTime: mediaElement.currentTime,
duration: mediaElement.duration,
seeking: mediaElement.seeking,
};

console[evt === MediaEvent.timeupdate ? "debug" : "log"](
"%cNativeEv: %s",
"color:#cf1313;font-weight:bold;",
evt,
);

console[evt === MediaEvent.timeupdate ? "debug" : "info"](
"Media Element State",
mediaElementState,
);
}),
);

getMediaEventFilter({
mediaElement,
callback: (evt) => {
console.log("%cFiltered: %s", "color:#267dff;font-weight:bold;", evt);
if (evt === FilteredMediaEvent.TIME_UPDATE) {
console.debug(
"%cFiltered: %s",
"color:#267dff;font-weight:bold;",
evt,
);
return;
}

if (evt === FilteredMediaEvent.TIME_UPDATE) return;
if (
[FilteredMediaEvent.BUFFERING, FilteredMediaEvent.SEEKING].includes(
evt,
)
) {
seekOrBufferTimestamp = Date.now();
}

if (
[FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(evt)
) {
console.log(
"%cFiltered: %s",
"color:#267dff;font-weight:bold;",
`${evt} (${(Date.now() - seekOrBufferTimestamp) / 1000}s)`,
);
console.info("\n");
} else {
console.log("%cFiltered: %s", "color:#267dff;font-weight:bold;", evt);
console.info("\n");
}

const box = document.createElement("div");

box.classList.add("event");
box.innerText = i + ": " + evt;
box.innerText =
i +
": " +
`${evt} ${
seekOrBufferTimestamp &&
[FilteredMediaEvent.BUFFERED, FilteredMediaEvent.SEEKED].includes(
evt,
)
? `(${(Date.now() - seekOrBufferTimestamp) / 1000}s)`
: ""
}`;

i++;

const events = document.getElementById("events");

events.prepend(box);

if (events.childElementCount > 10) {
if (events.childElementCount > 20) {
events.removeChild(events.lastChild);
}
},
Expand Down
28 changes: 22 additions & 6 deletions src/media-event-filter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,22 +116,29 @@ export const getMediaEventFilter = ({
...initialState,
};

const reset = (): void => {
clearRatechangeBufferTimeout();

state = {
...initialState,
};
};

const isNotReady = (): boolean =>
allowResumeAfterEnded ? state.loading : state.loading || state.ended;

// Reset state of media event filter when a new src is
// attached to the media element.
const onEmptied = (): void => {
clearRatechangeBufferTimeout();

state = {
...initialState,
};
reset();
};

const onCanPlayThrough = (): void => {
if (!state.loading) {
// Recover from Safari "mute" micro buffer triggered by "waiting"
// Safari triggers "waiting" when muting a stream.
//
// This logic recovers from the Safari micro buffer triggered
// by a mute.
if (state.buffering && mediaElement.playbackRate > 0) {
state = {
...state,
Expand Down Expand Up @@ -239,6 +246,15 @@ export const getMediaEventFilter = ({
};

const onPlay = (): void => {
// handle pressing play or seeking back into the video after ended.
//
// mediaElement.ended will already have toggled from true to false
// when this happens, use cached ended state instead.
if (state.ended) {
reset();
return;
}

if (isNotReady()) return;

// block mse plays triggered after buffering and seeks
Expand Down
Loading