116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<video
|
|
:src="url"
|
|
class="video-detail"
|
|
:controls="false"
|
|
:show-center-play-btn="false"
|
|
:autoplay="true"
|
|
:loop="true"
|
|
:muted="true"
|
|
></video>
|
|
<!-- <ad-rewarded-video ref="adRewardedVideo" adpid="1507000689" :loadnext="true" v-slot:default="{loading, error}" @load="onadload" @close="onadclose" @error="onaderror">
|
|
<button :disabled="loading" :loading="loading">显示广告</button>
|
|
</ad-rewarded-video> -->
|
|
<uni-fab ref="fab" :pattern="pattern" :horizontal="'right'" :vertical="'bottom'" :popMenu="false" @fabClick="downloadAction" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { downloadAndSaveVideo } from '@/utils/media';
|
|
export default {
|
|
data() {
|
|
return {
|
|
url:"https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
|
|
id:0,
|
|
pattern:{
|
|
color:'#19c324',
|
|
selectedColor:'#19c324',
|
|
buttonColor:"rgba(0, 0, 0, 0)",
|
|
icon:'cloud-download-filled',
|
|
iconColor:'#fff'
|
|
},
|
|
isDownload:false
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.id = options.id;
|
|
// 这里可以根据id发起请求获取详情数据等操作
|
|
this.$http.get('/resource/'+this.id).then((resp)=>{
|
|
this.url = resp.url
|
|
}).catch((err)=>{
|
|
console.log('请求异常')
|
|
})
|
|
} else {
|
|
console.log('获取id异常')
|
|
}
|
|
|
|
// 加载广告
|
|
// this.$refs.adRewardedVideo.load();
|
|
},
|
|
methods: {
|
|
async downloadAction() {
|
|
// 判断用户是否为会员
|
|
let userInfo = null
|
|
uni.getStorage({
|
|
key:'user-info',
|
|
success:function (res) {
|
|
userInfo = res
|
|
},
|
|
fail: (err) => {
|
|
// 获取用户信息异常
|
|
this.$refs.adRewardedVideo.show();
|
|
}
|
|
})
|
|
|
|
if (userInfo != null && userInfo.is_vip) {
|
|
try {
|
|
const url = "/resource/"+this.id
|
|
const result = await downloadAndSaveVideo(url);
|
|
if (result) {
|
|
// 下载成功记录
|
|
this.isDownload = true
|
|
this.pattern.iconColor = this.isDownload? '#19c324':'#fff'
|
|
this.$http.post('/resource/'+this.id+'/download');
|
|
}
|
|
} catch (error) {
|
|
console.error('下载失败:', error);
|
|
}
|
|
}
|
|
},
|
|
onadload(e) {
|
|
console.log('广告数据加载成功');
|
|
},
|
|
onadclose(e) {
|
|
const detail = e.detail
|
|
// 用户点击了【关闭广告】按钮
|
|
if (detail && detail.isEnded) {
|
|
// 正常播放结束
|
|
console.log("onadclose " + detail.isEnded);
|
|
} else {
|
|
// 播放中途退出
|
|
console.log("onadclose " + detail.isEnded);
|
|
}
|
|
},
|
|
onaderror(e) {
|
|
// 广告加载失败
|
|
console.log("onaderror: ", e.detail);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.video-detail {
|
|
width: 100%;
|
|
height: 100vh;
|
|
/* 16:9 宽高比 */
|
|
aspect-ratio: 16/9;
|
|
background-color: #000;
|
|
}
|
|
|
|
|
|
</style>
|