I am trying to embed a video on a page but the video is not playing

I setup a vue component where I make a get request to fetch the video url once the component is created

<template>
    <div class="off-canvas-wrapper">
            <div>
                <video-player :options="videoOptions"/>
            </div>
        </div>
    </div>
</template>

<script>
import VideoPlayer from '../components/VideoPlayer.vue';

    export default {
        name: "Classroom",

        components: {
            VideoPlayer
        },

        props: ['course', 'sections'],

        data () {
            return {
                videoOptions: {
                    autoplay: true,
                    controls: true,
                    sources: [
                        {
                            src: "",
                             type: "video/mp4"
                        }
                    ]
                }
            }
        },

        created () {
             axios.get(`/api/${this.course.id}/lessonvideourl`)
                        .then(response => this.videoOptions.sources[0].src = response.data);  
        }
    }
</script>
<style scoped>
    
</style>

The Video is stored on

 Storage-> App-> Public -> videos-> 1.mp4

Here is the controller that fetches and return the video url

public function nextVideo(Course $course)
    {
        $url = asset('storage/videos/1.mp4');
        return $url;
    }

When I check the src on the console this is what gets return as the video url

http://success.test/storage/videos/1.mp4

and the plugin I am using to display the video (videojs) prints an error on the console

app.js:41910 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. MediaError {code: 4, message: "No compatible source was found for this media."}

Please what am I not doing right? Help me out