vue 流式加载mp4文件
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()
})