You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
500 lines
12 KiB
500 lines
12 KiB
<template>
|
|
<view class="video-wrapper" id="video-container">
|
|
<view class="marsk" @click="playVideo" v-if="showLayer">
|
|
<image class="animg-start" src="/static/images/start.png"></image>
|
|
</view>
|
|
<view style="position:relative;width:100%;" :style="{'height':videoHeight+'px'}">
|
|
<video id="video_play" @click="stopPlay" :src="videoObj.videoUrl" :controls="false" @ended="videoEnded()"
|
|
@loadedmetadata="onMetadataLoaded" :autoplay="auto" :show-fullscreen-btn="false" :loop="isLoop"
|
|
style="width: 100%;height: 100%;" object-fit="none"></video>
|
|
<view class="question"></view>
|
|
<view class="popup-layer-back" v-if="!start" v-show="question">
|
|
<!-- <view class="popup-layer-close" @click="question=false">关闭</view> -->
|
|
<view class="popup-layer">
|
|
<!-- <h2>请选择</h2> -->
|
|
<view class="anitem1">
|
|
<image class="animg1" src="/static/videos/skin_bg_v1.png"></image>
|
|
<view class="antxt1">{{ask}}</view>
|
|
</view>
|
|
<view class="anitem" @click="nextQuestion(item.outs[0], item)" v-for="(item, index) in answerList"
|
|
:key="index">
|
|
<image class="animg" src="/static/videos/skin_bg_1a.png"></image>
|
|
<view class="antxt">{{item.channel}}</view>
|
|
<view class="judd jdok" v-show="isOk && item.choose === 'true'">
|
|
<image class="judimg" src="/static/images/icon-ok.png"></image>
|
|
</view>
|
|
<view class="judd jderr" v-show="isError && item.choose === 'false'">
|
|
<image class="judimg" src="/static/images/icon-err.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="popup-layer-back" v-if="start">
|
|
<view class="popup-layer" @click="nextQuestion(2, null)">
|
|
<p>开始</p>
|
|
</view>
|
|
</view> -->
|
|
<view class="popup-layer-back" v-show="resCheck">
|
|
<view class="failed-tip">
|
|
<image :src="failUrl"></image>
|
|
</view>
|
|
<view class="popup-layer fullbox" @click="toResVideo()">
|
|
<view class="btnsty">重新选择逃生路线</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapMutations,
|
|
mapState
|
|
} from 'vuex'
|
|
export default {
|
|
name: "s-video",
|
|
data() {
|
|
return {
|
|
videoContext: null,
|
|
isLoop: false,
|
|
resVideoUrl: "",
|
|
resVideoUrlTmp: "",
|
|
resNodeId: 2,
|
|
resNodeIdTmp: 2,
|
|
videoHeight: 300,
|
|
videoObjList: [],
|
|
videoObj: {},
|
|
answerList: [],
|
|
start: true,
|
|
end: false,
|
|
auto: true,
|
|
question: false,
|
|
questionFreId: "",
|
|
preQuestionId: "",
|
|
correct: "",
|
|
ask: "",
|
|
isOk: false,
|
|
isError: false,
|
|
resCheck: false,
|
|
showLayer: false,
|
|
isResVideo: false,
|
|
failUrl: uni.$http.baseUrl + "/profile//images/fail.gif",
|
|
innerAudioContext: null,
|
|
startNodeId: 2,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState('m_user', ['userId'])
|
|
},
|
|
watch: {
|
|
jsonId: {
|
|
handler: function() {
|
|
this.getBindJson();
|
|
}
|
|
}
|
|
},
|
|
props: {
|
|
jsonId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
sceneId: {
|
|
type: String,
|
|
default: "",
|
|
}
|
|
},
|
|
created() {
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
this.videoHeight = res.screenHeight;
|
|
}
|
|
});
|
|
|
|
this.innerAudioContext = uni.createInnerAudioContext();
|
|
this.innerAudioContext.autoplay = true;
|
|
this.innerAudioContext.src = "/static/videos/supermario.mp3";
|
|
|
|
// this.videoContext = uni.createVideoContext("video_play");
|
|
// this.videoContext.requestFullScreen();
|
|
// this.getBindJson();
|
|
},
|
|
// watch: {
|
|
// current: {
|
|
// immediate: true,
|
|
// handler: function() {
|
|
// this.videoContext = uni.createVideoContext('video_play', this);
|
|
// this.$nextTick(() => {
|
|
// if (this.current != this.videoIndex) {
|
|
// this.stopPlay()
|
|
// } else {
|
|
// this.playVideo()
|
|
// }
|
|
// })
|
|
// }
|
|
// }
|
|
// },
|
|
mounted() {
|
|
// 创建视频对象
|
|
this.videoContext = uni.createVideoContext('video_play', this);
|
|
},
|
|
methods: {
|
|
playVideo() {
|
|
this.showLayer = false;
|
|
this.videoContext.play();
|
|
},
|
|
stopPlay() {
|
|
this.showLayer = true;
|
|
this.videoContext.pause();
|
|
},
|
|
videoEnded() {
|
|
this.auto = false;
|
|
this.question = true;
|
|
// 出答案
|
|
if (this.videoObj.outs.length > 0) {
|
|
this.answerList = [];
|
|
for (var i = 0; i < this.videoObj.outs.length; i++) {
|
|
this.getAnswer(this.videoObj.outs[i])
|
|
}
|
|
} else {
|
|
if (this.resVideoUrl == "") {
|
|
// 为空表示答题正确正常跳转
|
|
this.end = true;
|
|
this.answerList = [];
|
|
this.question = false;
|
|
uni.navigateTo({
|
|
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' +
|
|
this.jsonId + '&sceneId=' + this.sceneId
|
|
})
|
|
} else {
|
|
// 不为空表示答题错误展示返回重新选择
|
|
this.resCheck = true;
|
|
this.question = false;
|
|
this.innerAudioContext.play();
|
|
|
|
// this.timer = setTimeout(() => {
|
|
// this.showTitle = false
|
|
// clearTimeout(this.timer)
|
|
// }, 5000)
|
|
}
|
|
}
|
|
},
|
|
toResVideo() {
|
|
// 返回播放上一视频
|
|
this.hasNodeId(this.resNodeId);
|
|
this.videoObj.videoUrl = this.resVideoUrl;
|
|
this.start = false;
|
|
this.question = false;
|
|
this.auto = true;
|
|
this.resCheck = false;
|
|
this.resVideoUrl = "";
|
|
this.isResVideo = true;
|
|
this.innerAudioContext.stop();
|
|
},
|
|
onMetadataLoaded(event) {
|
|
if (this.isResVideo) {
|
|
this.isResVideo = false;
|
|
const duration = event.detail.duration;
|
|
this.videoContext.seek(duration);
|
|
}
|
|
},
|
|
nextQuestion(outId, obj) {
|
|
this.innerAudioContext.stop();
|
|
// 点击开始后先增加题次
|
|
if (this.startNodeId == outId) {
|
|
this.$api.addQuestionFre({
|
|
roleId: this.jsonId,
|
|
sceneId: this.sceneId,
|
|
userId: this.userId
|
|
})
|
|
.then(res => {
|
|
this.questionFreId = res.data;
|
|
}).catch((e) => console.log(e)); //捕获异常
|
|
}
|
|
|
|
var isCorrect = 0;
|
|
// 先提交所选答案
|
|
if (null != obj) {
|
|
// 判断答题是否正确
|
|
// if (this.correct.toUpperCase() == obj.channel.slice(0, 1).toUpperCase()) {
|
|
if (this.correct.toUpperCase().includes(obj.channel.slice(0, 1).toUpperCase())) {
|
|
// 控制选中答案单条显示对错
|
|
this.$set(obj, 'choose', 'true');
|
|
isCorrect = 1
|
|
this.isError = false;
|
|
this.isOk = true;
|
|
} else {
|
|
// 控制选中答案单条显示对错
|
|
this.$set(obj, 'choose', 'false');
|
|
}
|
|
var param = {
|
|
answer: obj.channel,
|
|
ask: this.ask,
|
|
questionFreId: this.questionFreId,
|
|
questionId: this.preQuestionId,
|
|
correctAnswer: this.correct,
|
|
analysis: obj.analysis,
|
|
correct: isCorrect,
|
|
}
|
|
this.$api.addAnswer(param)
|
|
.then(res => {
|
|
console.log(res);
|
|
}).catch((e) => console.log(e)); //捕获异常
|
|
}
|
|
|
|
// 所选答案错误处理1: 用于之前的对错提示展示
|
|
if (isCorrect == 0 && this.startNodeId != outId) {
|
|
this.isError = true;
|
|
this.isOk = false;
|
|
} else {
|
|
this.isError = false;
|
|
this.isOk = true;
|
|
}
|
|
|
|
// 延长0.5秒播放下一视频
|
|
const that = this;
|
|
setTimeout(function() { // setInterval同理
|
|
that.isError = false;
|
|
that.isOk = false;
|
|
that.hasNodeId(outId);
|
|
if (!that.videoObj.videoUrl.includes("http")) {
|
|
that.videoObj.videoUrl = uni.$http.baseUrl + that.videoObj.videoUrl
|
|
}
|
|
|
|
// 用于记录上一个视频
|
|
if (null == obj) {
|
|
that.resVideoUrl = that.videoObj.videoUrl;
|
|
that.resNodeId = outId;
|
|
that.resVideoUrlTmp = that.resVideoUrl;
|
|
that.resNodeIdTmp = that.resNodeId;
|
|
} else if (isCorrect == 1) {
|
|
that.resVideoUrl = that.videoObj.videoUrl;
|
|
that.resNodeId = outId;
|
|
that.resVideoUrlTmp = that.resVideoUrl;
|
|
that.resNodeIdTmp = that.resNodeId;
|
|
} else if (isCorrect != 1) {
|
|
that.resVideoUrl = that.resVideoUrlTmp;
|
|
that.resNodeId = that.resNodeIdTmp;
|
|
} else if (obj != null && obj.questionId == 'google') {
|
|
that.resVideoUrl = "";
|
|
that.resNodeId = "";
|
|
}
|
|
|
|
that.start = false;
|
|
that.question = false;
|
|
that.auto = true;
|
|
}, 2000);
|
|
},
|
|
getBindJson() {
|
|
this.start = true;
|
|
this.end = false;
|
|
this.videoObjList = [];
|
|
this.$api.getBindJson(this.jsonId)
|
|
.then(res => {
|
|
this.videoObjList.push(...res.data);
|
|
this.hasNodeId(1);
|
|
}).catch((e) => console.log(e)); //捕获异常
|
|
},
|
|
hasNodeId(nodeId) {
|
|
for (let i=0; i < this.videoObjList.length; i++) {
|
|
if (nodeId == this.videoObjList[i].nodeId) {
|
|
this.videoObj = this.videoObjList[i];
|
|
console.log(this.videoObj)
|
|
console.log(this.videoObj.videoUrl)
|
|
this.correct = this.videoObjList[i].correct;
|
|
this.ask = this.videoObjList[i].ask;
|
|
// 确认连接开始的节点
|
|
if(nodeId == 1) {
|
|
this.startNodeId = this.videoObj.outs[0]
|
|
}
|
|
}
|
|
}
|
|
this.preQuestionId = this.videoObj.questionId;
|
|
// 直接自动开始播放
|
|
if (nodeId == 1) {
|
|
console.log(this.startNodeId)
|
|
this.nextQuestion(this.startNodeId, null)
|
|
}
|
|
},
|
|
getAnswer(outId) {
|
|
for (var i = 0; i < this.videoObjList.length; i++) {
|
|
if (outId == this.videoObjList[i].nodeId) {
|
|
this.answerList.push(this.videoObjList[i]);
|
|
}
|
|
}
|
|
if (this.answerList.length == 1 && this.answerList[0].questionId == 'google') {
|
|
this.end = true;
|
|
this.answerList = [];
|
|
this.question = false;
|
|
uni.navigateTo({
|
|
url: '/subpkg/complete/complete?questionFreId=' + this.questionFreId + '&roleId=' + this
|
|
.jsonId + '&sceneId=' + this.sceneId
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* 设置弹出层 */
|
|
.marsk {
|
|
position: absolute;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, .35);
|
|
}
|
|
|
|
.animg-start {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
/* 首先设置背景层 */
|
|
.popup-layer-back {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
z-index: 9998;
|
|
}
|
|
|
|
/* 然后设置弹出层 */
|
|
.popup-layer {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #fff;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.popup-layer .anitem1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 240rpx;
|
|
}
|
|
|
|
.popup-layer .anitem1 .animg1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.popup-layer .anitem1 .antxt1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 6%;
|
|
width: 90%;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.popup-layer .anitem {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
margin: 20rpx auto;
|
|
width: 100vw;
|
|
height: 180rpx;
|
|
}
|
|
|
|
.popup-layer .anitem .animg {
|
|
width: 98%;
|
|
height: 100%;
|
|
}
|
|
|
|
.popup-layer .anitem .antxt {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
margin: 10%;
|
|
width: 82%;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.judd {
|
|
position: absolute;
|
|
top: -20rpx;
|
|
right: 0;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.jdok {
|
|
background-color: rgba(3, 173, 55, .35);
|
|
}
|
|
|
|
.jderr {
|
|
background-color: rgba(249, 21, 43, .35);
|
|
}
|
|
|
|
.judd .judimg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
|
|
.failed-tip {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 560rpx;
|
|
height: 560rpx;
|
|
}
|
|
|
|
.failed-tip image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.fullbox {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.btnsty {
|
|
position: absolute;
|
|
left: 20%;
|
|
bottom: 10%;
|
|
width: 60%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
border-radius: 50rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 1px solid #1367fe;
|
|
color: #fff;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* 设置关闭按钮 */
|
|
.popup-layer-close {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|