From d60f645d1dc731d7ef6eff16081d2b5615412690 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Sun, 26 Nov 2023 16:15:24 +0900 Subject: [PATCH] chore(frontend/MkMediaVideo): loop and autoplay silent videos (#12392) --- packages/frontend/src/components/MkMediaVideo.vue | 7 +++++++ packages/frontend/src/scripts/media-has-audio.ts | 9 +++++++++ 2 files changed, 16 insertions(+) create mode 100644 packages/frontend/src/scripts/media-has-audio.ts diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 43c64b4c8..b6e8f1ff2 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -37,6 +37,7 @@ import * as Misskey from 'misskey-js'; import bytes from '@/filters/bytes.js'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; +import hasAudio from '@/scripts/media-has-audio.js'; const props = defineProps<{ video: Misskey.entities.DriveFile; @@ -49,6 +50,12 @@ const videoEl = shallowRef(); watch(videoEl, () => { if (videoEl.value) { videoEl.value.volume = 0.3; + hasAudio(videoEl.value).then(had => { + if (!had) { + videoEl.value.loop = videoEl.value.muted = true; + videoEl.value.play(); + } + }); } }); diff --git a/packages/frontend/src/scripts/media-has-audio.ts b/packages/frontend/src/scripts/media-has-audio.ts new file mode 100644 index 000000000..3421a38a7 --- /dev/null +++ b/packages/frontend/src/scripts/media-has-audio.ts @@ -0,0 +1,9 @@ +export default async function hasAudio(media: HTMLMediaElement) { + const cloned = media.cloneNode() as HTMLMediaElement; + cloned.muted = (cloned as typeof cloned & Partial).playsInline = true; + cloned.play(); + await new Promise((resolve) => cloned.addEventListener('playing', resolve)); + const result = !!(cloned as any).audioTracks?.length || (cloned as any).mozHasAudio || !!(cloned as any).webkitAudioDecodedByteCount; + cloned.remove(); + return result; +}