|
|
@ -1,36 +1,57 @@
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import peopleImg from "@/assets/newInquiry/people.jpg";
|
|
|
|
import peopleMp4 from "../../../../../public/people.mp4";
|
|
|
|
import { ref } from "vue";
|
|
|
|
import { ref } from "vue";
|
|
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
defineOptions({
|
|
|
|
name: "PeopleVideo"
|
|
|
|
name: "PeopleVideo"
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const videoFlag = ref(false);
|
|
|
|
const videoFlag = ref(false);
|
|
|
|
const videoUrl = ref("");
|
|
|
|
const videoUrl = ref("");
|
|
|
|
const videoPlayer = ref();
|
|
|
|
const videoPlayer = ref();
|
|
|
|
defineExpose({
|
|
|
|
defineExpose({
|
|
|
|
openVideo(url) {
|
|
|
|
openVideo(url) {
|
|
|
|
if (url) {
|
|
|
|
if (url) {
|
|
|
|
videoFlag.value = true;
|
|
|
|
|
|
|
|
videoUrl.value = `data:video/mp4;base64,${url}`;
|
|
|
|
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);
|
|
|
|
|
|
|
|
videoFlag.value = true;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
video.addEventListener("ended", () => {
|
|
|
|
|
|
|
|
// 视频播放完毕后的操作
|
|
|
|
|
|
|
|
videoFlag.value = false;
|
|
|
|
|
|
|
|
video.remove();
|
|
|
|
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
videoFlag.value = false;
|
|
|
|
videoFlag.value = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const handleVideoEnded = () => {
|
|
|
|
// const handleVideoEnded = () => {
|
|
|
|
videoFlag.value = false;
|
|
|
|
// // videoFlag.value = false;
|
|
|
|
};
|
|
|
|
// };
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="PeopleVideo">
|
|
|
|
<div class="PeopleVideo">
|
|
|
|
<img v-if="!videoFlag" :src="peopleImg" alt="" />
|
|
|
|
<!-- <img v-show="!videoFlag" :src="peopleImg" alt="" /> -->
|
|
|
|
<div class="video_content" v-if="videoFlag">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="video_content" id="video_content">
|
|
|
|
<video
|
|
|
|
<video
|
|
|
|
|
|
|
|
v-show="!videoFlag"
|
|
|
|
ref="videoPlayer"
|
|
|
|
ref="videoPlayer"
|
|
|
|
:src="videoUrl"
|
|
|
|
muted
|
|
|
|
@ended="handleVideoEnded"
|
|
|
|
loop
|
|
|
|
|
|
|
|
:src="peopleMp4"
|
|
|
|
autoplay
|
|
|
|
autoplay
|
|
|
|
:controls="false"
|
|
|
|
:controls="false"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|