XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(video-box): 替换video.js为artplayer实现视频播放功能

Browse Source 
- 移除hls.js依赖及相关代码
- 使用artplayer重构视频播放组件
- 更新视频播放控制逻辑
- 调整视频播放器样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-08-28 14:53:15 +08:00
parent 50a0c4f15c
commit 5587d98c19
21 changed files with 94 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
dist/css/298.6f858b26.css → dist/css/269.6f858b26.css vendored
View File

1
dist/css/detail.2cd7262e.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/detail.41f35982.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.002560ff.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.46660da5.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -1,4 +1,4 @@
<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.65a8ec5d.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.1805e332.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.4883b281.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script>var _hmt = _hmt || [] <!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.65a8ec5d.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.a431e18f.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.4883b281.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script>var _hmt = _hmt || []
;(function () { ;(function () {
var hm = document.createElement("script") var hm = document.createElement("script")
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746" hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"

1
dist/js/269.45d56ac0.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/298.123c1243.js vendored
View File

File diff suppressed because one or more lines are too long

17
dist/js/655.a100463b.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/863.df5267b3.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/app.1805e332.js → dist/js/app.a431e18f.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/detail.526cd75a.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/detail.b354273c.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
dist/js/housing.0359e5ad.js → dist/js/housing.5261837d.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/seachPage.4f2b9c27.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/seachPage.ee007019.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

12
package-lock.json generated
View File

@@ -12,7 +12,6 @@
"axios": "^1.4.0", "axios": "^1.4.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-plus": "^2.3.7", "element-plus": "^2.3.7",
"hls.js": "^1.6.11",
"masonry-layout": "^4.2.2", "masonry-layout": "^4.2.2",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
@@ -5917,12 +5916,6 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/hls.js": {
"version": "1.6.11",
"resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.6.11.tgz",
"integrity": "sha512-tdDwOAgPGXohSiNE4oxGr3CI9Hx9lsGLFe6TULUvRk2TfHS+w1tSAJntrvxsHaxvjtr6BXsDZM7NOqJFhU4mmg==",
"license": "Apache-2.0"
},
"node_modules/hosted-git-info": { "node_modules/hosted-git-info": {
"version": "2.8.9", "version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -15345,11 +15338,6 @@
"integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
"dev": true "dev": true
}, },
"hls.js": {
"version": "1.6.11",
"resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.6.11.tgz",
"integrity": "sha512-tdDwOAgPGXohSiNE4oxGr3CI9Hx9lsGLFe6TULUvRk2TfHS+w1tSAJntrvxsHaxvjtr6BXsDZM7NOqJFhU4mmg=="
},
"hosted-git-info": { "hosted-git-info": {
"version": "2.8.9", "version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",

1
package.json
View File

@@ -11,7 +11,6 @@
"axios": "^1.4.0", "axios": "^1.4.0",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-plus": "^2.3.7", "element-plus": "^2.3.7",
"hls.js": "^1.6.11",
"masonry-layout": "^4.2.2", "masonry-layout": "^4.2.2",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",

1
src/components/detail/imageWatch.vue
View File

@@ -8,7 +8,6 @@
<div class="dis-f jus-x al-item" v-if="item"> <div class="dis-f jus-x al-item" v-if="item">
<div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center"> <div class="img-box dis-f jus-x" v-if="item['type'] != 'attachment'" style="align-items: center">
<video-box :src="item.url || item['videourl']" :val="i" :poster="item.thumbnail" :imageTab="imageTab"></video-box> <video-box :src="item.url || item['videourl']" :val="i" :poster="item.thumbnail" :imageTab="imageTab"></video-box>
<!-- <video ref="video" v-if="i >= imageTab - 1 && i <= imageTab + 1" :autoplay="false" controls :src="item.url || item['videourl']" :preload="imageTab == i ? 'metadata' : 'none'" style="width: 800px;"></video> -->
</div> </div>
<div class="img-box dis-f jus-x" v-else> <div class="img-box dis-f jus-x" v-else>
<img v-if="i >= imageTab - 1 && i <= imageTab + 1" :src="(item && item.url) || item['imageurl'] || item['image']" class="img" alt="" /> <img v-if="i >= imageTab - 1 && i <= imageTab + 1" :src="(item && item.url) || item['imageurl'] || item['image']" class="img" alt="" />

116
src/components/public/video-box.vue
View File

@@ -1,10 +1,65 @@
<template> <template>
<!-- <video v-if="!ism3u8" class="11111" :autoplay="false" controls :src="src" style="width: 800px;"></video> --> <div class="artplayer-app" :class="['artplayer-app' + val]"></div>
<video v-if="!ism3u8" ref="videoRef" loop class="video 11111" :autoplay="val == imageTab ? true : false" controls </template>
:src="src" :preload="val == imageTab ? 'auto' : 'none'" style="width: 800px; height: 600px;"
:poster="poster"></video> <script setup>
<video v-else :id="'video' + val" loop style="width: 800px; height: 600px;" import Artplayer from "artplayer";
class="video video-js vjs-default-skin vjs-big-play-centered" preload="auto" controls :poster="poster"> import { reactive, onMounted, ref, defineProps, watchEffect, watch, onUnmounted, nextTick } from "vue";
const props = defineProps({
src: {
type: String,
default: "",
},
val: {
type: String,
default: "",
},
imageTab: {
type: Number,
default: "",
},
poster: {
type: String,
default: "",
},
});
watch(
() => props.imageTab,
(newVal) => {
if (art != null) {
if (newVal != props.val) art.pause();
else art.play();
}
}
);
let art = null;
onMounted(() => {
art = new Artplayer({
container: ".artplayer-app" + props.val,
url: props.src,
autoplay: props.imageTab == props.val ? true : false,
poster: props.poster,
});
});
onUnmounted(() => {
art?.destroy();
});
</script>
<style scoped>
.artplayer-app {
width: 800px;
height: 600px;
}
</style>
<!-- <template>
<video v-if="!ism3u8" ref="videoRef" loop class="video 11111" :autoplay="val == imageTab ? true : false" controls :src="src" :preload="val == imageTab ? 'auto' : 'none'" style="width: 800px; height: 600px" :poster="poster"></video>
<video v-else :id="'video' + val" loop style="width: 800px; height: 600px" class="video video-js vjs-default-skin vjs-big-play-centered" preload="auto" controls :poster="poster">
<source type="application/x-mpegURL" /> <source type="application/x-mpegURL" />
<source type="video/mp4" /> <source type="video/mp4" />
<source type="video/webm" /> <source type="video/webm" />
@@ -12,18 +67,17 @@
</video> </video>
</template> </template>
<script setup> <script setup>
import videojs from "video.js" import videojs from "video.js";
// import "video.js/dist/video-js.css" import { reactive, onMounted, ref, defineProps, watchEffect, watch, onUnmounted, nextTick } from "vue";
import { reactive, onMounted, ref, defineProps, watchEffect, watch, onUnmounted, nextTick } from "vue"
const onCanPlay = event => { const onCanPlay = (event) => {
// console.log("视频可以播放了") // console.log("视频可以播放了")
// 这里可以添加额外的逻辑，例如显示播放按钮等 // 这里可以添加额外的逻辑，例如显示播放按钮等
} };
const onError = event => { const onError = (event) => {
console.error("视频加载错误", event) console.error("视频加载错误", event);
// 处理视频加载错误 // 处理视频加载错误
} };
const props = defineProps({ const props = defineProps({
src: { src: {
@@ -39,22 +93,22 @@ const props = defineProps({
default: "", default: "",
}, },
poster: String, poster: String,
}) });
const videoRef = ref(null) const videoRef = ref(null);
watch( watch(
() => props.imageTab, () => props.imageTab,
newVal => { (newVal) => {
if (newVal != props.val) { if (newVal != props.val) {
if (player.value != null) { if (player.value != null) {
player.value.pause() // dispose()会直接删除Dom元素 player.value.pause(); // dispose()会直接删除Dom元素
} }
if (videoRef.value) { if (videoRef.value) {
if (!videoRef.value.paused) { if (!videoRef.value.paused) {
// console.log("视频正在播放，现在停止.") // console.log("视频正在播放，现在停止.")
videoRef.value.pause() videoRef.value.pause();
} else { } else {
// console.log("视频已经暂停.") // console.log("视频已经暂停.")
} }
@@ -63,20 +117,20 @@ watch(
} }
} else { } else {
if (videoRef.value) { if (videoRef.value) {
videoRef.value.play() videoRef.value.play();
} }
} }
} }
) );
const player = ref(null) const player = ref(null);
let ism3u8 = ref(false) // 是否是 m3u8 格式 let ism3u8 = ref(false); // 是否是 m3u8 格式
onMounted(() => { onMounted(() => {
if (props.src.indexOf("m3u8") == -1) { if (props.src.indexOf("m3u8") == -1) {
return return;
} }
ism3u8.value = true ism3u8.value = true;
nextTick(() => { nextTick(() => {
player.value = videojs("video" + props.val, { player.value = videojs("video" + props.val, {
preload: "metadata", // 首次是否需要轻求资源，none：不轻求：metadata只请求必要资源 preload: "metadata", // 首次是否需要轻求资源，none：不轻求：metadata只请求必要资源
@@ -97,14 +151,14 @@ onMounted(() => {
stype: "application/x-mpegURL", stype: "application/x-mpegURL",
}, },
], ],
}) });
}) });
}) });
onUnmounted(() => { onUnmounted(() => {
if (player.value != null) { if (player.value != null) {
player.value.dispose() // dispose()会直接删除Dom元素 player.value.dispose(); // dispose()会直接删除Dom元素
} }
}) });
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style> -->

5
yarn.lock
View File

@@ -3539,11 +3539,6 @@ highlight.js@^10.7.1:
resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz" resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
hls.js@^1.6.11:
version "1.6.11"
resolved "https://registry.npmmirror.com/hls.js/-/hls.js-1.6.11.tgz"
integrity sha512-tdDwOAgPGXohSiNE4oxGr3CI9Hx9lsGLFe6TULUvRk2TfHS+w1tSAJntrvxsHaxvjtr6BXsDZM7NOqJFhU4mmg==
hosted-git-info@^2.1.4: hosted-git-info@^2.1.4:
version "2.8.9" version "2.8.9"
resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz" resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"