huzhenjie commented 6 years ago

Problem

Your sample has a problem in Chrome. It case exception like this:

Failed to load http://any.com/my_svga_file.svga: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
svga.min.js:1 TypeError: Cannot read property 'length' of null
    at i.push (svga.min.js:1)
    at Object.n (svga.min.js:1)
    at Object.load_viaProto (svga.min.js:1)
    at XMLHttpRequest.o.onloadend (svga.min.js:1)
load_viaProto @ svga.min.js:1
o.onloadend @ svga.min.js:1
XMLHttpRequest.send (async)
loadAssets @ svga.min.js:1
e.exports @ svga.min.js:1
value @ svga.min.js:1
value @ svga.min.js:1
(anonymous) @ 20180425.svga.html:18
svga.min.js:1 Uncaught TypeError: Cannot read property 'length' of null
    at i.push (svga.min.js:1)
    at Object.n (svga.min.js:1)
    at Object.load_viaProto (svga.min.js:1)
    at XMLHttpRequest.o.onloadend (svga.min.js:1)

Here is my origin html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <meta name="robots" content="all" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
    <meta name="format-detection" content="telephone=no" />
</head>
<body>

<div id="demoCanvas"></div>

<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.1.0/build/svga.min.js"></script>
<script type="text/javascript">
  var player = new SVGA.Player('#demoCanvas');
  var parser = new SVGA.Parser('#demoCanvas');
  parser.load('http://any.com/my_svga_file.svga', function(videoItem) {
      player.setVideoItem(videoItem);
      player.startAnimation();
  })
</script>
</body>
</html>

I just thought that it was my mistake. Actually it works perfectly in Safari

PonyCui commented 6 years ago

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS Local Debug use Local HTTP Server, please.

huzhenjie commented 6 years ago

CROS Problem

@PonyCui , you are right. If I put the html file and svga file into the same HTTP server. It works.

But, I found that if the svga file in the other host. It case...

1 Failed to load http://biuugames.huya.com/a9265981485f1130c7e7fd2f2be1252a.svga: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://admin.yaoguo.game.yy.com' is therefore not allowed access.

After reading the source code.

src/mockWorker.js

            const req = new XMLHttpRequest()
            req.open("GET", url, true);
            req.responseType = "arraybuffer"
            req.onloadend = () => {
                actions.load_viaProto(req.response, cb, failure);
            }
            req.send()

Why not use the protocol such as jsoup to load it.

PonyCui commented 6 years ago

How could you send ArrayBuffer as JSONP?

svga / SVGAPlayer-Web

Compatibility problems in Chrome #30

Problem

CROS Problem