|
- <template>
- <div :class="inPage ? 'page active' : 'page'">
- <div id="top"></div>
- <HeadTop />
- <div class="video">
- <!-- <video ref="video" :src="videoUrl" /> -->
- <div id="J_prismPlayer" />
-
- <div class="desc">
- 视频已保存到 <span @click="go('/myPage')">我的视频作品</span>
- </div>
- <!-- <img src="../../assets/img/play.png" @click="play" /> -->
- </div>
- <div class="bottomBtn">
- <div class="back" @click="backToIndex">返回首页</div>
- <a class="next" @click="download">下载视频</a>
- </div>
- </div>
- </template>
-
- <script>
- import Vue from "vue";
- import { Toast } from "vant";
- import { mapState, mapActions } from "vuex";
- import HeadTop from "./../../components/common/head.vue";
- import { scrollToID, getDeviceType } from "../../utils";
-
- import { doGetVideoDetialById } from "../../api/downloadVideo";
-
- Vue.use(Toast);
- export default {
- components: {
- HeadTop,
- },
- data() {
- return {
- inPage: false,
- videoDetail: {},
- coverUrl: "",
- videoUrl: "",
- };
- },
- computed: {
- ...mapState({
- characters: (state) => state.publicObj.characters,
- }),
- },
-
- methods: {
- ...mapActions(["setCharacters"]),
-
- go(url) {
- this.$router.push(url);
- },
-
- play() {
- this.$refs.video.play();
- },
-
- backToIndex() {
- this.$router.push("/myPage");
- },
-
- download() {
- window.open(this.videoUrl);
- },
-
- async getVideoDetail(id) {
- try {
- const res = await doGetVideoDetialById(id);
- console.log(res, "视频详情");
- this.coverUrl = res.data.coverURL;
- this.videoUrl = res.data.videoUrl;
- this.open();
- } catch (error) {
- console.log(error, "error");
- Toast.fail(error.message);
- }
- },
-
- open() {
- // 检测设备类型
- const deviceType = getDeviceType();
- let isAndroid = false;
- if (!deviceType) {
- // 设备类型为pc
- isAndroid = false;
- } else {
- if (deviceType[0] == "Android") {
- // 设备类型为安卓
- isAndroid = true;
- } else {
- // 其他设备
- isAndroid = false;
- }
- }
-
- new Aliplayer(
- {
- id: "J_prismPlayer",
- cover: this.coverUrl,
- source: this.videoUrl,
- // 安卓设备尺寸比其他设备小一半,需适配
- width: isAndroid ? "260px" : "480px",
- height: isAndroid ? "427px" : "854px",
- // 以下可选设置
- isLive: false, // 直播
- rePlay: false, // 循环播放
- preload: true, //播放器自动加载
- autoplay: false, // 自动播放
- diagnosisButtonVisible: false, //是否显示检测按钮
- keyShortCuts: true, //是否启用快捷键
- keyFastForwardStep: 3, //快进快退的时间长度
- controlBarVisibility: "hover", // 控制条的显示方式
- },
- function (player) {
- player.play();
- }
- );
- },
- },
- created() {},
- mounted() {
- this.videoId = this.$route.query.videoId;
- if (this.videoId) {
- this.getVideoDetail(this.videoId);
- } else {
- this.videoUrl = this.$route.query.videoUrl;
- this.open();
- }
- this.inPage = true;
- scrollToID("top");
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .page {
- transform: translateX(30%);
- opacity: 0;
- transition: all 1s;
- padding-bottom: 25px;
- &.active {
- opacity: 1;
- transform: translateX(0);
- }
- .video {
- position: relative;
- padding: 30px;
- text-align: center;
- #J_prismPlayer {
- margin: auto;
- }
- .title {
- font-size: 18px;
- margin-bottom: 20px;
- }
- video {
- width: 240px;
- height: 427px;
- border: 0.5px solid #000;
- border-radius: 8px;
- }
- img {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .desc {
- position: relative;
- right: 45px;
- bottom: 8px;
- font-size: 12px;
- margin-top: 20px;
- span {
- color: #0006ff;
- }
- }
- }
- .bottomBtn {
- display: flex;
- justify-content: space-between;
- padding: 0 32.5px;
- margin-top: 20px;
- margin-bottom: 20px;
- div,
- a {
- display: block;
- width: 142px;
- height: 42px;
- color: #484848;
- line-height: 42px;
- text-align: center;
- border: 1px solid #484848;
- border-radius: 7px;
- &.back {
- color: #fff;
- border: 1px solid #d2d2d2;
- background-color: #d2d2d2;
- }
- &.next {
- color: #fff;
- border: 1px solid #0068b7;
- background-color: #0068b7;
- }
- }
- }
- }
- </style>
|