Failed to load an XMLHttpRequest video in HTML

Question

I want to play a small 10 minutes video in my video player. I have to use XMLHttpRequest to download the video file and then play it on my video player. I'm using Xampp and using my PC's ip address to load the video file. But I'm getting an error and I don't know how to fix it. My code and the error is below. Please Help Me.

My HTML5 Code:

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <video video-player width="640" height="360" controls></video>
    <script>
        var video_player = document.querySelectorAll('[video-player]')[0];
        var url = "http://[my-ip-address]/video_player/media/ba/video/2d/60fps/2160p/video.mp4";
        
        request_xhr (url, function (buffer)
        {
            video_player.src = buffer;
        });

        function request_xhr (url, cb)
        {
            var xhr = new XMLHttpRequest;
            xhr.open('get', url, true);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function ()
            {
                cb(xhr.response);
            };
            xhr.send();
        }
    </script>
</body>
</html>

The error I'm getting:

*"I have to use XMLHttpRequest to download the video file"* Why do you **have** to do that? Can't you set directly the src of your video to the url? Also, once your cross-origin will be fixed, you'll find out that you can't set an ArrayBuffer as the `src` of a VideoElement, (you'd be better downloading it as a Blob and then set the src to `URL.createObjectURL(xhr.response)` if you really **must** use xhr. — Kaiido, Jun 29 '18 at 08:17
I know that the video will play from direct connection with src but I want to use the XMLHttpRequest() for my project. So please help me in how to avoid this error. — aman, Jun 29 '18 at 09:19

score 1 · Accepted Answer · answered Jun 29 '18 at 08:14

1

It's the problem with the cross domain access that does not allow your XHR request to download the video. But why don't you put the video url directly in the 'src' attribute of the video tag, e.g. https://www.w3schools.com/jsref/prop_video_src.asp

answered Jun 29 '18 at 08:14

Juky

247
1
9

I know that the video will play from direct connection with `src` but I want to use the `XMLHttpRequest()` for my project. So please help me in how to avoid this error. – aman Jun 29 '18 at 09:19
You need to configure your web server to allow cross origin domain. What kind of web server do you use to serve your video? For example, in Apache, you can follow the instruction here: https://enable-cors.org/server_apache.html – Juky Jun 29 '18 at 09:23
Im using xampp. – aman Jun 29 '18 at 11:10

Failed to load an XMLHttpRequest video in HTML

1 Answers1