智慧画屏客户端
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.

298 lines
7.9 KiB

3 years ago
  1. <template>
  2. <view class="main_container">
  3. <view class="show-content">
  4. <view v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
  5. <!-- <image
  6. :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
  7. v-show="item.material_type == 0 && itemIndex == index"
  8. :src="require('@/static/source/' + linkUrl)"
  9. ></image> -->
  10. <image
  11. :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
  12. v-show="item.material_type == 0 && itemIndex == index"
  13. :src="'https://images.weserv.nl/?url=' + linkUrl"
  14. mode="aspectFill"
  15. ></image>
  16. <video
  17. v-if="item.material_type == 1 && itemIndex == index"
  18. :src="'../../static/source/' + linkUrl"
  19. :autoplay="autoplay"
  20. controls
  21. object-fit="fill"
  22. @ended="videoPlayEnd"
  23. ></video>
  24. <!-- <iframe v-if="item.material_type == 1 && itemIndex == index" ref="iframe" class="video-iframe" style="z-index:1;" :src="linkUrl"
  25. frameborder="0" scrolling="no" allowfullscreen="true"
  26. webkitallowfullscreen="true" mozallowfullscreen="true" @ended="videoPlayEnd">
  27. </iframe> -->
  28. </view>
  29. </view>
  30. <view class="show-audio"></view>
  31. <view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{infoTxt}}--{{linkUrl}}--{{ audioName }}</view>
  32. <!-- <view v-if="!deviceInfoShow" class="local-data">
  33. <text class="title">欢迎使用数字新视窗</text>
  34. <view class="data-info">设备ID : 123456789</view>
  35. <view class="data-info">设备账号 : 123456789</view>
  36. <view class="data-info">设备名称 : CVBBN2</view>
  37. <view class="count-down" @click="deviceInfoShow=true">{{ count }}</view>
  38. </view> -->
  39. </view>
  40. </template>
  41. <script>
  42. import utils from '@/utils/common.js';
  43. import one from './show2.js';
  44. let innerAudioContext = uni.createInnerAudioContext();
  45. export default {
  46. components: {},
  47. data() {
  48. return {
  49. // 已登录情况显示6S得设备信息
  50. count: 6,
  51. deviceInfoShow: false,
  52. autoplay: false,
  53. // 素材
  54. materialsCont: [],
  55. show_materials: [],
  56. contentIndex: 0,
  57. itemIndex: 0,
  58. linkUrl: '',
  59. timer: null,
  60. duration: null,
  61. audioSrc: null,
  62. audioName: null,
  63. itemLength: [],
  64. flagIndex: 0,
  65. infoTxt:'',
  66. voicePlayer: null
  67. };
  68. },
  69. onLoad() {
  70. const _this = this;
  71. let result = one.data.data;
  72. this.materialsCont = result;
  73. this.materialsCont.map(item => {
  74. this.itemLength = this.itemLength.concat(item.show_materials.length);
  75. this.show_materials = this.show_materials.concat(item.show_materials);
  76. });
  77. // 初始化
  78. this.changIndex();
  79. this.voicePlayer = plus.audio.createPlayer({ src: 'https://qiniu.aiyxlib.com/yuekan-BGM27.mp3' });
  80. this.voicePlayer.setRoute(this.playMode);
  81. // 监听自然播放完成
  82. this.voicePlayer.addEventListener('ended', () => {
  83. // 销毁正在监听设备距离的监听器
  84. if (this.watchProximity) {
  85. plus.proximity.clearWatch(this.watchProximity);
  86. this.watchProximity = null;
  87. }
  88. console.log('播放完毕了');
  89. });
  90. // 监听音频可以开始播放事件
  91. this.voicePlayer.addEventListener('play', () => {
  92. // 首次播放时会执行两次回调
  93. if (this.playState !== 2) {
  94. // plus.audio.ROUTE_SPEAKER:扬声器 0
  95. // plus.audio.ROUTE_EARPIECE:听筒 1
  96. this.voicePlayer.setRoute(this.playMode);
  97. this.playState++;
  98. }
  99. });
  100. // 监听音频播放错误事件
  101. this.voicePlayer.addEventListener('error', (err) => {
  102. console.log('报错err', err);
  103. // 销毁正在监听设备距离的监听器
  104. if (this.watchProximity) {
  105. plus.proximity.clearWatch(this.watchProximity);
  106. this.watchProximity = null;
  107. }
  108. });
  109. },
  110. created() {
  111. this.atuo();
  112. },
  113. mounted() {
  114. // this.countdown();
  115. this.changeMaterial();
  116. this.voicePlayer.play();
  117. },
  118. methods: {
  119. changeMaterial() {
  120. const _this = this;
  121. clearInterval(_this.timer);
  122. _this.timer = setInterval(() => {
  123. _this.duration -= 1;
  124. if (_this.duration == 0) {
  125. _this.itemIndex++;
  126. _this.flagIndex++;
  127. this.changIndex();
  128. }
  129. }, 1000);
  130. },
  131. changIndex() {
  132. const _this = this;
  133. if (_this.itemIndex == this.show_materials.length) {
  134. // clearInterval(_this.timer);
  135. this.itemIndex = 0;
  136. this.flagIndex = 0;
  137. this.contentIndex = 0;
  138. innerAudioContext.stop();
  139. }
  140. _this.duration = this.show_materials[this.itemIndex].duration;
  141. _this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
  142. if (this.show_materials[this.itemIndex].bgm_url) {
  143. _this.audioSrc = '../../static/source/' + this.show_materials[this.itemIndex].bgm_url;
  144. _this.audioName = this.show_materials[this.itemIndex].bgm_name;
  145. } else {
  146. if (this.contentIndex == this.itemLength.length) {
  147. this.flagIndex = 0;
  148. this.contentIndex = 0;
  149. }else{
  150. if (this.flagIndex == this.itemLength[this.contentIndex]) {
  151. this.flagIndex = 0;
  152. this.contentIndex++;
  153. }
  154. }
  155. if (this.materialsCont[this.contentIndex].bgm_main) {
  156. this.audioSrc = '../../static/source/' + this.materialsCont[this.contentIndex].bgm_main;
  157. this.audioName = this.materialsCont[this.contentIndex].bgm_name;
  158. }
  159. }
  160. // this.playVoice(this.audioSrc);
  161. if (this.show_materials[this.itemIndex].material_type == 1) {
  162. innerAudioContext.stop();
  163. }
  164. },
  165. videoPlayEnd() {
  166. this.itemIndex++;
  167. this.flagIndex++;
  168. this.changIndex();
  169. },
  170. playVoice(src) {
  171. if (innerAudioContext != undefined) {
  172. innerAudioContext.stop();
  173. }
  174. innerAudioContext = uni.createInnerAudioContext();
  175. innerAudioContext.stop();
  176. innerAudioContext.src = src;
  177. innerAudioContext.autoplay = true;
  178. innerAudioContext.onPlay(() => {
  179. this.infoTxt = ''
  180. this.infoTxt = '开始播放'
  181. console.log('开始播放');
  182. });
  183. innerAudioContext.onError(res => {
  184. console.log(res.errMsg);
  185. console.log(res.errCode);
  186. innerAudioContext.stop();
  187. });
  188. innerAudioContext.onPause(() => {
  189. //暂停监听
  190. this.infoTxt = '暂停'
  191. console.log('暂停');
  192. // innerAudioContext.stop();
  193. });
  194. innerAudioContext.onEnded(() => {
  195. // 自然播放结束监听也需要更改isPause 开关状态
  196. this.infoTxt = '音频自然播放结束事件'
  197. console.log('音频自然播放结束事件');
  198. innerAudioContext.stop();
  199. });
  200. },
  201. atuo() {
  202. this.autoplay = true;
  203. },
  204. countdown() {
  205. this.count = 6;
  206. const timer = setInterval(() => {
  207. this.count -= 1;
  208. if (this.count < 1) {
  209. clearInterval(timer);
  210. this.deviceInfoShow = true;
  211. console.log('倒计时结束');
  212. }
  213. }, 1000);
  214. }
  215. }
  216. };
  217. </script>
  218. <style scoped>
  219. .main_container {
  220. position: relative;
  221. overflow: hidden;
  222. background: #000;
  223. }
  224. .show-item {
  225. /* width: 100%;
  226. height: 100vh; */
  227. display: flex;
  228. flex-direction: column;
  229. align-items: center;
  230. justify-content: center;
  231. }
  232. .show-item .show-img {
  233. width: 100%;
  234. height: 100vh;
  235. object-fit: cover;
  236. }
  237. .show-item uni-video {
  238. width: 100%;
  239. }
  240. .show-video {
  241. width: 100%;
  242. height: 100vh;
  243. }
  244. .show-audio {
  245. position: fixed;
  246. bottom: 79.16rpx;
  247. right: 46.52rpx;
  248. width: 159.72rpx;
  249. height: 152.08rpx;
  250. background: url(~@/static/images/an-yy.png) no-repeat;
  251. background-size: cover;
  252. }
  253. .show-audio uni-image {
  254. width: 159.72rpx;
  255. height: 152.08rpx;
  256. }
  257. .local-data {
  258. position: absolute;
  259. left: 50%;
  260. top: 50%;
  261. display: flex;
  262. flex-direction: column;
  263. justify-content: center;
  264. width: 625rpx;
  265. height: 555.55rpx;
  266. transform: translate(-50%, -50%);
  267. font-size: 27.77rpx;
  268. color: #333;
  269. border-radius: 27.77rpx;
  270. background: rgba(255, 255, 255, 0.85);
  271. }
  272. .title {
  273. margin-bottom: 32.63rpx;
  274. font-size: 56.94rpx;
  275. text-align: center;
  276. }
  277. .data-info {
  278. padding: 0 83.33rpx;
  279. margin-bottom: 32.63rpx;
  280. }
  281. .count-down {
  282. position: absolute;
  283. right: 34.72rpx;
  284. top: 27.77rpx;
  285. width: 48.61rpx;
  286. height: 48.61rpx;
  287. font-size: 30.55rpx;
  288. text-align: center;
  289. line-height: 48.61rpx;
  290. border: 1px solid #333;
  291. border-radius: 50%;
  292. }
  293. </style>