|
|
<template> <view class="main_container"> <view class="show-content"> <view v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']"> <!-- <image :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']" v-show="item.material_type == 0 && itemIndex == index" :src="require('@/static/source/' + linkUrl)" ></image> --> <image :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']" v-show="item.material_type == 0 && itemIndex == index" :src="'https://images.weserv.nl/?url=' + linkUrl" mode="aspectFill" ></image> <video v-if="item.material_type == 1 && itemIndex == index" :src="'../../static/source/' + linkUrl" :autoplay="autoplay" controls object-fit="fill" @ended="videoPlayEnd" ></video> <!-- <iframe v-if="item.material_type == 1 && itemIndex == index" ref="iframe" class="video-iframe" style="z-index:1;" :src="linkUrl" frameborder="0" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" @ended="videoPlayEnd"> </iframe> --> </view> </view> <view class="show-audio"></view> <view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{infoTxt}}--{{linkUrl}}--{{ audioName }}</view>
<!-- <view v-if="!deviceInfoShow" class="local-data"> <text class="title">欢迎使用数字新视窗</text> <view class="data-info">设备ID : 123456789</view> <view class="data-info">设备账号 : 123456789</view> <view class="data-info">设备名称 : CVBBN2</view> <view class="count-down" @click="deviceInfoShow=true">{{ count }}</view> </view> --> </view> </template>
<script> import utils from '@/utils/common.js'; import one from './show2.js'; let innerAudioContext = uni.createInnerAudioContext(); export default { components: {}, data() { return { // 已登录情况显示6S得设备信息
count: 6, deviceInfoShow: false, autoplay: false, // 素材
materialsCont: [], show_materials: [], contentIndex: 0, itemIndex: 0, linkUrl: '', timer: null, duration: null, audioSrc: null, audioName: null, itemLength: [], flagIndex: 0, infoTxt:'', voicePlayer: null }; }, onLoad() { const _this = this; let result = one.data.data; this.materialsCont = result; this.materialsCont.map(item => { this.itemLength = this.itemLength.concat(item.show_materials.length); this.show_materials = this.show_materials.concat(item.show_materials); }); // 初始化
this.changIndex(); this.voicePlayer = plus.audio.createPlayer({ src: 'https://qiniu.aiyxlib.com/yuekan-BGM27.mp3' }); this.voicePlayer.setRoute(this.playMode); // 监听自然播放完成
this.voicePlayer.addEventListener('ended', () => { // 销毁正在监听设备距离的监听器
if (this.watchProximity) { plus.proximity.clearWatch(this.watchProximity); this.watchProximity = null; } console.log('播放完毕了'); }); // 监听音频可以开始播放事件
this.voicePlayer.addEventListener('play', () => { // 首次播放时会执行两次回调
if (this.playState !== 2) { // plus.audio.ROUTE_SPEAKER:扬声器 0
// plus.audio.ROUTE_EARPIECE:听筒 1
this.voicePlayer.setRoute(this.playMode); this.playState++; } }); // 监听音频播放错误事件
this.voicePlayer.addEventListener('error', (err) => { console.log('报错err', err); // 销毁正在监听设备距离的监听器
if (this.watchProximity) { plus.proximity.clearWatch(this.watchProximity); this.watchProximity = null; } }); }, created() { this.atuo(); }, mounted() { // this.countdown();
this.changeMaterial(); this.voicePlayer.play(); }, methods: { changeMaterial() { const _this = this; clearInterval(_this.timer); _this.timer = setInterval(() => { _this.duration -= 1; if (_this.duration == 0) { _this.itemIndex++; _this.flagIndex++; this.changIndex(); } }, 1000); }, changIndex() { const _this = this; if (_this.itemIndex == this.show_materials.length) { // clearInterval(_this.timer);
this.itemIndex = 0; this.flagIndex = 0; this.contentIndex = 0; innerAudioContext.stop(); } _this.duration = this.show_materials[this.itemIndex].duration; _this.linkUrl = this.show_materials[this.itemIndex].deposit_url; if (this.show_materials[this.itemIndex].bgm_url) { _this.audioSrc = '../../static/source/' + this.show_materials[this.itemIndex].bgm_url; _this.audioName = this.show_materials[this.itemIndex].bgm_name; } else { if (this.contentIndex == this.itemLength.length) { this.flagIndex = 0; this.contentIndex = 0; }else{ if (this.flagIndex == this.itemLength[this.contentIndex]) { this.flagIndex = 0; this.contentIndex++; } } if (this.materialsCont[this.contentIndex].bgm_main) { this.audioSrc = '../../static/source/' + this.materialsCont[this.contentIndex].bgm_main; this.audioName = this.materialsCont[this.contentIndex].bgm_name; } } // this.playVoice(this.audioSrc);
if (this.show_materials[this.itemIndex].material_type == 1) { innerAudioContext.stop(); } }, videoPlayEnd() { this.itemIndex++; this.flagIndex++; this.changIndex(); }, playVoice(src) { if (innerAudioContext != undefined) { innerAudioContext.stop(); } innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.stop(); innerAudioContext.src = src; innerAudioContext.autoplay = true; innerAudioContext.onPlay(() => { this.infoTxt = '' this.infoTxt = '开始播放' console.log('开始播放'); }); innerAudioContext.onError(res => { console.log(res.errMsg); console.log(res.errCode); innerAudioContext.stop(); }); innerAudioContext.onPause(() => { //暂停监听
this.infoTxt = '暂停' console.log('暂停'); // innerAudioContext.stop();
}); innerAudioContext.onEnded(() => { // 自然播放结束监听也需要更改isPause 开关状态
this.infoTxt = '音频自然播放结束事件' console.log('音频自然播放结束事件'); innerAudioContext.stop(); }); }, atuo() { this.autoplay = true; }, countdown() { this.count = 6; const timer = setInterval(() => { this.count -= 1; if (this.count < 1) { clearInterval(timer); this.deviceInfoShow = true; console.log('倒计时结束'); } }, 1000); } } }; </script>
<style scoped> .main_container { position: relative; overflow: hidden; background: #000; } .show-item { /* width: 100%; height: 100vh; */ display: flex; flex-direction: column; align-items: center; justify-content: center; } .show-item .show-img { width: 100%; height: 100vh; object-fit: cover; } .show-item uni-video { width: 100%; } .show-video { width: 100%; height: 100vh; } .show-audio { position: fixed; bottom: 79.16rpx; right: 46.52rpx; width: 159.72rpx; height: 152.08rpx; background: url(~@/static/images/an-yy.png) no-repeat; background-size: cover; } .show-audio uni-image { width: 159.72rpx; height: 152.08rpx; } .local-data { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; justify-content: center; width: 625rpx; height: 555.55rpx; transform: translate(-50%, -50%); font-size: 27.77rpx; color: #333; border-radius: 27.77rpx; background: rgba(255, 255, 255, 0.85); } .title { margin-bottom: 32.63rpx; font-size: 56.94rpx; text-align: center; } .data-info { padding: 0 83.33rpx; margin-bottom: 32.63rpx; } .count-down { position: absolute; right: 34.72rpx; top: 27.77rpx; width: 48.61rpx; height: 48.61rpx; font-size: 30.55rpx; text-align: center; line-height: 48.61rpx; border: 1px solid #333; border-radius: 50%; } </style>
|