File size: 1,090 Bytes
97e3689
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script setup>
import { ref, computed, onMounted } from "vue";

const apiUrl = import.meta.env.VITE_BASE_URL;

const { videoName, startAt } = defineProps({
    videoName: String,
    startAt: {
        required: false,
        type: Number,
    },
});

const url = computed(
    () => `${apiUrl}/api/video/stream?video_name=${videoName}`
    // () => `http://baobao.com`
);

const video = ref(null);
const videoContainer = ref(null);
onMounted(() => {
    if (startAt) video.value.currentTime = startAt;
});

const handleVideoLoad = () => {
    videoContainer.value.scrollIntoView({
        behavior: "smooth",
        block: "center",
    });
};
</script>

<template>
    <!-- Video Player -->
    <p>{{ url }}</p>
    <div class="player" ref="videoContainer">
        <video
            controls
            ref="video"
            @loadeddata="handleVideoLoad"
            autoplay
            loop
            muted
        >
            <source :src="`${url}`" type="video/mp4" />
        </video>
    </div>
</template>

<style lang="scss" scoped>
video {
    width: 100%;
}
</style>