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.
98 lines
2.2 KiB
98 lines
2.2 KiB
<template>
|
|
<view class="content">
|
|
<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
|
|
<view class="playvideo">
|
|
<view class="playvideowrap">
|
|
|
|
<view class="title">{{title}}</view>
|
|
|
|
<view v-if="type=='video'">
|
|
<video style="width:100%" ref="videos" id="videos" :autoplay="true"
|
|
@play="playFullScreen" :src="url?url:''" play-btn-position="center"></video>
|
|
</view>
|
|
<view v-if="type=='audio'" style="padding:20rpx;padding-top:0">
|
|
<image :src="image" mode="heightFix" style="max-width:690rpx;height:500rpx;display:block;margin:20rpx auto;margin-top:0"></image>
|
|
<free-audio startPic='../../static/detail-play.png'
|
|
endPic='../../static/detail-stop.png' audioId='audio1' :url="url?url:''"></free-audio>
|
|
</view>
|
|
<!-- -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
baseJson
|
|
} from "@/config/index.js"
|
|
import freeAudio from '@/components/free-audio.vue'
|
|
export default {
|
|
components: {
|
|
freeAudio
|
|
},
|
|
data() {
|
|
return {
|
|
id: '',
|
|
type: 'video',
|
|
url: '',
|
|
baseUrl: "http://h5.ali251.langye.net",
|
|
title: '',
|
|
image:''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
console.log("options", options)
|
|
|
|
this.id = options.id ? options.id : ''
|
|
this.type = options.type ? options.type : 'video'
|
|
if (this.id) {
|
|
baseJson.map(item => {
|
|
if (this.id == item.id) {
|
|
this.url = this.baseUrl + item.url
|
|
this.type = item.type
|
|
this.title = item.name
|
|
if(item.type==='audio'){
|
|
this.image = this.baseUrl + item.image
|
|
}
|
|
}
|
|
})
|
|
}
|
|
console.log("baseJson", baseJson, this.id, this.url, this.title)
|
|
},
|
|
methods: {
|
|
playFullScreen() {
|
|
let videoContext = uni.createVideoContext('videos', this)
|
|
videoContext.requestFullScreen()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.bg {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.playvideo {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 40%;
|
|
/* text-align: center; */
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
.title {
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
</style> |