monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

chore(frontend/MkMediaVideo): loop and autoplay silent videos (#12392)

Browse source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-11-26 16:15:24 +09:00 committed by GitHub
parent c9503da8f8
commit d60f645d1d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/frontend/src/components/MkMediaVideo.vue
View file

@ -37,6 +37,7 @@ import * as Misskey from 'misskey-js';
import bytes from '@/filters/bytes.js'; import bytes from '@/filters/bytes.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import hasAudio from '@/scripts/media-has-audio.js';
const props = defineProps<{ const props = defineProps<{
video: Misskey.entities.DriveFile; video: Misskey.entities.DriveFile;
@ -49,6 +50,12 @@ const videoEl = shallowRef<HTMLVideoElement>();
watch(videoEl, () => { watch(videoEl, () => {
if (videoEl.value) { if (videoEl.value) {
videoEl.value.volume = 0.3; videoEl.value.volume = 0.3;
hasAudio(videoEl.value).then(had => {
if (!had) {
videoEl.value.loop = videoEl.value.muted = true;
videoEl.value.play();
}
});
} }
}); });
</script> </script>

9
packages/frontend/src/scripts/media-has-audio.ts Normal file
View file

@ -0,0 +1,9 @@
export default async function hasAudio(media: HTMLMediaElement) {
const cloned = media.cloneNode() as HTMLMediaElement;
cloned.muted = (cloned as typeof cloned & Partial<HTMLVideoElement>).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;
}