Browse Source

视频自动跳转最后一帧功能

h5_css
蟑螂恶霸 3 years ago
committed by yanyan
parent
commit
cb7d1d9207
  1. 16
      components/s-video/res-s-video.vue
  2. 19
      components/s-video/s-video.vue

16
components/s-video/res-s-video.vue

@ -1,7 +1,7 @@
<template> <template>
<view class="video-wrapper" id="video-container"> <view class="video-wrapper" id="video-container">
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}"> <view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
<video id="video_play" :controls="false" :src="videoObj.videoUrl" @ended="videoEnded()" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 100%;" object-fit="cover"></video> <video id="video_play" :controls="false" :src="videoObj.videoUrl" @ended="videoEnded()" @loadedmetadata="onMetadataLoaded" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 100%;" object-fit="cover"></video>
<view class="question"></view> <view class="question"></view>
<view class="popup-layer-back" v-if="!start" v-show="question"> <view class="popup-layer-back" v-if="!start" v-show="question">
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> --> <!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
@ -23,6 +23,7 @@
</view> </view>
</view> --> </view> -->
<view class="popup-layer-back" v-show="resCheck"> <view class="popup-layer-back" v-show="resCheck">
<view><image style="position: absolute; top: 20%; left: 10%;" src="/static/images/fail.gif"></image></view>
<view class="popup-layer" style="color: red;" @click="toResVideo()"> <view class="popup-layer" style="color: red;" @click="toResVideo()">
<view class="anitem1"> <view class="anitem1">
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image> <image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
@ -63,6 +64,7 @@
isOk: false, isOk: false,
isError: false, isError: false,
resCheck: false, resCheck: false,
isResVideo: false,
}; };
}, },
computed: { computed: {
@ -153,6 +155,14 @@
this.auto = true; this.auto = true;
this.resCheck = false; this.resCheck = false;
this.resVideoUrl = ""; this.resVideoUrl = "";
this.isResVideo = true;
},
onMetadataLoaded(event) {
if(this.isResVideo) {
this.isResVideo = false;
const duration = event.detail.duration;
this.videoContext.seek(duration);
}
}, },
nextQuestion(outId, obj) { nextQuestion(outId, obj) {
// //
@ -210,7 +220,9 @@
that.isError = false; that.isError = false;
that.isOk = false; that.isOk = false;
that.hasNodeId(outId); that.hasNodeId(outId);
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl if(!that.videoObj.videoUrl.includes("http")) {
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl
}
// //
if(null==obj) { if(null==obj) {

19
components/s-video/s-video.vue

@ -4,10 +4,10 @@
<image class="animg" src="/static/images/start.png"></image> <image class="animg" src="/static/images/start.png"></image>
</view> </view>
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}"> <view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
<video id="video_play" @click="stopPlay" :controls="false" :src="videoObj.videoUrl" @ended="videoEnded()" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 100%;" object-fit="cover"></video> <video id="video_play" @click="stopPlay" :src="videoObj.videoUrl" @ended="videoEnded()" @loadedmetadata="onMetadataLoaded" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop" style="width: 100%;height: 100%;" object-fit="cover"></video>
<view class="question"></view> <view class="question"></view>
<view class="popup-layer-back" v-if="!start" v-show="question"> <view class="popup-layer-back" v-if="!start" v-show="question">
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> --> <!-- <view class="popup-layer-close" @click="question=false">关闭</view> :controls="false" -->
<view class="popup-layer"> <view class="popup-layer">
<!-- <h2>请选择</h2> --> <!-- <h2>请选择</h2> -->
<view class="anitem1"> <view class="anitem1">
@ -75,6 +75,7 @@
isError: false, isError: false,
resCheck: false, resCheck: false,
showLayer: false, showLayer: false,
isResVideo: false,
}; };
}, },
computed: { computed: {
@ -171,6 +172,14 @@
this.auto = true; this.auto = true;
this.resCheck = false; this.resCheck = false;
this.resVideoUrl = ""; this.resVideoUrl = "";
this.isResVideo = true;
},
onMetadataLoaded(event) {
if(this.isResVideo) {
this.isResVideo = false;
const duration = event.detail.duration;
this.videoContext.seek(duration);
}
}, },
nextQuestion(outId, obj) { nextQuestion(outId, obj) {
// //
@ -230,8 +239,10 @@
that.isError = false; that.isError = false;
that.isOk = false; that.isOk = false;
that.hasNodeId(outId); that.hasNodeId(outId);
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl if(!that.videoObj.videoUrl.includes("http")) {
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl
}
// //
if (null == obj) { if (null == obj) {
that.resVideoUrl = that.videoObj.videoUrl; that.resVideoUrl = that.videoObj.videoUrl;

Loading…
Cancel
Save