chore(frontend/MkMediaVideo): loop and autoplay silent videos (#12392)
This commit is contained in:
parent
c9503da8f8
commit
d60f645d1d
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
Loading…
Reference in New Issue