124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="w-full h-full bg-#000 z-50 top-0 left-0" :class="noPage ? 'absolute' : 'fixed '">
|
|||
|
|
<!-- <PressDrag @click="toBreak"
|
|||
|
|
class="pos-absolute bg-#00000033 cursor-pointer w-30px h-30px flex-center z-99999 p-10px top-20px right-20px rounded-50%">
|
|||
|
|
<CloseCircleOutlined class="text-30px color-#ffffff" />
|
|||
|
|
</PressDrag> -->
|
|||
|
|
<div class="w-full h-full z-1" id="playerView"></div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { CloseCircleOutlined } from '@ant-design/icons-vue';
|
|||
|
|
import PressDrag from '@/components/PressDrag.vue';
|
|||
|
|
import { useRoute, useRouter } from 'vue-router';
|
|||
|
|
import { getTemItem, TemObj } from './temObjs';
|
|||
|
|
// @ts-ignore
|
|||
|
|
const player = ref<typeof Aliplayer>(null); //播放器
|
|||
|
|
const route = useRoute();
|
|||
|
|
const props = defineProps<{
|
|||
|
|
url: string;
|
|||
|
|
cover?: string;
|
|||
|
|
noPage?: boolean;
|
|||
|
|
}>();
|
|||
|
|
const _temObj = ref<TemObj>({
|
|||
|
|
id: '',
|
|||
|
|
name: '',
|
|||
|
|
isEdit: false,
|
|||
|
|
url: '',
|
|||
|
|
});
|
|||
|
|
onMounted(() => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
if (!props.noPage) {
|
|||
|
|
|
|||
|
|
const temObj = getTemItem(route.query._t as string);
|
|||
|
|
if (!temObj) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
_temObj.value = temObj;
|
|||
|
|
createPlayer(_temObj.value.url, '/long/long.svg');
|
|||
|
|
} else if (!!props.url) {
|
|||
|
|
createPlayer(props.url, props.cover || '/long/long.svg');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
watch(() => props.url, (newVal) => {
|
|||
|
|
if (!!newVal) {
|
|||
|
|
createPlayer(newVal, props.cover || '/long/long.svg');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const createPlayer = (source?: string, cover?: string) => {
|
|||
|
|
// 更多使用方法请参考接入文档：https://help.aliyun.com/zh/vod/developer-reference/integration
|
|||
|
|
|
|||
|
|
// @ts-ignore
|
|||
|
|
player.value = new Aliplayer(
|
|||
|
|
{
|
|||
|
|
id: 'playerView',
|
|||
|
|
width: '100%',
|
|||
|
|
height: '100%',
|
|||
|
|
source: source, // 如果是私有加密播放请传入 vid/playauth/encryptType
|
|||
|
|
cover: cover,
|
|||
|
|
skinLayout: [
|
|||
|
|
{ name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
|
|||
|
|
{
|
|||
|
|
name: 'H5Loading',
|
|||
|
|
align: 'cc',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'controlBar',
|
|||
|
|
align: 'blabs',
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
children: [
|
|||
|
|
{ name: 'progress', align: 'tlabs', x: 0, y: 0 },
|
|||
|
|
{ name: 'playButton', align: 'tl', x: 15, y: 10 },
|
|||
|
|
{ name: 'timeDisplay', align: 'tl', x: 10, y: 2 },
|
|||
|
|
{ name: 'fullScreenButton', align: 'tr', x: 20, y: 12 },
|
|||
|
|
{ name: 'setting', align: 'tr', x: 20, y: 11 },
|
|||
|
|
{ name: 'volume', align: 'tr', x: 20, y: 10 },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
// @ts-ignore
|
|||
|
|
(player: typeof Aliplayer) => {
|
|||
|
|
//播放下一个视频
|
|||
|
|
player.on('ended', () => {
|
|||
|
|
// update(videoList[index + 1]);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
console.log('player', player.value);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function toBreak() {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
//点击右侧列表视频切换
|
|||
|
|
// const update = (video: PlayInfo) => {
|
|||
|
|
// // playObj.value = video;
|
|||
|
|
// player.value.dispose(); //销毁
|
|||
|
|
// createPlayer(video.Source, video.CoverURL); //创建
|
|||
|
|
// };
|
|||
|
|
function dispose() {
|
|||
|
|
if (player.value) {
|
|||
|
|
player.value.dispose(); //销毁
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
try {
|
|||
|
|
dispose();
|
|||
|
|
} catch (error) { }
|
|||
|
|
});
|
|||
|
|
// // 存储当前播放时间
|
|||
|
|
// const saveTime = function (memoryVideo: string, currentTime: string) {
|
|||
|
|
// localStorage.setItem(memoryVideo, currentTime);
|
|||
|
|
// };
|
|||
|
|
// // 获取此视频上次播放时间
|
|||
|
|
// const getTime = function (memoryVideo: string): string | null {
|
|||
|
|
// return localStorage.getItem(memoryVideo);
|
|||
|
|
// };
|
|||
|
|
</script>
|
|||
|
|
<style scoped></style>
|