Question

我有一个本地显示的视频层，但推送到gh-pages，视频无法显示。

没有404错误，文件不存在，我使用git LFS作为mp4视频（它是一个360视频，非常大）。

https://github.com/ybinstock/GreatEscape360

<html>

<head>
  <title>Great Escape</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no,minimal-ui">

  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>


<a-scene>
  <a-assets>
    <video id="greatescapevideo" autoplay loop="true" src="video2.mp4"> </video>
    <img id="logo" src="logo.png">
    <img id="slide1" src="slide1.png" >
    <img id="slide2" src="slide2.png" >
    <img id="slide3" src="slide3.png" >
    <img id="slide4" src="slide4.png" >
    <img id="slide5" src="slide5.png" >
  </a-assets>

  <a-camera wasd-controls="enabled: false"> </a-camera>

  <a-videosphere src="#greatescapevideo"></a-videosphere>

  <a-image id="logo" class="logo" src="#logo" position="0 2 -2" rotation="0 0 0"></a-image>
  <a-image id="logo" class="logo" src="#logo" position="1 2 2"  rotation="0 180 0"></a-image>
  <a-image id="logo" class="logo" src="#logo" position="-2 2 0" rotation="0 90 0"></a-image>
  <a-image id="logo" class="logo" src="#logo" position="2 2 0" rotation="0 -90 0"></a-image>

  <a-image id="slide1" class="slide1" src="#slide1" position="0 2 -2" rotation="0 0 0" ></a-image>
  <a-image id="slide1" class="slide1" src="#slide1" position="1 2 2"  rotation="0 180 0" ></a-image>
  <a-image id="slide1" class="slide1" src="#slide1" position="-2 2 0" rotation="0 90 0"></a-image>
  <a-image id="slide1" class="slide1" src="#slide1" position="2 2 0" rotation="0 -90 0"></a-image>

  <a-image id="slide2" class="slide2" src="#slide2" position="0 2 -2" rotation="0 0 0" ></a-image>
  <a-image id="slide2" class="slide2" src="#slide2" position="1 2 2"  rotation="0 180 0" ></a-image>
  <a-image id="slide2" class="slide2" src="#slide2" position="-2 2 0" rotation="0 90 0"></a-image>
  <a-image id="slide2" class="slide2" src="#slide2" position="2 2 0" rotation="0 -90 0" ></a-image>

  <a-image id="slide3" class="slide3" src="#slide3" position="0 2 -2" rotation="0 0 0" visible="false"></a-image>
  <a-image id="slide3" class="slide3" src="#slide3"position="1 2 2"  rotation="0 180 0" visible="false"></a-image>
  <a-image id="slide3" class="slide3" src="#slide3" position="-2 2 0" rotation="0 90 0" visible="false"></a-image>
  <a-image id="slide3" class="slide3" src="#slide3"position="2 2 0" rotation="0 -90 0" visible="false"></a-image>

  <a-image id="slide4" class="slide4" src="#slide4" position="0 2 -2" rotation="0 0 0" visible="false"></a-image>
  <a-image id="slide4" class="slide4" src="#slide4" position="1 2 2"  rotation="0 180 0" visible="false"></a-image>
  <a-image id="slide4" class="slide4" src="#slide4" position="-2 2 0" rotation="0 90 0" visible="false"></a-image>
  <a-image id="slide4" class="slide4" src="#slide4" position="2 2 0" rotation="0 -90 0" visible="false"></a-image>

  <a-image id="slide5" class="slide5" src="#slide5" position="0 2 -2" rotation="0 0 0" visible="false"></a-image>
  <a-image id="slide5" class="slide5" src="#slide5" position="1 2 2"  rotation="0 180 0" visible="false"></a-image>
  <a-image id="slide5" class="slide5" src="#slide5" position="-2 2 0" rotation="0 90 0" visible="false"></a-image>
  <a-image id="slide5" class="slide5" src="#slide5" position="2 2 0" rotation="0 -90 0" visible="false"></a-image>

</a-scene>


</body>
<script src="app.js"></script>

</html>

Answer 1

快速回答是不要使用github页面进行视频托管。

答案越长，当我检查https://ybinstock.github.io/GreatEscape360/video2.mp4时，它只返回133个字节，这显然是不正确的。这很奇怪，因为github GUI中的文件页面允许您下载整个文件： https://github.com/ybinstock/GreatEscape360/blob/master/video2.mp4

因此我们可以看到文件已成功放入您的仓库，但github页面无法提供。我建议的唯一解决方案是另一个第三方文件主机。

Answer 2

如果要提供耗材媒体文件，则需要在GitHub页面前放置CDN。尝试使用rawgit.com

为什么videosphere会在本地显示，但不会出现在gh-pages上？

2 个答案: