Question

我正在使用Xampp服务器访问我的视频文件，然后在我的网站上播放。我正在使用XMLHttpRequest获取视频文件，然后将其作为视频播放器的源。但是我遇到了错误。我试图通过插入Header set Access-Control-Allow-Origin "*"来解决问题，但仍然无法解决问题。我已经给出了代码和下面的错误。请帮助我。

我也不想对显示视频的其他方法有任何建议。我希望使用XMLHttpRequest。

我的示例代码：

<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];

        // I ORIGINALLY USE MY http://localhost:8080/.... FOR THE 'var url' BUT FOR STACKOVERFLOW I'M USING THE LINK BELOW AS AN EXAMPLE 
        var url = "http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4";
        
        request_xhr (url, function (buffer)
        {
            video_player.src = buffer;
        });

        function request_xhr (url, cb)
        {
            var xhr = new XMLHttpRequest;
            xhr.withCredentials = true;
            xhr.open('get', url, true);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function ()
            {
                cb(xhr.response);
            };
            xhr.send();
        }
    </script>
</body>
</html>

我的.htaccess在目录C:\xampp\htdocs\中：

Header set Access-Control-Allow-Origin "*"

我的错误：

Answer 1

首先，如果您使用的是withCredentials，则通配符*不能用作Access-Control-Allow-Origin的值。您必须设置网站的主机地址，而不是*。第二个原因是Origin为空，这意味着Jaramonda的评论中提到的实际服务器无法提供网页。

Answer 2

在视频元素跨域中使用属性并将其值设置为匿名：

document.getElementById("videoPlayer").setAttribute("crossorigin", "anonymous");

Answer 3

尝试通过php启用它

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="amount" name="amount" type="text" maxlength="20" />

Answer 4

像这样从arraybuffer创建blob网址

window.URL = window.URL || window.webkitURL request_xhr（url，function（buffer）{ video_player.src = window.URL.createObjectURL（new Blob（[new Uint8Array（buffer）]））; }）;

Xampp访问控制允许起源错误

4 个答案: