94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import Artplayer from "artplayer";
|
|
import Hls from "hls.js";
|
|
|
|
interface Props {
|
|
urls: any;
|
|
id: string;
|
|
nextEpisodeButton: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
});
|
|
|
|
const emit = defineEmits(['get-instance'])
|
|
|
|
const options = computed(() => {
|
|
const controls = []
|
|
if (props.nextEpisodeButton) {
|
|
controls.push(
|
|
{
|
|
name: 'next-episode',
|
|
index: 50,
|
|
position: 'left',
|
|
html: '<button>Test</button>',
|
|
tooltip: 'Next episode',
|
|
style: {
|
|
color: 'red',
|
|
},
|
|
click: function () {
|
|
},
|
|
},
|
|
)
|
|
}
|
|
return {
|
|
url: props.urls[0].url || '',
|
|
type: 'm3u8',
|
|
customType: {
|
|
m3u8: playM3u8,
|
|
},
|
|
quality: props.urls,
|
|
autoSize: true,
|
|
autoMini: true,
|
|
playbackRate: true,
|
|
fullscreen: true,
|
|
aspectRatio: true,
|
|
setting: true,
|
|
lock: true,
|
|
autoOrientation: true,
|
|
autoPlayback: true,
|
|
id: props.id,
|
|
controls: controls,
|
|
}
|
|
})
|
|
const artplayerRef = ref();
|
|
const instance = ref();
|
|
|
|
function playM3u8(video: HTMLMediaElement, url: string, art: Artplayer) {
|
|
if (Hls.isSupported()) {
|
|
if (art.hls) art.hls.destroy();
|
|
const hls = new Hls();
|
|
hls.loadSource(url);
|
|
hls.attachMedia(video);
|
|
art.hls = hls;
|
|
art.on('destroy', () => hls.destroy());
|
|
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
video.src = url;
|
|
} else {
|
|
art.notice.show = 'Unsupported playback format: m3u8';
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
instance.value = new Artplayer({
|
|
container: artplayerRef.value,
|
|
...options.value,
|
|
})
|
|
nextTick(() => {
|
|
emit('get-instance')
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (instance.value && instance.value.destroy) {
|
|
instance.value.destroy(false)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-center">
|
|
<div class="w-2/3 aspect-video" ref="artplayerRef"></div>
|
|
</div>
|
|
</template>
|