index.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="container global-video-box" v-if="showVideoPop">
  3. <view class="video-content">
  4. <video
  5. :id="videoPopList.Id"
  6. :src="videoPopList.ResourceUrl"
  7. :poster="videoPopList.BackgroundImg"
  8. enable-play-gesture
  9. :custom-cache="false"
  10. object-fit="contain"
  11. show-mute-btn
  12. @ended="handleVideoEnd"
  13. @timeupdate="handleVideoTimeUpdate"
  14. ></video>
  15. <view class="title text_twoLine">
  16. {{ videoPopList.Title }}
  17. </view>
  18. </view>
  19. <view class="close-icon">
  20. <image @click="handleShow" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/close-icon.png"> </image>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. import { Home } from "@/config/api";
  26. export default {
  27. name: "",
  28. filters: {},
  29. components: {},
  30. props: {
  31. showVideoPop: {
  32. default: false,
  33. type: Boolean,
  34. },
  35. videoPopList: {
  36. default: {},
  37. type: Object,
  38. },
  39. },
  40. computed: {
  41. curVideoId() {
  42. return this.$store.state.videoPlay.playVideoId;
  43. },
  44. activityVideoId() {
  45. return this.$store.state.videoPlay.playVideoActId;
  46. },
  47. },
  48. data() {
  49. return {
  50. videoContext: null,
  51. curVideoTime: 0,
  52. };
  53. },
  54. watch: {
  55. showVideoPop: {
  56. handler(newVal) {
  57. if (newVal) {
  58. setTimeout(() => {
  59. this.handelVideoPlayChild();
  60. }, 300);
  61. }
  62. },
  63. },
  64. },
  65. created() {},
  66. mounted() {},
  67. methods: {
  68. //视频的播放事件
  69. handelVideoPlayChild() {
  70. this.videoContext = wx.createVideoContext(this.videoPopList.Id.toString(), this);
  71. Home.microAideoHistoryAdd({ VideoId: this.videoPopList.ActivityId || this.videoPopList.Id, SourceType: this.videoPopList.ActivityId ? 2 : 1 });
  72. this.curVideoTime = 0;
  73. if (this.curVideoId == this.videoPopList.Id || this.activityVideoId == this.videoPopList.ActivityId) {
  74. this.curVideoTime = this.$store.state.videoPlay.palyCurrentTime;
  75. }
  76. this.videoContext.seek(this.curVideoTime);
  77. this.videoContext.play();
  78. },
  79. //视频播放结束
  80. handleVideoEnd() {
  81. // 此处因为如果不调用退出全屏方法 安卓和ios页面均会表现异常,安卓横屏不恢复竖屏,ios底部tabbar渲染异常
  82. this.curVideoTime = 0;
  83. this.$store.commit("videoPlay/palyTimeUpdate", 0);
  84. this.videoContext.exitFullScreen();
  85. },
  86. handleVideoTimeUpdate(e) {
  87. let time = parseInt(e.detail.currentTime);
  88. this.$store.commit("videoPlay/palyTimeUpdate", time);
  89. },
  90. handleShow() {
  91. this.$parent.showVideoPop = false;
  92. },
  93. },
  94. };
  95. </script>
  96. <style scoped lang="scss">
  97. .global-video-box {
  98. display: flex;
  99. height: 100%;
  100. position: fixed;
  101. width: 100%;
  102. top: 0;
  103. left: 0;
  104. z-index: 111;
  105. background-color: rgba(0, 0, 0, 0.7);
  106. .video-content {
  107. position: absolute;
  108. top: 500rpx;
  109. left: 50%;
  110. transform: translateX(-50%);
  111. width: 95%;
  112. height: 456rpx;
  113. background-color: #fff;
  114. z-index: 112;
  115. font-size: 28rpx;
  116. color: #333333;
  117. video {
  118. width: 100%;
  119. height: 340rpx;
  120. }
  121. .title {
  122. padding: 15rpx 0 0 15rpx;
  123. }
  124. }
  125. .close-icon {
  126. position: absolute;
  127. width: 95%;
  128. height: 48rpx;
  129. top: 430rpx;
  130. left: 50%;
  131. transform: translateX(-50%);
  132. z-index: 112;
  133. display: flex;
  134. justify-content: flex-end;
  135. image {
  136. height: 48rpx;
  137. width: 48rpx;
  138. }
  139. }
  140. }
  141. </style>