index.vue 3.5 KB

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