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

Question

I\'m trying to load a mp4 video stream from Django to Vue.js. I followed the solution here and got a byte string via my axios API which I concatenated to data:video/mp

Answer 1

The final solution needed to stream videos to Vue.js if you're using the same component for videos is to set the src tag using v-html so that you can set src dynamically. Directly doing src="http://localhost:8000/v/video.mp4" won't work once the component is created. So in addition to Kevin's code, just do the following in the video component:

<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>