|
- <template>
- <div :class="inPage ? 'page active' : 'page'">
- <div id="top"></div>
- <HeadTop />
- <div class="content">
- <!-- 视频 -->
- <div class="videoBox" v-if="videoSrc">
- <div id="player-container" />
-
- <!-- 下载按钮 -->
- <!-- <a :href="videoSrc" download class="videoBox-download">
- <img src="../../assets/icon/icon-download.png" alt="" />
- </a> -->
- <!-- <a class="videoBox-download" :href="baseUrl + `/api/userVideo/exportVideo?id=${id}`">
- <img src="../../assets/icon/icon-download.png" alt="" />
- </a> -->
- <div class="videoBox-download" @click="downloadVideo">
- <img src="../../assets/icon/icon-download.png" alt="" />
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import Vue from 'vue';
- import { Toast, Dialog } from 'vant';
- import { mapState, mapActions } from 'vuex';
- import HeadTop from './../../components/common/head.vue';
- // 工具
- import { scrollToID, getDeviceType } from '../../utils';
- import { saveAs } from 'file-saver';
-
- // 接口
- import { getModelDetailById } from '../../api/getPaper';
- import { doGetVideoDetialById, exportVideoApi } from '../../api/downloadVideo';
- Vue.use(Toast);
-
- export default {
- components: {
- HeadTop
- },
- data() {
- return {
- inPage: false,
- id: null,
- isAndroid: true,
- baseUrl: null,
- // videoSrc:
- // 'https://wenlian.wenzhou.gov.cn:8001//upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4',
- videoSrc: null, //播放地址路径
- videoId: null, //视频ID
- title: null, // 视频名称
- coverUrl: null, //封面图
- height: null
- };
- },
- computed: {
- ...mapState({
- characters: state => state.publicObj.characters
- })
- },
- created() {
- this.id = this.$route.query.id;
- this.baseUrl = process.env.VUE_APP_API_ROOT;
- },
- async mounted() {
- this.inPage = true;
- scrollToID('top');
- //初始化数据
- await this.getVideoInfo();
- this.open();
- },
- destroyed() {},
- methods: {
- // 创建阿里云播放器
- open() {
- // 检测设备类型
- const deviceType = getDeviceType();
- let isAndroid = false;
- if (!deviceType) {
- // 设备类型为pc
- isAndroid = false;
- this.isAndroid = false;
- } else {
- if (deviceType[0] == 'Android') {
- // 设备类型为安卓
- isAndroid = true;
- this.isAndroid = true;
- } else {
- // 其他设备
- isAndroid = false;
- this.isAndroid = false;
- }
- }
-
- new Aliplayer(
- {
- id: 'player-container',
- cover: this.coverUrl,
- source: this.videoSrc,
- // 安卓设备尺寸比其他设备小一半,需适配
- // width: isAndroid ? '260px' : '480px',
- // height: isAndroid ? '427px' : '854px',
- width: '100%',
- height: this.height < 1920 ? '35%' : '100%',
- // 以下可选设置
- playsinline: true, // 禁止内置播放
- isLive: false, // 直播
- rePlay: false, // 循环播放
- useH5Prism: true, // 开启H5播放器
- preload: true, //播放器自动加载
- autoplay: false, // 自动播放
- diagnosisButtonVisible: false, //是否显示检测按钮
- keyShortCuts: true, //是否启用快捷键
- keyFastForwardStep: 3, //快进快退的时间长度
- controlBarVisibility: 'always' // 控制条的显示方式
- },
- function (player) {
- player.play();
- player.setCoverScale(9, 16);
- }
- );
- },
- // 下载视频
- async downloadVideo() {
- // 视频地址
- let that = this;
- const videoUrl = this.videoSrc;
- const title = this.sanitizeFilename(this.title);
- // ios
- const deviceType = getDeviceType();
- let isAndroid = false;
- if (!deviceType) {
- // 设备类型为pc
- isAndroid = false;
- } else {
- if (deviceType[0] == 'Android') {
- // 设备类型为安卓
- isAndroid = true;
- } else {
- // 其他设备
- isAndroid = false;
- }
- }
- if (!isAndroid) {
- console.log('ios');
- // let videoData = await exportVideoApi(this.id);
- const AccessToken = localStorage.getItem('AccessToken');
- that
- .$axios({
- method: 'get',
- url: process.env.VUE_APP_API_ROOT + `/api/userVideo/exportVideo?id=${that.id}`,
- headers: {
- 'content-type': 'application/octet-stream;charset=UTF-8',
- token: AccessToken,
- 'Access-Control-Allow-Origin': '*',
- 'Access-Control-Allow-Credentials': 'true'
- }
- })
- .then(async res => {
- console.log(res, 'AccessTokenAccessToken');
- await that.downloadFun(res, that.title);
- });
- // console.log(videoData);
-
- // await this.downloadFun(this.id);
- // await this.downloadFile1(this.id);
- } else {
- // 下载视频
- saveAs(videoUrl, this.title + '.mp4');
- }
- },
- // 视频名转化
- sanitizeFilename(filename) {
- return filename.replace(/[/\\:?*"<>|]/g, '').trim();
- },
- // ios下载处理
- downloadFile1(id) {
- return new Promise((resolve, reject) => {
- const xhr = new XMLHttpRequest();
- xhr.open('GET', process.env.VUE_APP_API_ROOT + `/api/userVideo/exportVideo?id=${id}`, true);
- xhr.responseType = 'arraybuffer';
- xhr.onload = () => {
- if (xhr.status === 200) {
- const contentType = xhr.getResponseHeader('Content-Type');
- const blob = new Blob([xhr.response], { type: contentType });
- const reader = new FileReader();
- reader.readAsDataURL(blob);
- reader.onloadend = function () {
- const base64Data = reader.result;
- const link = document.createElement('a');
- link.href = base64Data;
- link.download = fileName;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- };
- resolve(blob);
- } else {
- reject(new Error(`Failed to download file, status code: ${xhr.status}`));
- }
- };
-
- xhr.onerror = () => {
- reject(new Error(`Failed to download file, network error`));
- };
-
- xhr.send();
- });
- },
- // 转blob下载
- async downloadFun(blobFile, fileName) {
- let blob = await new Blob([blobFile], {
- type: 'video/mp4'
- });
- // console.log(blob);
- // if (window.navigator.msSaveOrOpenBlob) {
- // navigator.msSaveBlob(blob, fileName);
- // } else {
- const reader = await new FileReader();
- await reader.readAsDataURL(blob);
- // reader.readAsDataURL(blobFile);
- reader.onloadend = await function () {
- const base64Data = reader.result;
- const link = document.createElement('a');
- link.href = base64Data;
- link.download = fileName;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- // };
- // const dataUrl = 'data:application/octet-stream;base64,' + blobFile
- // const a = document.createElement('a')
- // a.style.display = 'none'
- // a.href = dataUrl
- // a.download = fileName
- // document.body.appendChild(a)
- // a.click()
- // window.URL.revokeObjectURL(dataUrl)
- // document.body.removeChild(a)
- // let link = document.createElement('a')
- // // link.href = blobFile
- // link.href = window.URL.createObjectURL(blob)
- // link.download = fileName
- // link.click()
- // window.URL.revokeObjectURL(link.href) //释放内存
- };
- },
- // 获取视频信息
- async getVideoInfo() {
- const { data: res } = await getModelDetailById(this.$route.query.id);
- if (res.videoId) {
- this.videoId = res.videoId;
- const { data: res2 } = await doGetVideoDetialById(res.videoId);
- this.videoSrc = res2.videoUrl;
- this.title = res2.title;
- this.coverUrl = res2.coverURL;
- this.height = res2.height;
- return;
- }
- this.videoSrc = res.videoPathUri + res.videoPath;
- this.title = res.title;
- this.coverUrl = res.coverURL;
- },
-
- // 处理时间
- formatTime(time) {
- const minutes = Math.floor(time / 60);
- const seconds = Math.round(time % 60);
- return `${minutes}:${seconds.toString().padStart(2, '0')}`;
- },
- ...mapActions(['setCharacters']),
-
- go(url) {
- this.$router.push(url);
- }
- }
- };
- </script>
-
- <style lang="scss" scoped>
- #player-container {
- width: 100%;
- height: calc(100vh - 40px);
- overflow: hidden;
- }
-
- .page {
- // width: 375px;
- // height: 100vh;
- overflow: hidden;
- }
- .content {
- width: 100%;
- height: calc(100vh - 40px);
- overflow: hidden;
- }
- .videoBox {
- display: flex;
- align-items: center;
- position: relative;
- width: 100%;
- height: calc(100vh - 40px);
- background-color: #f8f9f9;
-
- &-download {
- position: absolute;
- right: 15px;
- top: 15px;
- display: inline-block;
- width: 24px;
- height: 24px;
- z-index: 99;
- img {
- width: 100%;
- height: 100%;
- }
- }
- }
- </style>
|