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

511 lines
13 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. <template>
  2. <view class="main_container">
  3. <view class="show-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
  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="linkUrl"
  9. mode="aspectFill"
  10. ></image> -->
  11. <image
  12. :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect : '']"
  13. v-show="item.material_type == 0 && itemIndex == index"
  14. :src="require('@/static/source/'+linkUrl)"
  15. mode="aspectFill"
  16. ></image>
  17. <video
  18. :id="'video' + index"
  19. v-if="item.material_type == 1 && itemIndex == index"
  20. :src="require('@/static/source/'+linkUrl)"
  21. :controls="false"
  22. :autoplay="autoplay"
  23. :enable-progress-gesture="false"
  24. :enable-play-gesture="false"
  25. object-fit="contain"
  26. show-center-play-btn="false"
  27. @play="playEvent"
  28. @ended="videoPlayEnd"
  29. @waiting="waitingVideo"
  30. @loadeddata="loading"
  31. @timeupdate="timeUpdate"
  32. initial-time="initial_time"
  33. >
  34. </video>
  35. </view>
  36. </view>
  37. <view class="show-audio" @click="pauseAudio">
  38. <image :class="['audio_round',!isPauseAudio ? 'animate_round' : '']" src="~@/static/images/audio_01.png"></image>
  39. <image class="audio_zz" src="~@/static/images/audio_02.png"></image>
  40. </view>
  41. <!-- <view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{ infoTxt }}--{{ audioName }}</view> -->
  42. <!-- <view v-if="!deviceInfoShow" class="local-data">
  43. <text class="title">欢迎使用数字新视窗</text>
  44. <view class="data-info">设备ID : 123456789</view>
  45. <view class="data-info">设备账号 : 123456789</view>
  46. <view class="data-info">设备名称 : CVBBN2</view>
  47. <view class="count-down" @click="deviceInfoShow=true">{{ count }}</view>
  48. </view> -->
  49. </view>
  50. </template>
  51. <script>
  52. import one from './show.js';
  53. let innerAudioContext = uni.createInnerAudioContext();
  54. export default {
  55. components: {},
  56. data() {
  57. return {
  58. // 已登录情况显示6S得设备信息
  59. count: 6,
  60. deviceInfoShow: false,
  61. autoplay: false,
  62. // 素材
  63. materialsCont: [],
  64. show_materials: [],
  65. contentIndex: 0,
  66. itemIndex: 0,
  67. linkUrl: '',
  68. timer: null,
  69. duration: null,
  70. audioSrc: null,
  71. audioName: null,
  72. itemLength: [],
  73. flagIndex: 0,
  74. infoTxt: '',
  75. video_real_time: 0,
  76. nitial_time: '',
  77. startY: 0,
  78. startX: 0,
  79. isAutoSwitch: true,
  80. moveX: 0, //滑动的x轴距离
  81. moveY: 0, //滑动的y轴距离
  82. pageState: 0,//-1:左滑,0:没滑动,1:右滑
  83. isPauseAudio: false
  84. };
  85. },
  86. onLoad() {
  87. const _this = this;
  88. let result = one.data.data;
  89. this.materialsCont = result;
  90. this.materialsCont.map(item => {
  91. this.itemLength = this.itemLength.concat(item.show_materials.length);
  92. this.show_materials = this.show_materials.concat(item.show_materials);
  93. });
  94. // 初始化
  95. this.changIndex();
  96. },
  97. onReady: function(res) {
  98. const videoId = 'video'+this.itemIndex
  99. this.videoCtx = uni.createVideoContext(videoId)
  100. },
  101. created() {
  102. this.auto();
  103. },
  104. mounted() {
  105. // this.countdown();
  106. this.changeMaterial();
  107. },
  108. methods: {
  109. // 素材切换
  110. touchStart(event) {
  111. this.startX = event.touches[0].pageX;
  112. this.startY = event.touches[0].pageY;
  113. // console.log('开始触摸:', this.startX, this.startY);
  114. },
  115. touchMove(event) {
  116. let currentX = event.touches[0].pageX;
  117. let currentY = event.touches[0].pageY;
  118. let moveX = currentX - this.startX;
  119. let moveY = currentY - this.startY;
  120. let text = '';
  121. let state = 0; //-1:左滑,0:没滑动,1:右滑
  122. // //左右方向滑动
  123. if (Math.abs(moveX) > Math.abs(moveY)) {
  124. if (moveX < -10) {
  125. text = '左滑';
  126. state = 1;
  127. } else if (moveX > 10) {
  128. text = '右滑';
  129. state = -1;
  130. }
  131. } else {
  132. //上下方向滑动
  133. if (moveY < 0) {
  134. text = '上滑';
  135. state = -2;
  136. } else if (moveY > 0) {
  137. text = '下滑';
  138. state = 2;
  139. }
  140. }
  141. this.pageState = state;
  142. this.moveX = moveX;
  143. this.moveY = moveY;
  144. // console.log('开始滑动:', this.moveX, this.moveY, this.pageState);
  145. },
  146. touchEnd(event) {
  147. // console.log(`移动距离:${Math.abs(this.moveX)}`);
  148. // if (Math.abs(this.moveX) > 60 ) {
  149. // if (this.pageState == 1) {
  150. // this.itemIndex++;
  151. // this.flagIndex++;
  152. // this.isAutoSwitch = true;
  153. // } else if (this.pageState == -1) {
  154. // this.itemIndex--;
  155. // this.flagIndex--;
  156. // this.isAutoSwitch = false;
  157. // }
  158. // this.changIndex();
  159. // }
  160. // 上下滑动
  161. if (Math.abs(this.moveY) > 60) {
  162. if (this.pageState == -2) {
  163. this.itemIndex++;
  164. this.flagIndex++;
  165. this.isAutoSwitch = true;
  166. } else if (this.pageState == 2) {
  167. this.itemIndex--;
  168. this.flagIndex--;
  169. this.isAutoSwitch = false;
  170. }
  171. this.changIndex();
  172. }
  173. },
  174. // 自动切换
  175. changeMaterial() {
  176. const _this = this;
  177. clearInterval(_this.timer);
  178. _this.timer = setInterval(() => {
  179. _this.duration -= 1;
  180. if (_this.duration == 0) {
  181. _this.itemIndex++;
  182. _this.flagIndex++;
  183. this.isAutoSwitch = true;
  184. this.changIndex();
  185. }
  186. }, 1000);
  187. },
  188. changIndex() {
  189. const _this = this;
  190. innerAudioContext.destroy();
  191. _this.linkUrl = '';
  192. console.log(this.itemLength)
  193. // 资源素材加载到最后一张时 - 下一页
  194. if (_this.itemIndex == this.show_materials.length) {
  195. // clearInterval(_this.timer);
  196. console.log('最后一页啦')
  197. this.itemIndex = 0;
  198. this.flagIndex = 0;
  199. this.contentIndex = 0;
  200. }
  201. // 资源加载到第一张时 - 上一页
  202. if (this.itemIndex == -1) {
  203. this.itemIndex = this.show_materials.length - 1;
  204. this.contentIndex = this.itemLength.length - 1;
  205. this.flagIndex = this.itemLength[this.contentIndex];
  206. }
  207. if (this.flagIndex == -1) {
  208. // if(this.contentIndex == -1){
  209. // this.contentIndex = this.itemLength.length - 1;
  210. // }
  211. // console.log('itemIndex',this.itemIndex)
  212. // console.log('flagIndex',this.flagIndex)
  213. // console.log('contentIndex',this.contentIndex)
  214. // console.log(this.materialsCont[this.contentIndex])
  215. this.contentIndex--;
  216. this.flagIndex = this.itemLength[this.contentIndex];
  217. }
  218. // 图片播放时间
  219. _this.duration = this.show_materials[this.itemIndex].duration;
  220. // 资源地址-图片/视频
  221. _this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
  222. // 优先判断图片自带音频
  223. if (this.show_materials[this.itemIndex].bgm_url) {
  224. _this.audioSrc = this.show_materials[this.itemIndex].bgm_url;
  225. _this.audioName = this.show_materials[this.itemIndex].bgm_name;
  226. } else {
  227. // 不同发布节点
  228. if (this.contentIndex == this.itemLength.length) {
  229. this.flagIndex = 0;
  230. this.contentIndex = 0;
  231. } else {
  232. if (this.isAutoSwitch) {
  233. if (this.flagIndex == this.itemLength[this.contentIndex]) {
  234. this.flagIndex = 0;
  235. this.contentIndex++;
  236. if (this.contentIndex == this.itemLength.length || _this.itemIndex == this.show_materials.length) {
  237. this.contentIndex = this.itemLength.length-1;
  238. this.flagIndex = this.itemLength[this.contentIndex];
  239. }
  240. }
  241. }
  242. }
  243. // 图片无自带 - 再判断是否有BGM - main
  244. if (this.materialsCont[this.contentIndex].bgm_main) {
  245. this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
  246. this.audioName = this.materialsCont[this.contentIndex].bgm_name;
  247. }
  248. }
  249. // 当前资源是 - 视频 - 时,即销毁音频(防止干扰)
  250. if (this.show_materials[this.itemIndex].material_type == 1) {
  251. innerAudioContext.destroy()
  252. innerAudioContext.src = ''
  253. }
  254. // 销毁-创建音频-播放音频
  255. innerAudioContext = uni.createInnerAudioContext();
  256. console.log(innerAudioContext.paused)
  257. console.log(this.isPauseAudio)
  258. if(this.isPauseAudio){
  259. innerAudioContext.pause();
  260. }else{
  261. innerAudioContext.play();
  262. }
  263. this.playVoice(this.audioSrc);
  264. },
  265. // 视频
  266. videoPlayEnd() {
  267. console.log('end-video')
  268. this.itemIndex++;
  269. this.flagIndex++;
  270. this.changIndex();
  271. },
  272. auto() {
  273. setTimeout(()=>{
  274. this.autoplay = true;
  275. },500)
  276. },
  277. playEvent(e) {
  278. console.log("play_video")
  279. let currentId = e.target.id; // 获取当前视频id
  280. this.videoCtx = uni.createVideoContext(currentId);
  281. innerAudioContext.destroy()
  282. },
  283. loading(){
  284. console.log('play_loading')
  285. },
  286. waitingVideo(){
  287. console.log('waiting-video')
  288. this.videoCtx.pause()
  289. },
  290. timeupdateEvent(event) {
  291. console.log('timeupdateEvent')
  292. },
  293. // 禁止拖动进度条快进
  294. timeUpdate(e) {
  295. var isReady = 1; // 是否开启可以视频快进 1 禁止开启
  296. //跳转到指定播放位置 initial-time 时间为秒
  297. let that = this;
  298. //播放的总时长
  299. var duration = e.detail.duration;
  300. //实时播放进度 秒数
  301. var currentTime = parseInt(e.detail.currentTime);
  302. //当前视频进度
  303. // console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间,以秒为单位
  304. if (that.video_real_time == 0) {
  305. var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
  306. } else {
  307. var jump_time = parseInt(that.video_real_time);
  308. }
  309. if (isReady == 1) {
  310. if (currentTime > jump_time && currentTime - jump_time > 3) {
  311. let videoContext = uni.createVideoContext(e.target.id);
  312. uni.showToast({
  313. title: '未完整看完该视频,不能快进',
  314. icon: 'none',
  315. duration: 2000
  316. });
  317. videoContext.stop()
  318. videoContext.seek(0);
  319. }
  320. }
  321. that.video_real_time = currentTime; //实时播放进度
  322. },
  323. pauseAudio(){
  324. this.isPauseAudio = !this.isPauseAudio;
  325. if(this.isPauseAudio){
  326. innerAudioContext.pause()
  327. }else{
  328. innerAudioContext.play();
  329. }
  330. },
  331. // 音频
  332. playVoice(src) {
  333. const _this = this;
  334. if (innerAudioContext != undefined) {
  335. innerAudioContext.stop();
  336. }
  337. innerAudioContext = uni.createInnerAudioContext();
  338. // if(_this.isPauseAudio){
  339. // innerAudioContext.pause();
  340. // }else{
  341. // innerAudioContext.play();
  342. // }
  343. innerAudioContext.stop();
  344. innerAudioContext.src = src;
  345. innerAudioContext.autoplay = true;
  346. innerAudioContext.loop = true;
  347. innerAudioContext.onPlay(() => {
  348. this.infoTxt = '音频开始播放';
  349. console.log('开始播放');
  350. });
  351. innerAudioContext.onPause(function() {
  352. console.log('onPause');
  353. });
  354. innerAudioContext.onStop(() => {
  355. this.infoTxt = '音频停止';
  356. // console.log('停止');
  357. });
  358. innerAudioContext.onError(res => {
  359. if(this.show_materials[this.itemIndex].material_type != 1){
  360. console.log(res.errMsg);
  361. console.log(res.errCode);
  362. innerAudioContext.destroy();
  363. }
  364. });
  365. innerAudioContext.onEnded(() => {
  366. this.infoTxt = '音频自然播放结束事件';
  367. // console.log('音频自然播放结束事件');
  368. });
  369. },
  370. countdown() {
  371. this.count = 6;
  372. const timer = setInterval(() => {
  373. this.count -= 1;
  374. if (this.count < 1) {
  375. clearInterval(timer);
  376. this.deviceInfoShow = true;
  377. console.log('倒计时结束');
  378. }
  379. }, 1000);
  380. }
  381. }
  382. };
  383. </script>
  384. <style scoped>
  385. .main_container {
  386. position: relative;
  387. overflow: hidden;
  388. background: #000;
  389. }
  390. .show-item {
  391. display: flex;
  392. flex-direction: column;
  393. align-items: center;
  394. justify-content: center;
  395. }
  396. .show-item .show-img {
  397. width: 100%;
  398. height: 100vh;
  399. object-fit: cover;
  400. }
  401. .show-item uni-video {
  402. width: 100%;
  403. height: 100%;
  404. }
  405. .show-video {
  406. width: 100%;
  407. height: 100vh;
  408. }
  409. .show-audio {
  410. position: fixed;
  411. bottom: 79.16rpx;
  412. right: 46.52rpx;
  413. width: 122.91rpx;
  414. height: 113.88rpx;
  415. }
  416. .show-audio .audio_round{
  417. width: 113.19rpx;
  418. height: 113.19rpx;
  419. }
  420. .show-audio .audio_zz{
  421. position: absolute;
  422. right: 0;
  423. top: 0;
  424. width: 40.27rpx;
  425. height: 84.02rpx;
  426. z-index: 999;
  427. }
  428. .animate_round{
  429. animation: circle 2s linear infinite;
  430. }
  431. @keyframes circle {
  432. 100% {
  433. transform: rotate(360deg);
  434. }
  435. }
  436. .show-audio uni-image {
  437. width: 159.72rpx;
  438. height: 152.08rpx;
  439. }
  440. .local-data {
  441. position: absolute;
  442. left: 50%;
  443. top: 50%;
  444. display: flex;
  445. flex-direction: column;
  446. justify-content: center;
  447. width: 625rpx;
  448. height: 555.55rpx;
  449. transform: translate(-50%, -50%);
  450. font-size: 27.77rpx;
  451. color: #333;
  452. border-radius: 27.77rpx;
  453. background: rgba(255, 255, 255, 0.85);
  454. }
  455. .title {
  456. margin-bottom: 32.63rpx;
  457. font-size: 56.94rpx;
  458. text-align: center;
  459. }
  460. .data-info {
  461. padding: 0 83.33rpx;
  462. margin-bottom: 32.63rpx;
  463. }
  464. .count-down {
  465. position: absolute;
  466. right: 34.72rpx;
  467. top: 27.77rpx;
  468. width: 48.61rpx;
  469. height: 48.61rpx;
  470. font-size: 30.55rpx;
  471. text-align: center;
  472. line-height: 48.61rpx;
  473. border: 1px solid #333;
  474. border-radius: 50%;
  475. }
  476. .swiper {
  477. height: 100vh;
  478. }
  479. .item {
  480. width: 100%;
  481. height: 100%;
  482. }
  483. .mask {
  484. position: absolute;
  485. top: 0;
  486. left: 0;
  487. bottom: 0;
  488. right: 0;
  489. width: 100%;
  490. height: 100%;
  491. background: rgba(0, 0, 0, 0.3);
  492. z-index: 999;
  493. }
  494. .controls-title {
  495. position: absolute;
  496. top: 0;
  497. left: 0;
  498. bottom: 0;
  499. right: 0;
  500. width: 100%;
  501. height: 100%;
  502. background: rgba(0, 0, 0, 0.3);
  503. text-align: center;
  504. color: #ffffff;
  505. border: 10px solid #fff;
  506. z-index: 9999;
  507. }
  508. </style>