|
@@ -17,14 +17,21 @@
|
|
|
ref="video_url"
|
|
|
play-btn-position="center"
|
|
|
class="video"
|
|
|
- :poster="v.pic"
|
|
|
- @timeupdate="update">
|
|
|
+ :x5-playsinline="true"
|
|
|
+ :playsinline="true"
|
|
|
+ :webkit-playsinline="true"
|
|
|
+ :x5-video-can-play-with-audio="true"
|
|
|
+ x5-video-orientation="portraint"
|
|
|
+
|
|
|
+ >
|
|
|
</video>
|
|
|
|
|
|
- <cover-image
|
|
|
- class="play" v-if="show_play"
|
|
|
- @tap="start"
|
|
|
- src="@/static/icon/ico-video-play.png"></cover-image>
|
|
|
+ <cover-image v-if="show_play_poster" class="poster" :src="v.pic">
|
|
|
+ </cover-image>
|
|
|
+
|
|
|
+ <cover-image
|
|
|
+ class="ico-video-play" v-if="show_play"
|
|
|
+ @tap="start"></cover-image>
|
|
|
|
|
|
<pos :item="v" :down="v.video"></pos>
|
|
|
|
|
@@ -88,7 +95,8 @@ export default {
|
|
|
barWidth:0,
|
|
|
animationData: {},
|
|
|
times:null,
|
|
|
- show_play:true,
|
|
|
+ show_play:true,
|
|
|
+ show_play_poster:true,
|
|
|
muted: true,
|
|
|
current_index: 0,
|
|
|
showInfo: false,
|
|
@@ -124,6 +132,7 @@ export default {
|
|
|
this.handle(false);
|
|
|
},
|
|
|
handle : function(state) {
|
|
|
+ this.show_play_poster = false;
|
|
|
var id = this.id(this.current_index);
|
|
|
if (state) {
|
|
|
this.videoCtx = uni.createVideoContext(id, this);
|
|
@@ -188,7 +197,8 @@ export default {
|
|
|
.swiper{
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
- position: fixed;
|
|
|
+ /*position: fixed;*/
|
|
|
+ position: relative;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
@@ -205,6 +215,14 @@ export default {
|
|
|
top: 40vh;
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
+.poster{
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
.progressBar {
|
|
|
border-radius: 2upx;
|
|
|
height: 4upx;
|
|
@@ -213,7 +231,16 @@ export default {
|
|
|
position: absolute;
|
|
|
bottom: 68rpx;
|
|
|
}
|
|
|
-
|
|
|
+.ico-video-play{
|
|
|
+ background: url(@/static/icon/ico-video-play.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate3d(-50%,-50%,0);
|
|
|
+}
|
|
|
.cover-view-left {
|
|
|
position: absolute;
|
|
|
margin-left: 20upx;
|