feat: 添加视频播放功能并优化播放器样式
- 新增视频播放弹窗功能，支持通过token获取视频URL - 使用Artplayer实现视频播放器，添加自动播放功能 - 优化播放器容器圆角和溢出样式 - 移除图片固定宽度限制，改为自适应 - 添加meta标签防止referrer泄露 - 实现播放器关闭功能，释放资源
This commit is contained in:
DESKTOP-RQ919RC\Pc
55
index.html
55
index.html
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<style>
|
||||
@@ -31,8 +32,9 @@
|
||||
</div>
|
||||
<div class="content flexcenter">
|
||||
<!-- <video class="img" :controls="isPlaying ? true : false" src="https://cdnfhnfile.115cdn.net/6870d9500edfa26822026f57689fdaa03fc219f0/%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4?t=1752491453&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=efc45551ccbd233122fe5dc2c53b5b53&us=5242880000&uc=10&v=1" preload="none" poster="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_5otcn_qqsgFptxhXa6QWi2uePJ5Bg8WFLPIqoYV7MtdWWmQtw3_-kU8uRQ0NDI5" @pause="isPlaying = false"></video> -->
|
||||
<!-- <video class="img" autoplay src="https://dl1-v6.aliyundrive.cloud/dC9ELbBd%2F988690082%2F6870d948ef3b30d87fa84bc3a32fd16370f37c2e%2F6870d948f17001272f7c4c17b11d759a137ca234?ap=b8c990e60b18446eb07f5dca30398e8a&callback=eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9iajI5LmFwaS1ocC5hbGl5dW5wZHMuY29tL3YyL2ZpbGUvZG93bmxvYWRfY2FsbGJhY2siLCJjYWxsYmFja0JvZHkiOiJodHRwSGVhZGVyLnJhbmdlPSR7aHR0cEhlYWRlci5yYW5nZX1cdTAwMjZidWNrZXQ9JHtidWNrZXR9XHUwMDI2b2JqZWN0PSR7b2JqZWN0fVx1MDAyNmRvbWFpbl9pZD0ke3g6ZG9tYWluX2lkfVx1MDAyNnVzZXJfaWQ9JHt4OnVzZXJfaWR9XHUwMDI2ZHJpdmVfaWQ9JHt4OmRyaXZlX2lkfVx1MDAyNmZpbGVfaWQ9JHt4OmZpbGVfaWR9XHUwMDI2cGRzX3BhcmFtcz0ke3g6cGRzX3BhcmFtc31cdTAwMjZ2ZXJzaW9uPSR7eDp2ZXJzaW9ufSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQiLCJjYWxsYmFja1N0YWdlIjoiYmVmb3JlLWV4ZWN1dGUiLCJjYWxsYmFja0ZhaWx1cmVBY3Rpb24iOiJpZ25vcmUifQ%3D%3D&callback-var=eyJ4OmRvbWFpbl9pZCI6ImJqMjkiLCJ4OnVzZXJfaWQiOiI3MDg3MzAwYmU2ZDM0OGMwODliOTU4NDM1MDVlN2U3MiIsIng6ZHJpdmVfaWQiOiI5ODg2OTAwODIiLCJ4OmZpbGVfaWQiOiI2ODcwZGViOTI4MTdiODljNGFmOTQyM2E5NWY0ZGU1MmY2YjA0N2M1IiwieDpwZHNfcGFyYW1zIjoie1wiYXBcIjpcImI4Yzk5MGU2MGIxODQ0NmViMDdmNWRjYTMwMzk4ZThhXCJ9IiwieDp2ZXJzaW9uIjoidjMifQ%3D%3D&di=bj29&dr=988690082&f=6870deb92817b89c4af9423a95f4de52f6b047c5&op=d&pds-params=%7B%22ap%22%3A%22b8c990e60b18446eb07f5dca30398e8a%22%7D&response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%27%25E5%25B2%25AD%25E5%258D%2597%25E5%25A4%25A7%25E5%25AD%25A6%25E4%25BF%259D%25E9%2599%25A9.mp4&security-token=CAISvgJ1q6Ft5B2yfSjIr5nDE%2FfhmY5U8Kbeb0DZi1A7WMdt2fOZrjz2IHhMf3NpBOkZvvQ1lGlU6%2Fcalq5rR4QAXlDfNVT2OWG%2BqlHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLs0ARrv4r1fMUqW2X543AUgFLhy2KKMPY99xpFgh9a7j0iCbSGyUu%2FhcRm5sw9%2Byfo34lVYnewzJcyhXOy4IClLcc%2BmqdsRIvJzWstJ7Gf9LWqChvSgk4TxhhcNFKSTQrInFCB0%2BcRObJl16iK%2BF7UPXtuMkagAFphP8r3Ae8eUgHGTFSUZ16y1LK9OcgxB5wF%2B1Y%2F2WkLq22JaopX124joWne0xEWtK%2BD3nQ57EtFJXAH5XFVSpL8ey6q7%2B0SYYKfnDvV4AlMij6c73j2p%2BFZfWoqOtRPih9DHBr8rG%2FGUthBwtO1PmFMMhnhUaPX0LH3mDT7kxj4yAA&u=7087300be6d348c089b95843505e7e72&x-oss-access-key-id=STS.NZvXMUtQuGd5mfhoPnTHA662L&x-oss-expires=1752561724&x-oss-signature=%2FVN5mf0vGLN3W4Sothr0YCBJ1gs1pWpKt2zZE0Vw9v8%3D&x-oss-signature-version=OSS2" @pause="isPlaying = false"></video> -->
|
||||
<img class="img" :src="interviewData.video_cover" />
|
||||
<img class="play-btn" src="./img/play-btn.svg" @click="togglePlay" :style="{ display: isPlaying ? 'none' : 'block' }" />
|
||||
<img class="play-btn" src="./img/play-btn.svg" @click="getVideoUrl(interviewData.token)" :style="{ display: isPlaying ? 'none' : 'block' }" />
|
||||
<div class="bottom" :style="{ transform: isPlaying ? 'translateY(100%)' : 'translateY(0)', opacity: isPlaying ? '0' : '1' }">
|
||||
<div class="title">{{ interviewData.title }}</div>
|
||||
<div class="subtitle">{{ interviewData.subtitle }}</div>
|
||||
@@ -63,7 +65,7 @@
|
||||
<div class="introduce-list" v-if="interviewData.focus_of_this_issue">
|
||||
<div class="introduce-item" v-for="item in interviewData.focus_of_this_issue">{{ item }}</div>
|
||||
</div>
|
||||
<div class="play-btn flexcenter">
|
||||
<div class="play-btn flexcenter" @click="getVideoUrl(interviewData.token)">
|
||||
立即播放
|
||||
<img class="icon" src="./img/play-btn.svg" />
|
||||
</div>
|
||||
@@ -119,7 +121,7 @@
|
||||
<img class="arrows" src="./img/arrows-black.svg" />
|
||||
</div>
|
||||
<div class="swiper flexacenter" ref="swiperRef">
|
||||
<div class="swiper-item" v-for="item in interviewList">
|
||||
<div class="swiper-item" v-for="item in interviewList" @click="getVideoUrl(item.token)">
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg" />
|
||||
<div class="bottom">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
@@ -129,6 +131,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="margin-bottom: 50px"></div>
|
||||
|
||||
<div class="school-list">
|
||||
<div class="school-item flexflex" v-for="(item, index) in admissionList">
|
||||
@@ -307,8 +310,9 @@
|
||||
|
||||
<div class="paly-box-mask flexcenter" v-if="palyState">
|
||||
<div class="paly-box">
|
||||
<img class="close" src="./img/cross-white.svg" />
|
||||
<img class="close" src="./img/cross-white.svg" @click="closePalyState" />
|
||||
<div class="paly-video"></div>
|
||||
<!-- <video src="https://cdnfhnfile.115cdn.net/6870d9500edfa26822026f57689fdaa03fc219f0/%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4?t=1752554944&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=c82d0e21cd73d578a6881d6386bdeb4d&us=5242880000&uc=10&v=1"></video> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -328,12 +332,13 @@
|
||||
const showLeftBtn = ref(true);
|
||||
const showRightBtn = ref(true);
|
||||
|
||||
const togglePlay = () => {
|
||||
const video = document.querySelector(".content video");
|
||||
if (isPlaying.value) video.pause();
|
||||
else video.play();
|
||||
const togglePlay = (token) => {
|
||||
console.log("token", token);
|
||||
|
||||
isPlaying.value = !isPlaying.value;
|
||||
// const video = document.querySelector(".content video");
|
||||
// if (isPlaying.value) video.pause();
|
||||
// else video.play();
|
||||
// isPlaying.value = !isPlaying.value;
|
||||
};
|
||||
|
||||
const checkBtnVisibility = () => {
|
||||
@@ -387,7 +392,6 @@
|
||||
if (topItems.length > 0) target = topItems[Math.floor(Math.random() * topItems.length)];
|
||||
data = data.filter((item) => !(item.istop === 1 && item.id === target.id));
|
||||
interviewData.value = target;
|
||||
getVideoUrl(target.token);
|
||||
}
|
||||
|
||||
interviewList.value = data || [];
|
||||
@@ -402,16 +406,35 @@
|
||||
|
||||
let palyState = ref(false); // 播放弹窗状态
|
||||
|
||||
let art = null; // 播放器实例
|
||||
|
||||
const getVideoUrl = (token) => {
|
||||
fetchData(`/v1/admissionsOfficer/videoUrl?token=${token}`).then((res) => {
|
||||
// console.log("res", res);
|
||||
// const art = new Artplayer({
|
||||
// container: ".interview-box .left .content .img",
|
||||
// url: res.data.url,
|
||||
// });
|
||||
console.log("res", res);
|
||||
palyState.value = true;
|
||||
// res.data.url = "https://dl1-v6.aliyundrive.cloud/dC9ELbBd%2F988690082%2F6870d948ef3b30d87fa84bc3a32fd16370f37c2e%2F6870d948f17001272f7c4c17b11d759a137ca234?ap=b8c990e60b18446eb07f5dca30398e8a&callback=eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9iajI5LmFwaS1ocC5hbGl5dW5wZHMuY29tL3YyL2ZpbGUvZG93bmxvYWRfY2FsbGJhY2siLCJjYWxsYmFja0JvZHkiOiJodHRwSGVhZGVyLnJhbmdlPSR7aHR0cEhlYWRlci5yYW5nZX1cdTAwMjZidWNrZXQ9JHtidWNrZXR9XHUwMDI2b2JqZWN0PSR7b2JqZWN0fVx1MDAyNmRvbWFpbl9pZD0ke3g6ZG9tYWluX2lkfVx1MDAyNnVzZXJfaWQ9JHt4OnVzZXJfaWR9XHUwMDI2ZHJpdmVfaWQ9JHt4OmRyaXZlX2lkfVx1MDAyNmZpbGVfaWQ9JHt4OmZpbGVfaWR9XHUwMDI2cGRzX3BhcmFtcz0ke3g6cGRzX3BhcmFtc31cdTAwMjZ2ZXJzaW9uPSR7eDp2ZXJzaW9ufSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQiLCJjYWxsYmFja1N0YWdlIjoiYmVmb3JlLWV4ZWN1dGUiLCJjYWxsYmFja0ZhaWx1cmVBY3Rpb24iOiJpZ25vcmUifQ%3D%3D&callback-var=eyJ4OmRvbWFpbl9pZCI6ImJqMjkiLCJ4OnVzZXJfaWQiOiI3MDg3MzAwYmU2ZDM0OGMwODliOTU4NDM1MDVlN2U3MiIsIng6ZHJpdmVfaWQiOiI5ODg2OTAwODIiLCJ4OmZpbGVfaWQiOiI2ODcwZGViOTI4MTdiODljNGFmOTQyM2E5NWY0ZGU1MmY2YjA0N2M1IiwieDpwZHNfcGFyYW1zIjoie1wiYXBcIjpcImI4Yzk5MGU2MGIxODQ0NmViMDdmNWRjYTMwMzk4ZThhXCJ9IiwieDp2ZXJzaW9uIjoidjMifQ%3D%3D&di=bj29&dr=988690082&f=6870deb92817b89c4af9423a95f4de52f6b047c5&op=d&pds-params=%7B%22ap%22%3A%22b8c990e60b18446eb07f5dca30398e8a%22%7D&response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%27%25E5%25B2%25AD%25E5%258D%2597%25E5%25A4%25A7%25E5%25AD%25A6%25E4%25BF%259D%25E9%2599%25A9.mp4&security-token=CAISvgJ1q6Ft5B2yfSjIr5nDE%2FfhmY5U8Kbeb0DZi1A7WMdt2fOZrjz2IHhMf3NpBOkZvvQ1lGlU6%2Fcalq5rR4QAXlDfNVT2OWG%2BqlHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLs0ARrv4r1fMUqW2X543AUgFLhy2KKMPY99xpFgh9a7j0iCbSGyUu%2FhcRm5sw9%2Byfo34lVYnewzJcyhXOy4IClLcc%2BmqdsRIvJzWstJ7Gf9LWqChvSgk4TxhhcNFKSTQrInFCB0%2BcRObJl16iK%2BF7UPXtuMkagAFphP8r3Ae8eUgHGTFSUZ16y1LK9OcgxB5wF%2B1Y%2F2WkLq22JaopX124joWne0xEWtK%2BD3nQ57EtFJXAH5XFVSpL8ey6q7%2B0SYYKfnDvV4AlMij6c73j2p%2BFZfWoqOtRPih9DHBr8rG%2FGUthBwtO1PmFMMhnhUaPX0LH3mDT7kxj4yAA&u=7087300be6d348c089b95843505e7e72&x-oss-access-key-id=STS.NZvXMUtQuGd5mfhoPnTHA662L&x-oss-expires=1752561724&x-oss-signature=%2FVN5mf0vGLN3W4Sothr0YCBJ1gs1pWpKt2zZE0Vw9v8%3D&x-oss-signature-version=OSS2"
|
||||
// res.data.url = "https://cdnfhnfile.115cdn.net/6870d9500edfa26822026f57689fdaa03fc219f0/%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4?t=1752560553&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=4c18afc0b99a18676660772f1dbcb9a3&us=5242880000&uc=10&v=1";
|
||||
// res.data.url = "https://cdnfhnfile.115cdn.net/6870d9500edfa26822026f57689fdaa03fc219f0/%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4?t=1752561030&u=100031698&s=524288000&d=vip-3070654841-cg2ys1g7vy7k4dxg0-1-0&c=2&f=1&k=badb58d16389675c2bf6170d319cc39e&us=5242880000&uc=10&v=1"
|
||||
// res.data.url = "https://media-sxty-fy-person01.sx3oss.ctyunxs.cn/PERSONCLOUD/ee46316a-1dd0-48f0-9387-d8f985051a55.mp4?x-amz-CLIENTTYPEIN=PC&AWSAccessKeyId=0Lg7dAq3ZfHvePP8DKEU&x-amz-userLevel=0&x-amz-limitrate=51200&response-content-type=video/mp4&x-amz-UID=290668618&response-content-disposition=attachment%3Bfilename%3D%22%E5%B2%AD%E5%8D%97%E5%A4%A7%E5%AD%A6%E4%BF%9D%E9%99%A9.mp4%22%3Bfilename*%3DUTF-8%27%27%25E5%25B2%25AD%25E5%258D%2597%25E5%25A4%25A7%25E5%25AD%25A6%25E4%25BF%259D%25E9%2599%25A9.mp4&x-amz-CLIENTNETWORK=UNKNOWN&x-amz-CLOUDTYPEIN=PERSON&Signature=6cJ2bBQlhBvZbBpGIv2MHQT6wA0%3D&Expires=1752563182&x-amz-FSIZE=157484787&x-amz-UFID=924511202880537274"
|
||||
setTimeout(() => {
|
||||
art = new Artplayer({
|
||||
container: ".paly-box-mask .paly-box .paly-video",
|
||||
url: res.data.url,
|
||||
autoplay: true,
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
const closePalyState = () => {
|
||||
// 暂停播放
|
||||
art.pause();
|
||||
|
||||
// 释放播放器资源（重要！）
|
||||
art.destroy();
|
||||
palyState.value = false;
|
||||
};
|
||||
|
||||
let admissionList = ref([]); // 学校 招生官 列表
|
||||
|
||||
// 获取 院校 招生官 列表
|
||||
@@ -632,7 +655,7 @@
|
||||
};
|
||||
|
||||
let dynamicColor = ref("");
|
||||
return { preachMouseEnter, preachMouseLeave, rightImgBox, palyState, theme, interviewList, closeSchoolYearState, selectSchoolYearState, openSchoolYearState, cutSchoolYear, admissionList, moreSchoolYMList, openMoreYearState, moreYearState, moreSchoolPitch, moreSchoolYList, dynamicColor, moreSchoolList, moreSchoolData, moreSchoolSid, closeMoreSchool, openMoreSchool, retrospectInterval, retrospectPage, retrospectPages, retrospectList, retrospectCount, retrospectList, interviewData, preachList, preachIndex, preachI, isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
|
||||
return { closePalyState, getVideoUrl, preachMouseEnter, preachMouseLeave, rightImgBox, palyState, theme, interviewList, closeSchoolYearState, selectSchoolYearState, openSchoolYearState, cutSchoolYear, admissionList, moreSchoolYMList, openMoreYearState, moreYearState, moreSchoolPitch, moreSchoolYList, dynamicColor, moreSchoolList, moreSchoolData, moreSchoolSid, closeMoreSchool, openMoreSchool, retrospectInterval, retrospectPage, retrospectPages, retrospectList, retrospectCount, retrospectList, interviewData, preachList, preachIndex, preachI, isPlaying, togglePlay, scrollLeft, scrollRight, swiperRef, showLeftBtn, showRightBtn };
|
||||
},
|
||||
});
|
||||
// 挂载到页面中的#app元素
|
||||
|
||||
Reference in New Issue
Block a user