Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
9424a1f8
U
uni-app
项目概览
DCloud
/
uni-app
3 个月 前同步成功
通知
718
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9424a1f8
编写于
1月 03, 2019
作者:
X
xzs02
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: 解决video组件hidden属性不能控制隐藏状态的问题
上级
6ec25b33
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
6 addition
and
192 deletion
+6
-192
src/platforms/h5/view/components/video/index.vue
src/platforms/h5/view/components/video/index.vue
+6
-192
未找到文件。
src/platforms/h5/view/components/video/index.vue
浏览文件 @
9424a1f8
<
template
>
<uni-video
:id=
"id"
class=
"uni-video"
v-on=
"$listeners"
>
<!-- 视频容器 -->
<div
ref=
"container"
:class=
"
{'uni-video-type-fullscreen':fullscreen,'uni-video-type-rotate-left':rotateType==='left','uni-video-type-rotate-right':rotateType==='right'}"
...
...
@@ -13,7 +11,6 @@
@touchstart="touchstart($event)"
@touchend="touchend($event)"
@touchmove="touchmove($event)">
<!-- 视频 -->
<video
ref=
"video"
:style=
"
{opacity:!start?0.8:1,objectFit:objectFit}"
...
...
@@ -27,7 +24,6 @@
x5-video-player-type="h5"
x5-video-player-fullscreen="false"
x5-video-orientation="landscape|portrait" />
<!-- 控制条 -->
<div
v-show=
"controlsShow"
class=
"uni-video-bar uni-video-bar-full"
...
...
@@ -68,13 +64,11 @@
class="uni-video-fullscreen"
@click.stop="triggerFullscreen" />
</div>
<!-- 弹幕 -->
<div
v-show=
"start&&enableDanmuSync"
ref=
"danmu"
style=
"z-index: 0;"
class=
"uni-video-danmu"
/>
<!-- 封面 -->
<div
v-if=
"!start"
class=
"uni-video-cover"
...
...
@@ -84,7 +78,6 @@
@
click.stop=
"play"
/>
<p
class=
"uni-video-cover-duration"
>
{{
(
duration
||
durationTime
)
|
getTime
}}
</p>
</div>
<!-- 提示-音量调整 -->
<div
:class=
"
{'uni-video-toast-volume':gestureType==='volume'}"
class="uni-video-toast">
...
...
@@ -111,7 +104,6 @@
</div>
</div>
</div>
<!-- 提示-进度调整 -->
<div
:class=
"
{'uni-video-toast-progress':gestureType=='progress'}"
class="uni-video-toast">
...
...
@@ -136,21 +128,9 @@ const passiveOptions = supportsPassive ? {
}
:
false
const
GestureType
=
{
/**
* 未开始
*/
NONE
:
'
none
'
,
/**
* 停止
*/
STOP
:
'
stop
'
,
/**
* 音量
*/
VOLUME
:
'
volume
'
,
/**
* 进度
*/
PROGRESS
:
'
progress
'
}
...
...
@@ -181,116 +161,68 @@ export default {
type
:
String
,
default
:
''
},
/**
* 指定视频时长
*/
duration
:
{
type
:
[
Number
,
String
],
default
:
''
},
/**
* 是否显示默认播放控件
*/
controls
:
{
type
:
[
Boolean
,
String
],
default
:
true
},
/**
* 弹幕列表
*/
danmuList
:
{
type
:
Array
,
default
()
{
return
[]
}
},
/**
* 是否显示弹幕按钮
*/
danmuBtn
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
/**
* 是否展示弹幕
*/
enableDanmu
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
/**
* 是否自动播放
*/
autoplay
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
/**
* 是否循环播放
*/
loop
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
/**
* 是否静音播放
*/
muted
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
/**
* 视频的表现形式
*/
objectFit
:
{
type
:
String
,
default
:
'
contain
'
},
/**
* 视频封面
*/
poster
:
{
type
:
String
,
default
:
''
},
/**
* 设置全屏时视频的方向,0为竖向,90和-90为横向,默认360为自动
*/
direction
:
{
type
:
[
String
,
Number
],
default
:
360
},
/**
* 视频初始播放位置
*/
initialTime
:
{
type
:
[
String
,
Number
],
default
:
0
},
/**
* 是否显示全屏按钮
*/
showFullscreenBtn
:
{
type
:
[
Boolean
,
String
],
default
:
true
},
/**
* 在非全屏模式下,是否开启亮度与音量调节手势
*/
pageGesture
:
{
type
:
[
Boolean
,
String
],
default
:
false
},
/**
* 是否开启控制进度的手势
*/
enableProgressGesture
:
{
type
:
[
Boolean
,
String
],
default
:
true
},
/**
* 是否显示视频底部控制栏的播放按钮
*/
showPlayBtn
:
{
type
:
[
Boolean
,
String
],
default
:
true
...
...
@@ -298,113 +230,38 @@ export default {
},
data
()
{
return
{
/**
* 是否播放开始
*/
start
:
false
,
/**
* 是否正在播放
*/
playing
:
false
,
/**
* 当前播放时长
*/
currentTime
:
0
,
/**
* 播放总时长
*/
durationTime
:
0
,
/**
* 进度(0-100)
*/
progress
:
0
,
/**
* 触摸中
*/
touching
:
false
,
/**
* 是否展示弹幕
*/
enableDanmuSync
:
Boolean
(
this
.
enableDanmu
),
/**
* 默认播放控件显示状态
*/
controlsVisible
:
true
,
/**
* 全屏状态
*/
fullscreen
:
false
,
/**
* 播放器宽度
*/
width
:
'
0
'
,
/**
* 播放器高度
*/
height
:
'
0
'
,
/**
* 全屏状态切换中
*/
fullscreenTriggering
:
false
,
/**
* 控制条触摸中
*/
controlsTouching
:
false
,
/**
* 全屏时视频的方向
*/
directionSync
:
Number
(
this
.
direction
),
/**
* 触摸起点
*/
touchStartOrigin
:
{
x
:
0
,
y
:
0
},
/**
* 手势状态(未开始:none、停止:stop、音量:volume、进度:progress)
*/
gestureType
:
GestureType
.
NONE
,
/**
* 播放进度旧值
*/
currentTimeOld
:
0
,
/**
* 播放进度新值
*/
currentTimeNew
:
0
,
/**
* 系统音量旧值
*/
volumeOld
:
null
,
/**
* 系统音量新值
*/
volumeNew
:
null
,
/**
* isIOS: uni.isIOS
*/
isIOS
:
false
,
/**
* 缓冲进度(0-1)
*/
buffered
:
0
,
/**
* 旋转方向 left:逆时针旋转90度 right:顺时针旋转90度
*/
rotateType
:
''
}
},
computed
:
{
/**
* 显示控制条
*/
controlsShow
()
{
return
this
.
start
&&
this
.
controls
&&
this
.
controlsVisible
},
/**
* 自动隐藏的计时器状态
*/
autoHideContorls
()
{
return
this
.
controlsShow
&&
this
.
playing
&&
!
this
.
controlsTouching
},
...
...
@@ -430,12 +287,8 @@ export default {
container
.
remove
()
if
(
val
)
{
this
.
resize
()
// uni.enterFullscreen(() => {
// this.resize()
// })
document
.
body
.
appendChild
(
container
)
}
else
{
// uni.leaveFullscreen()
this
.
$el
.
appendChild
(
container
)
}
this
.
$trigger
(
'
fullscreenchange
'
,
{},
{
...
...
@@ -469,20 +322,11 @@ export default {
},
created
()
{
this
.
otherData
=
{
/**
* 弹幕列表
*/
danmuList
:
[],
/**
* 弹幕指针
*/
danmuIndex
:
{
time
:
0
,
index
:
-
1
},
/**
* 操作栏隐藏倒计时
*/
hideTiming
:
null
}
var
danmuList
=
this
.
otherData
.
danmuList
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
danmuList
||
[]))
...
...
@@ -542,7 +386,6 @@ export default {
video
.
addEventListener
(
'
timeupdate
'
,
function
(
$event
)
{
var
currentTime
=
self
.
currentTime
=
video
.
currentTime
var
duration
=
video
.
duration
// 移动弹幕指针
var
oldDanmuIndex
=
otherData
.
danmuIndex
var
danmuIndex
=
{
time
:
currentTime
,
...
...
@@ -635,7 +478,6 @@ export default {
},
beforeDestroy
()
{
this
.
$refs
.
container
.
remove
()
// uni.leaveFullscreen()
clearTimeout
(
this
.
otherData
.
hideTiming
)
},
methods
:
{
...
...
@@ -673,33 +515,24 @@ export default {
var
direction
=
Math
.
abs
(
this
.
directionSync
)
if
(
direction
===
0
)
{
// 强制竖屏
if
(
w
>
h
)
{
// 设备横屏-逆时针旋转90度
this
.
rotateType
=
'
left
'
}
else
{
// 设备竖屏-不旋转
this
.
rotateType
=
''
}
}
else
if
(
direction
===
90
)
{
// 强制横屏
if
(
w
>
h
)
{
// 设备横屏-不旋转
this
.
rotateType
=
''
}
else
{
// 设备竖屏-顺时针旋转90度
this
.
rotateType
=
'
right
'
}
}
else
{
// 自动适应
this
.
rotateType
=
''
}
if
(
!
this
.
rotateType
)
{
// 无旋转
this
.
width
=
w
+
'
px
'
this
.
height
=
h
+
'
px
'
}
else
{
// 旋转90度
this
.
width
=
h
+
'
px
'
this
.
height
=
w
+
'
px
'
}
...
...
@@ -810,15 +643,12 @@ export default {
if
(
gestureType
===
GestureType
.
PROGRESS
)
{
this
.
changeProgress
(
pageX
-
origin
.
x
)
}
else
if
(
gestureType
===
GestureType
.
VOLUME
)
{
// 横屏时调节,需颠倒方向
this
.
changeVolume
(
pageY
-
origin
.
y
)
}
if
(
gestureType
!==
GestureType
.
NONE
)
{
return
}
// 横向
if
(
Math
.
abs
(
pageX
-
origin
.
x
)
>
Math
.
abs
(
pageY
-
origin
.
y
))
{
// 未开启进度手势
if
(
!
this
.
enableProgressGesture
)
{
this
.
gestureType
=
GestureType
.
STOP
return
...
...
@@ -828,13 +658,11 @@ export default {
if
(
!
this
.
fullscreen
)
{
stop
()
}
}
else
{
// 纵向
// 未开启亮度和音量手势
}
else
{
if
(
!
this
.
pageGesture
)
{
this
.
gestureType
=
GestureType
.
STOP
return
}
// 调节音量
this
.
gestureType
=
GestureType
.
VOLUME
this
.
volumeOld
=
this
.
$refs
.
video
.
volume
if
(
!
this
.
fullscreen
)
{
...
...
@@ -876,7 +704,6 @@ export default {
this
.
volumeNew
=
value
}
},
// 自动隐藏操作栏
autoHideStart
()
{
this
.
otherData
.
hideTiming
=
setTimeout
(()
=>
{
this
.
controlsVisible
=
false
...
...
@@ -889,9 +716,7 @@ export default {
otherData
.
hideTiming
=
null
}
},
// 获取转换后的屏幕坐标
getScreenXY
(
dataOrigin
)
{
// 未全屏或者未旋转返回原始数据
var
rotateType
=
this
.
rotateType
if
(
!
this
.
fullscreen
||
!
rotateType
)
{
return
dataOrigin
...
...
@@ -903,11 +728,9 @@ export default {
var
pageX
var
pageY
if
(
rotateType
===
'
left
'
)
{
// 向左旋转-逆时针90度
pageX
=
h
-
y
pageY
=
x
}
else
{
// 向右旋转-顺时针90度
pageX
=
y
pageY
=
w
-
x
}
...
...
@@ -926,7 +749,7 @@ export default {
</
script
>
<
style
>
.
uni-video
{
uni-video
{
width
:
300px
;
height
:
225px
;
display
:
inline-block
;
...
...
@@ -935,6 +758,10 @@ export default {
position
:
relative
;
}
uni-video
[
hidden
]
{
display
:
none
;
}
.uni-video-container
{
width
:
100%
;
height
:
100%
;
...
...
@@ -973,13 +800,9 @@ export default {
left
:
0
;
bottom
:
0
;
width
:
100%
;
display
:
-webkit-flex
;
display
:
flex
;
-webkit-flex-direction
:
column
;
flex-direction
:
column
;
-webkit-justify-content
:
center
;
justify-content
:
center
;
-webkit-align-items
:
center
;
align-items
:
center
;
background-color
:
rgba
(
1
,
1
,
1
,
0.5
);
z-index
:
1
;
...
...
@@ -1105,15 +928,6 @@ export default {
border-radius
:
50%
;
}
/* .uni-video-controls > .uni-video-duration {
height: 14.5px;
line-height: 14.5px;
margin-top: 15px;
margin-bottom: 14.5px;
font-size: 12px;
color: #cbcbcb;
} */
.uni-video-danmu-button
{
white-space
:
nowrap
;
line-height
:
1
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录