邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

211 linhas
4.6 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <HeadTop />
  5. <div class="video">
  6. <!-- <video ref="video" :src="videoUrl" /> -->
  7. <div id="J_prismPlayer" />
  8. <div class="desc">
  9. 视频已保存到 <span @click="go('/myPage')">我的视频作品</span>
  10. </div>
  11. <!-- <img src="../../assets/img/play.png" @click="play" /> -->
  12. </div>
  13. <div class="bottomBtn">
  14. <div class="back" @click="backToIndex">返回首页</div>
  15. <a class="next" @click="download">下载视频</a>
  16. </div>
  17. </div>
  18. </template>
  19. <script>
  20. import Vue from "vue";
  21. import { Toast } from "vant";
  22. import { mapState, mapActions } from "vuex";
  23. import HeadTop from "./../../components/common/head.vue";
  24. import { scrollToID, getDeviceType } from "../../utils";
  25. import { doGetVideoDetialById } from "../../api/downloadVideo";
  26. Vue.use(Toast);
  27. export default {
  28. components: {
  29. HeadTop,
  30. },
  31. data() {
  32. return {
  33. inPage: false,
  34. videoDetail: {},
  35. coverUrl: "",
  36. videoUrl: "",
  37. };
  38. },
  39. computed: {
  40. ...mapState({
  41. characters: (state) => state.publicObj.characters,
  42. }),
  43. },
  44. methods: {
  45. ...mapActions(["setCharacters"]),
  46. go(url) {
  47. this.$router.push(url);
  48. },
  49. play() {
  50. this.$refs.video.play();
  51. },
  52. backToIndex() {
  53. this.$router.push("/myPage");
  54. },
  55. download() {
  56. window.open(this.videoUrl);
  57. },
  58. async getVideoDetail(id) {
  59. try {
  60. const res = await doGetVideoDetialById(id);
  61. console.log(res, "视频详情");
  62. this.coverUrl = res.data.coverURL;
  63. this.videoUrl = res.data.videoUrl;
  64. this.open();
  65. } catch (error) {
  66. console.log(error, "error");
  67. Toast.fail(error.message);
  68. }
  69. },
  70. open() {
  71. // 检测设备类型
  72. const deviceType = getDeviceType();
  73. let isAndroid = false;
  74. if (!deviceType) {
  75. // 设备类型为pc
  76. isAndroid = false;
  77. } else {
  78. if (deviceType[0] == "Android") {
  79. // 设备类型为安卓
  80. isAndroid = true;
  81. } else {
  82. // 其他设备
  83. isAndroid = false;
  84. }
  85. }
  86. new Aliplayer(
  87. {
  88. id: "J_prismPlayer",
  89. cover: this.coverUrl,
  90. source: this.videoUrl,
  91. // 安卓设备尺寸比其他设备小一半,需适配
  92. width: isAndroid ? "260px" : "480px",
  93. height: isAndroid ? "427px" : "854px",
  94. // 以下可选设置
  95. isLive: false, // 直播
  96. rePlay: false, // 循环播放
  97. preload: true, //播放器自动加载
  98. autoplay: false, // 自动播放
  99. diagnosisButtonVisible: false, //是否显示检测按钮
  100. keyShortCuts: true, //是否启用快捷键
  101. keyFastForwardStep: 3, //快进快退的时间长度
  102. controlBarVisibility: "hover", // 控制条的显示方式
  103. },
  104. function (player) {
  105. player.play();
  106. }
  107. );
  108. },
  109. },
  110. created() {},
  111. mounted() {
  112. this.videoId = this.$route.query.videoId;
  113. if (this.videoId) {
  114. this.getVideoDetail(this.videoId);
  115. } else {
  116. this.videoUrl = this.$route.query.videoUrl;
  117. this.open();
  118. }
  119. this.inPage = true;
  120. scrollToID("top");
  121. },
  122. };
  123. </script>
  124. <style lang="scss" scoped>
  125. .page {
  126. transform: translateX(30%);
  127. opacity: 0;
  128. transition: all 1s;
  129. padding-bottom: 25px;
  130. &.active {
  131. opacity: 1;
  132. transform: translateX(0);
  133. }
  134. .video {
  135. position: relative;
  136. padding: 30px;
  137. text-align: center;
  138. #J_prismPlayer {
  139. margin: auto;
  140. }
  141. .title {
  142. font-size: 18px;
  143. margin-bottom: 20px;
  144. }
  145. video {
  146. width: 240px;
  147. height: 427px;
  148. border: 0.5px solid #000;
  149. border-radius: 8px;
  150. }
  151. img {
  152. position: absolute;
  153. top: 50%;
  154. left: 50%;
  155. transform: translate(-50%, -50%);
  156. }
  157. .desc {
  158. position: relative;
  159. right: 45px;
  160. bottom: 8px;
  161. font-size: 12px;
  162. margin-top: 20px;
  163. span {
  164. color: #0006ff;
  165. }
  166. }
  167. }
  168. .bottomBtn {
  169. display: flex;
  170. justify-content: space-between;
  171. padding: 0 32.5px;
  172. margin-top: 20px;
  173. margin-bottom: 20px;
  174. div,
  175. a {
  176. display: block;
  177. width: 142px;
  178. height: 42px;
  179. color: #484848;
  180. line-height: 42px;
  181. text-align: center;
  182. border: 1px solid #484848;
  183. border-radius: 7px;
  184. &.back {
  185. color: #fff;
  186. border: 1px solid #d2d2d2;
  187. background-color: #d2d2d2;
  188. }
  189. &.next {
  190. color: #fff;
  191. border: 1px solid #0068b7;
  192. background-color: #0068b7;
  193. }
  194. }
  195. }
  196. }
  197. </style>