Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
GaoQuYingJiH5-ASD
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xinzhedeai
GaoQuYingJiH5-ASD
Commits
cec12fde
Commit
cec12fde
authored
Jun 30, 2025
by
xinzhedeai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
add:视频播放处理
parent
8ed27e36
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
18 additions
and
24 deletions
+18
-24
_anquan_changshi-detail-video.css
src/_anquan_changshi-detail-video.css
+2
-2
_anquan_changshi-detail-video.html
src/_anquan_changshi-detail-video.html
+5
-3
_anquan_changshi-detail-video.js
src/_anquan_changshi-detail-video.js
+11
-19
No files found.
src/_anquan_changshi-detail-video.css
View file @
cec12fde
/* 全局基础样式 */
/* 全局基础样式 */
*
{
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
;
...
...
src/_anquan_changshi-detail-video.html
View file @
cec12fde
...
@@ -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>
...
...
src/_anquan_changshi-detail-video.js
View file @
cec12fde
...
@@ -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
)
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment