Почему видеосфера появляется локально, но не на gh-страницах?

У меня есть видеосфера, которая появляется локально, но нажимая ее на gh-страницы, видео не отображается.Почему видеосфера появляется локально, но не на gh-страницах?

Нет ошибки 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>

источник

2017-01-02 Yoni Binstock

Быстрый ответ не использовать GitHub страницы для видео хостинга.

Более длинный ответ, когда я проверяю https://ybinstock.github.io/GreatEscape360/video2.mp4, он возвращает только 133 байта, что, очевидно, неверно. Странно, так как страница к файлу в GitHub GUI это позволяет загрузить весь файл: https://github.com/ybinstock/GreatEscape360/blob/master/video2.mp4

Таким образом, мы можем увидеть, что файл успешно размещен в вашем репо, но GitHub страницы не будут служить. Единственное решение, которое я могу предложить, - это другой сторонний файловый хост.

источник

2017-01-02 01:29:34

Применяется только в том случае, если вы храните файл через Git LFS. Раньше не видел часть LFS, но да, rawgit этого не поддерживает. – ngokevin

Да, вы правы: https://github.com/rgrove/rawgit/issues/128 –

@YoniBinstock вы захотите использовать другой файловый хост для видеоконтента. Из-за того, как проблемы CORS обрабатываются на мобильных устройствах, вы можете захотеть разместить как ваш проект, так и видеоконтент на том же хосте. В качестве примера я использовал эту услугу почти 10 лет для личных проектов, всего один вариант среди многих: https://www.webfaction.com/ –

Вам нужно CDN перед страницами GitHub, если вы хотите обслуживать файлы расходных материалов. Попробуйте использовать rawgit.com

источник

2017-01-02 01:34:12 ngokevin

Я тоже пробовал это сделать, и rawgit возвратил тот же 133 байта. 'Версия https://git-lfs.github.com/spec/v1 подъязычной sha256: d7854440a48f35c2594985e45fb77d90e95ed442d8d22afe933f0b7f6b00a02f размера 79955969' Возможно, это недокументированный запрет на видеохостинге на Gh-страницах? –

Спасибо, что проверили это. Что вы предлагаете для следующих шагов? –

Почему видеосфера появляется локально, но не на gh-страницах?

ответ

Смежные вопросы