hls.js 播放音视频切片鉴权问题
<template>
<div>
<audio ref="audioPlayer" controls />
<button @click="playAudio">播放音频</button>
</div>
</template>
<script setup lang="ts">
import Hls from 'hls.js';
import { ref, onMounted, onBeforeUnmount } from 'vue';
const audioPlayer = ref<HTMLAudioElement | null>(null);
const audioUrl = 'https://pep-file.oss-cn-beijing.aliyuncs.com/zjOutResource/xxx/6101/8_b1_16/8_b1_16.m3u8?auth_key=xx';
const playAudio = () => {
if (audioPlayer.value) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(audioUrl);
hls.attachMedia(audioPlayer.value);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
audioPlayer.value?.play();
});
} else {
audioPlayer.value.src = audioUrl;
audioPlayer.value.addEventListener('loadedmetadata', () => {
audioPlayer.value?.play();
});
}
}
}
onMounted(() => {
audioPlayer.value?.load();
})
onBeforeUnmount(() => {
if (audioPlayer.value) {
audioPlayer.value.src = '';
}
})
</script>
<style scoped>
</style>
问题:
音频路径audioUrl
需要鉴权才能访问,但是m3u8里面的hls.key和.ts文件如何实现自动鉴权
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:8
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-KEY:METHOD=AES-128,URI="hls.key",IV=0x6b75eb391048f9416d3a475499489390
#EXTINF:7.274833,
part_0000.ts
#EXT-X-ENDLIST
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: