nornoe.bsky.social
A Miiverse-themed Bluesky client
1.1 kB
59 lines
1<script setup lang="ts">
2 import type { AppBskyEmbedVideo } from '@atproto/api';
3import Hls from 'hls.js';
4
5 const props = defineProps<{
6 video: AppBskyEmbedVideo.View
7 }>()
8
9 const videoRef = ref<HTMLVideoElement | null>(null)
10
11 onMounted(() => {
12 if (Hls.isSupported() && videoRef.value) {
13 const hls = new Hls()
14 hls.loadSource(props.video.playlist)
15 hls.attachMedia(videoRef.value)
16 } else if (videoRef.value?.canPlayType('application/vnd.apple.mpegurl')) {
17 // Safari
18 videoRef.value.src = props.video.playlist
19 }
20 })
21</script>
22
23<template>
24
25 <div class="post-video" @click.prevent>
26
27 <video
28 ref="videoRef"
29 controls
30 loop
31 preload="metadata"
32 playsinline
33 :poster="video.thumbnail"
34 class="video-player"
35 >
36 Videos are not supported in your browser.
37 </video>
38
39 </div>
40
41</template>
42
43<style scoped lang="scss">
44 .post-video {
45 width: 100%;
46 max-width: 100%;
47 border-radius: 6px;
48 overflow: hidden;
49
50 .video-player {
51 width: 100%;
52 height: 100%;
53 object-fit: cover;
54 display: block;
55 border-radius: 6px;
56 }
57}
58</style>
59