Three.js 黑视频 CORS 问题？

Question

我有一个长期存在的问题，即有时在移动设备上有时会在 Three.js 纹理中出现黑屏视频，有时在桌面上出现声音。

我一直在试图解决这个问题，这是我目前所拥有的:

if(!video || video == null){
    video = document.createElement( 'video' );
    source = document.createElement('source');

    video.crossOrigin = "anonymous";
    video.preload = 'auto';
    video.setAttribute('webkit-playsinline', 'true');
    source.setAttribute('type',"video/mp4");
}


if(isIOS() || isIE11())
  source.setAttribute('src',"http://" + document.domain + "/cdn/" + sceneObject.video);
    else
 source.setAttribute('src',cdnPrefix + "/" + sceneObject.video);

video.appendChild(source);
video.load();



(function () {

    THREE.noVideoTextureSupport = isIE11();


    THREE.VideoTexture = (function () {
        var _videoTexture = THREE.VideoTexture;
        var _ieVideoTexture = function ( video, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
            if (THREE.noVideoTextureSupport) {
                var scope = this;

                scope.video = video;
                scope.ctx2d = document.createElement('canvas').getContext('2d');
                var canvas = scope.ctx2d.canvas;
                canvas.width = 2048;
                canvas.height = 1024;

                scope.ctx2d.drawImage(scope.video, 0, 0, canvas.width, canvas.height);
                THREE.Texture.call( scope, scope.ctx2d.canvas, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );

                scope.generateMipmaps = false;

                function update() {
                    requestAnimationFrame( update );
                    if ( video.readyState >= video.HAVE_CURRENT_DATA ) {
                        scope.ctx2d.drawImage(scope.video, 0, 0, canvas.width, canvas.height);
                        scope.needsUpdate = true;
                    }
                }

                update();
            }
        };
        return (THREE.noVideoTextureSupport ? _ieVideoTexture : _videoTexture);
    })();

    THREE.VideoTexture.prototype = Object.create( THREE.Texture.prototype );
    THREE.VideoTexture.prototype.constructor = THREE.VideoTexture;

})();



if(!isMobile)
    panoVideoPlay();
else if(!firstPlay)
    panoVideoPlay();
else{

    $('body').append('<div id="play-button" class="playButton"><i class="fa fa-play"></i></div>');
    $('#preloaderItems').remove();


    window.addEventListener('touchstart', function videoStart() {
        panoVideoPlay();
        $("body").scrollTop(1);
        $('#preloader').remove();
        if(firstPlay){
            $("#play-button").remove();
            firstPlay = false;
            showLoader();
        }

        this.removeEventListener('touchstart', videoStart);
    });
  }


 }

 function panoVideoPlay(){
   makeVideoPlayableInline(video);
   video.play();
  checkPlayBack();
 }



var checkPlayBack = function(event){
   console.log("panoVideo.checkPlayBack()");
   var panoPlayBackInterval = setInterval(function(){

     if (video.currentTime > 0 || video.readyState > 0){
       clearInterval(panoPlayBackInterval);
         hideLoader();
         showVideo(video);
     }
  },10);
 }

  function showVideo(video){
console.log("panoVideo.showVideo()");
geometry = new THREE.SphereGeometry( 500, 60, 40 );

texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

material   = new THREE.MeshBasicMaterial( { map : texture } );

panoVideoMesh = new THREE.Mesh( geometry, material );
panoVideoMesh.scale.x = -1;
panoVideoMesh.rotation.y = Math.PI / 2;


loadScene();
scene.remove(box);
scene.add(panoVideoMesh);
addLights();
}

视频是用 FFMPEG 编码的

out.mp4 -vcodec libx264 -profile:v baseline -preset slow -pix_fmt yuv420p -b:v 5000k -maxrate 5000k -bufsize 2200k -s 1920:1080 -threads 0 -b:a 128k -movflags faststart out2K.mp4

如您所见，我在 IE 和 iOS 上遇到过无数问题，所以我在 Three.js 论坛上找到的 IE 上做了一个令人讨厌的 hack，对于 iOS 和 IE，我通过代理文件CDN 的服务器解决了我面临的无数安全问题。

Chrome 通常没问题(但我有报告称在三星 S5 上的 Android 上的 Chrome 上黑屏并有声音)，但是在我这里的 Android Note 3 上，我在 Android Stock 浏览器中遇到了同样的问题.

通常当它出错时，每次渲染都会出现一个无法识别的脚本错误。在没有 Chrome:inspect 的情况下很难在 iOS 和 Android Stock 浏览器上进行调试!

在 Android 库存浏览器上，如果我使用 CDN，我会看到黑色视频、声音和许多错误 - 如果我使用代理文件，我会出现黑屏并且没有任何加载。

我使用 Amazon EC2 作为服务器，使用 CloudFront 进行分发，我遇到了跨域问题，因此不得不求助于 Apache 代理通过 EC2 服务器提供文件。

我已尽我所能使 Cross Domain 正常工作，

S3 具有以下 CORS 配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://*</AllowedOrigin>
        <AllowedOrigin>http://*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

CloudFront 具有使用 Origin、Access Control Headers & Method 等设置的转发 header 行为。

我已经在服务器 .htaccess 上设置了 Mod_Headers

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://cdn.example.com"
</IfModule> 

当我从主机 curl 文件时，它似乎没问题

即

curl -I -H "Origin: http://example.com" http://cdn.example.com/videofile.mp4

HTTP/1.1 200 OK
Content-Type: video/mp4
Content-Length: 38150681
Connection: keep-alive
Date: Wed, 21 Sep 2016 20:55:25 GMT
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, HEAD
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Last-Modified: Fri, 08 Jul 2016 02:45:32 GMT
ETag: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
x-amz-meta-md5-hash: XXXXXXXXXXXXXXXXXXXXXXXXXX
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
Age: 1094
X-Cache: Hit from cloudfront
Via: 1.1 XXXXXXXXXXXXXXXXXXXXXX.cloudfront.net (CloudFront)
X-Amz-Cf-Id: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

但是当我尝试另一种方式时

curl -I -H "Origin: http://cdn.example.com/videoFile.mp4" http://example.com/file/from/java/server

我明白了

HTTP/1.1 405 Request method 'HEAD' not supported
Date: Wed, 21 Sep 2016 21:15:05 GMT
Server: Jetty(8.0.4.v20111024)
Access-Control-Allow-Origin: http://cdn.example.com
Access-Control-Allow-Credentials: true
Allow: GET
Content-Type: text/html;charset=ISO-8859-1
Cache-Control: must-revalidate,no-cache,no-store
Content-Length: 1431
Vary: User-Agent,Accept-Encoding
Connection: close

我不确定Request method 'HEAD' not supported 是否会成为一个问题。

我在这上面花了很多时间，我似乎有所进展，但现在还不知道接下来要尝试什么。

如果有人能帮助我，我将不胜感激!

Answer 1

将 crossorigin="anonymous" 添加到 video 元素对我有用。

例如:

<video src="https://video.url" loop muted playsinline crossorigin="anonymous" />