Commit cec12fde authored by xinzhedeai's avatar xinzhedeai

add:视频播放处理

parent 8ed27e36
/* 全局基础样式 */ /* 全局基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f5f5f5; font-family: 'PingFang SC', sans-serif; } html, body, #app { background: #fff; font-family: 'PingFang SC', sans-serif; }
/* 视频播放区域 */ /* 视频播放区域 */
.video-container { .video-container {
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
} }
.title-icon { .title-icon {
width: 0.4rem; width: 0.4rem;
height: 0.4rem; /* height: 0.4rem; */
} }
.video-title { .video-title {
font-size: 0.32rem; font-size: 0.32rem;
......
...@@ -13,9 +13,11 @@ ...@@ -13,9 +13,11 @@
<!-- 视频播放区域 --> <!-- 视频播放区域 -->
<div class="video-container"> <div class="video-container">
<!-- <video src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4"></video> --> <!-- <video src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4"></video> -->
<video id="myVideo" poster="poster.jpg" controls> <video id="myVideo" :poster="detailInfo.videoCover" controls>
<!-- <source src="video1.mp4" crossorigin type="video/mp4"> --> <!-- <source src="video1.mp4" crossorigin type="video/mp4"> -->
<source src="test/testVideo.mp4" type="video/mp4"> <!-- <source src="test/testVideo.mp4" type="video/mp4"> -->
<!-- <source src="http://192.168.2.37:8080/profile/upload/2025/05/20/test_20250520170318A001.mp4" crossorigin type="video/mp4"> -->
<source :src="detailInfo.videoUrl" type="video/mp4">
您的浏览器不支持HTML5视频播放 您的浏览器不支持HTML5视频播放
</video> </video>
</div> </div>
...@@ -26,7 +28,7 @@ ...@@ -26,7 +28,7 @@
<!-- 标题与日期 --> <!-- 标题与日期 -->
<div class="info-section"> <div class="info-section">
<div class="title-wrapper"> <div class="title-wrapper">
<img class="title-icon" src="https://dummyimage.com/37x32"> <img class="title-icon" src="../image/code/video.png">
<h3 class="video-title">{{detailInfo.name}}</h3> <h3 class="video-title">{{detailInfo.name}}</h3>
</div> </div>
<p class="video-date">日期:{{ detailInfo.uploadsDate }}</p> <p class="video-date">日期:{{ detailInfo.uploadsDate }}</p>
......
...@@ -15,7 +15,7 @@ window.addEventListener("load", function () { ...@@ -15,7 +15,7 @@ window.addEventListener("load", function () {
created() { created() {
}, },
mounted() { mounted() {
// this.detail() this.detail()
}, },
methods: { methods: {
handleVideoError(e) { handleVideoError(e) {
...@@ -49,29 +49,21 @@ window.addEventListener("load", function () { ...@@ -49,29 +49,21 @@ window.addEventListener("load", function () {
}, },
}, },
(res) => { (res) => {
if (!res) {
// 中台返回为undefined 重新请求
vant.Toast.clear()
this.page = this.page - 1 // 重新请求后,分页数恢复上一次请求的值
setTimeout(() => {
this.detail()
}, 0)
return
}
if (res) { if (res) {
var result = JSON.parse(res) var result = JSON.parse(res)
this.detailInfo = result.data this.detailInfo = result.data
this.detailInfo.videoUrl = './test/testVideo.mp4' // this.detailInfo.videoUrl = './test/testVideo.mp4'
console.log(result, 'detail result') console.log(result, 'detail result')
// 关键新增:视频地址更新后,强制重新加载视频
const videoEl = document.getElementById('myVideo');
if (videoEl) {
videoEl.load(); // 触发浏览器重新加载视频资源
} }
this.loading = false
setTimeout(() => {
this.$nextTick(() => {
vant.Toast.clear()
})
}, 0);
console.log('动态视频地址:', this.detailInfo.videoUrl); // 打印验证地址是否正确
}
vant.Toast.clear()
} }
) )
}, 0) }, 0)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment