Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
T
techbook
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
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
front-end-dev
techbook
Commits
806d5ff0
Commit
806d5ff0
authored
Jun 03, 2020
by
zhangyanni
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
文章详情
parent
b4f487cd
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
34 additions
and
30 deletions
+34
-30
detail.vue
src/views/mobile/article/detail.vue
+34
-30
No files found.
src/views/mobile/article/detail.vue
View file @
806d5ff0
...
@@ -18,18 +18,21 @@
...
@@ -18,18 +18,21 @@
</div>
</div>
</div>
</div>
<div
style=
"margin-top: .2rem;"
>
<div
style=
"margin-top: .2rem;"
>
<video-player
class=
"video-player vjs-custom-skin"
<div
class=
"video-player"
:class=
"[
{'hiddeen': hide}]" ref="videoEl">
v-if=
"articleInfo.videoAudioType==1"
<video-player
class=
"video-player vjs-custom-skin"
ref=
"videoPlayer"
v-if=
"articleInfo.videoAudioType==1"
:playsinline=
"playsinline"
ref=
"videoPlayer"
style=
"object-fit:fill"
:playsinline=
"playsinline"
:options=
"playerOptions"
style=
"object-fit:fill"
:x5-video-player-fullscreen=
"true"
:options=
"playerOptions"
@
pause=
"onPlayerPause($event)"
:x5-video-player-fullscreen=
"true"
@
play=
"onPlayerPlay($event)"
@
pause=
"onPlayerPause($event)"
@
fullscreenchange=
"onFullscreenChange($event)"
@
play=
"onPlayerPlay($event)"
@
ended=
"onPlayerEnded($event)"
@
fullscreenchange=
"onFullscreenChange($event)"
></video-player>
@
ended=
"onPlayerEnded($event)"
></video-player>
</div>
<audio
v-if=
"articleInfo.videoAudioType==0"
id=
"audioEle"
:src=
"articleInfo.videoUrl"
style=
"width: 100%;"
controls=
"controls"
></audio>
<audio
v-if=
"articleInfo.videoAudioType==0"
id=
"audioEle"
:src=
"articleInfo.videoUrl"
style=
"width: 100%;"
controls=
"controls"
></audio>
</div>
</div>
...
@@ -280,7 +283,7 @@
...
@@ -280,7 +283,7 @@
fluid
:
true
,
// 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
fluid
:
true
,
// 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources
:
[{
sources
:
[{
type
:
"video/mp4"
,
//这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
type
:
"video/mp4"
,
//这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
src
:
this
.
src
//url地址
src
:
""
//url地址
}],
}],
poster
:
""
,
//你的封面地址
poster
:
""
,
//你的封面地址
// width: document.documentElement.clientWidth, //播放器宽度
// width: document.documentElement.clientWidth, //播放器宽度
...
@@ -292,6 +295,7 @@
...
@@ -292,6 +295,7 @@
// fullscreenToggle: true //全屏按钮
// fullscreenToggle: true //全屏按钮
// }
// }
},
},
hide
:
false
}
}
},
},
methods
:{
methods
:{
...
@@ -376,7 +380,7 @@
...
@@ -376,7 +380,7 @@
api
.
getArticleDetailById
(
this
.
$route
.
query
.
id
,
this
.
isAddBrowse
).
then
((
res
)
=>
{
api
.
getArticleDetailById
(
this
.
$route
.
query
.
id
,
this
.
isAddBrowse
).
then
((
res
)
=>
{
if
(
res
.
code
==
0
){
if
(
res
.
code
==
0
){
this
.
articleInfo
=
res
.
result
;
this
.
articleInfo
=
res
.
result
;
this
.
playerOptions
.
poster
=
res
.
result
.
videoUrl
;
this
.
playerOptions
.
sources
[
0
].
src
=
res
.
result
.
videoUrl
;
document
.
addEventListener
(
"visibilitychange"
,
()
=>
{
document
.
addEventListener
(
"visibilitychange"
,
()
=>
{
if
(
document
.
hidden
)
{
if
(
document
.
hidden
)
{
// 页面被挂起,暂停播放
// 页面被挂起,暂停播放
...
@@ -843,37 +847,37 @@
...
@@ -843,37 +847,37 @@
handleMore
(){
handleMore
(){
this
.
$router
.
push
(
"/articleList"
)
this
.
$router
.
push
(
"/articleList"
)
}
},
computed
:{
playsinline
(){
var
ua
=
navigator
.
userAgent
.
toLocaleLowerCase
();
//x5内核
if
(
ua
.
match
(
/tencenttraveler/
)
!=
null
||
ua
.
match
(
/qqbrowse/
)
!=
null
)
{
return
false
}
else
{
//ios端
return
true
}
},
},
onPlayerPause
(
player
){
onPlayerPause
(
player
){
this
.
hide
=
false
;
},
},
onPlayerPlay
(
player
){
onPlayerPlay
(
player
){
this
.
hide
=
true
;
},
},
onPlayerEnded
(
player
){
onPlayerEnded
(
player
){
this
.
hide
=
true
;
},
},
onFullscreenChange
(
player
){
onFullscreenChange
(
player
){
},
},
},
computed
:{
playsinline
(){
var
ua
=
navigator
.
userAgent
.
toLocaleLowerCase
();
//x5内核
if
(
ua
.
match
(
/tencenttraveler/
)
!=
null
||
ua
.
match
(
/qqbrowse/
)
!=
null
)
{
return
false
}
else
{
//ios端
return
true
}
}
},
},
mounted
(){
mounted
(){
this
.
getArticleDetail
();
this
.
getArticleDetail
();
...
...
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