video组件 传入assetURL视频地址即可,组件内配置了代理,注意配置/video-api 代理
javascript
<template>
<video @ended="emits(ended)" autoplay muted ref="video">
<source type="video/mp4" />
Your browser does not support the video tag.
</video>
</template>
<script lang="ts" name="Video" setup>
import { onMounted, ref } from 'vue'
const video = ref()
const emits = defineEmits(['ended'])
const props = defineProps<{
assetURL: string
}>()
const rangeVideo = () => {
const totalSize = 112702286
const chunkSize = 1000000
const numChunks = Math.ceil(totalSize / chunkSize)
let index = 0
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
let mediaSource = new MediaSource()
video.value.src = URL.createObjectURL(mediaSource)
mediaSource.addEventListener('sourceopen', sourceOpen)
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec)
}
function sourceOpen(e) {
let mediaSource = e.target
let sourceBuffer = mediaSource.addSourceBuffer(mimeCodec)
const send = async () => {
if (index >= numChunks) {
sourceBuffer.addEventListener('updateend', function (_) {
mediaSource.endOfStream()
})
} else {
const start = index * chunkSize
const end = Math.min(start + chunkSize - 1, totalSize - 1)
fetch('/video-api/' + props.assetURL, {
headers: {
Range: `bytes=${start}-${end}`,
responseType: 'arraybuffer'
}
}).then(async (response) => {
const res = await response.arrayBuffer()
index++
sourceBuffer.appendBuffer(res)
send()
// video.value.play()
})
}
}
send()
}
}
const getRef = () => {
return video
}
defineExpose({ getRef })
onMounted(() => {
rangeVideo()
})
</script>