You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { downLoadUrl } from "@/utils/auth";
|
|
import { onMounted } from "vue";
|
|
|
|
defineOptions({
|
|
name: "PeopleVideo"
|
|
});
|
|
|
|
const videoFlag = ref(false);
|
|
const videoUrl = ref("");
|
|
const patientSilentVideo = ref("");
|
|
const status = ref(false);
|
|
const videoPlayer = ref();
|
|
const changeVideo = url => {
|
|
if (status.value === false) {
|
|
videoUrl.value = `data:video/mp4;base64,${url}`;
|
|
|
|
const video = document.createElement("video");
|
|
video.src = `data:video/mp4;base64,${url}`;
|
|
video.controls = false;
|
|
video.autoplay = true;
|
|
video.style.width = "100%";
|
|
video.style.height = "100%";
|
|
video.style.objectFit = "cover";
|
|
video.addEventListener("canplaythrough", () => {
|
|
// 添加到页面的某个元素上
|
|
document.getElementById("video_content").appendChild(video);
|
|
status.value = true;
|
|
videoFlag.value = true;
|
|
});
|
|
video.addEventListener("ended", () => {
|
|
// 视频播放完毕后的操作
|
|
videoFlag.value = false;
|
|
status.value = false;
|
|
video.remove();
|
|
});
|
|
} else {
|
|
setTimeout(() => {
|
|
changeVideo(url);
|
|
}, 1000);
|
|
}
|
|
};
|
|
defineExpose({
|
|
openVideo(url) {
|
|
if (url) {
|
|
changeVideo(url);
|
|
} else {
|
|
videoFlag.value = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
const id = sessionStorage.getItem("patientSilentVideo");
|
|
patientSilentVideo.value = downLoadUrl(id);
|
|
});
|
|
// const handleVideoEnded = () => {
|
|
// // videoFlag.value = false;
|
|
// };
|
|
</script>
|
|
|
|
<template>
|
|
<div class="PeopleVideo">
|
|
<!-- <img v-show="!videoFlag" :src="peopleImg" alt="" /> -->
|
|
|
|
<div class="video_content" id="video_content">
|
|
<video
|
|
v-show="!videoFlag"
|
|
ref="videoPlayer"
|
|
muted
|
|
loop
|
|
:src="patientSilentVideo"
|
|
autoplay
|
|
:controls="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.PeopleVideo {
|
|
height: calc(100vh - 350px);
|
|
|
|
img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
height: 100%;
|
|
}
|
|
|
|
.video_content {
|
|
width: 500px;
|
|
height: 100%;
|
|
}
|
|
|
|
.video_content video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
</style>
|