如何将 mp4 视频从 Django 3 流式传输到 Vue.js

Question

我正在尝试将 mp4 视频流从 Django 加载到 Vue.js。我按照解决方案并通过我的 axios API 获得了一个字节字符串，我将其连接到 data:video/mp4;base64,，然后将其绑定到视频标签的 :src 属性，但视频不显示。这是将视频从 Django 3 流式传输到 Vue.js 的正确方法吗？我做错了什么？

Api.js 代码片段：

import axios from 'axios'

export default () => {
    return axios.create({
        baseURL: `http://127.0.0.1:8000/`,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    })
}

Video.vue 组件代码片段：

    methods: {
        async stream() {
            return await VideoService.stream(this.video)
            .then(function(data) {
                return data.data;
            });
        }
    },
    props: ['data'],
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler(curr, prev) {
                this.video = curr;
                this.stream().then(data => {
                    data = Buffer.from(data, 'binary').toString('base64');
                    this.video = 'data:video/mp4;base64,'+data;
                });
            }
        }
    }

正如该答案的评论中所建议的那样，我还将 src 设置为 Django api 端点，例如src="/video/test.mp4，但我可以在我的终端中看到它没有到达 Django 路由。如何让链接的解决方案与 Vue.js 一起使用？

我从 Kevin 的 Django 视图返回的原始字符串的图片：

我使用 Buffer 转换为 base 64 时的另一个图像：

Answer 1

如果您对视频使用相同的组件，将视频流式传输到 Vue.js 所需的最终解决方案是使用 v-html 设置 src 标签，以便您可以设置 src动态。创建组件后，直接执行 src="http://localhost:8000/v/video.mp4" 将不起作用。所以除了Kevin的代码，在video组件中做如下：

<template>
    <div>
        <video v-html="src" autoplay="" controls="" loop="" muted="" frameborder="0">
            Your browser does not support HTML videos.
        </video>
    </div>
</template>

<script>
export default {
    data() {
        return {
            src: ''
        }
    },
    props: ['data'],
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler(curr, prev) {
                this.src = '<source src="http://localhost:8000/v/"'+curr+' type="video/mp4">'
            }
        }
    }
}
</script>

<style scoped>
</style>

如何将 mp4 视频从 Django 3 流式传输到 Vue.js

How to stream mp4 videos from Django 3 to Vue.js

django

video-streaming

html5-video

vue.js

axios