Renderowanie tła przy użyciu bigvideo.js w aplikacji Railsowej

Question

Mam następującą implementację bigvideo.js działającą doskonale poza moim projektem Rails.

<script src="modernizr.js"></script> 
<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui-1.8.22.custom.min.js"></script> 
<script src="jquery.imagesloaded.min.js"></script> 
<script src="http://vjs.zencdn.net/3.0/video.js"></script> 
<!-- BigVideo --> 
<script src="bigvideo.js"></script> 

<script> 
var BV = new $.BigVideo(); 
BV.init(); 
if (Modernizr.touch) { 
BV.show('yay.jpg'); 
} else { 
BV.show('test.mp4',{ambient:true}); 
} 
</script> 

Jednak, gdy próbuję tłumaczyć to na Railsy, ​​to nie wyrenderuje ani obrazu, ani wideo.
- Mam wszystkie pliki javascript w zasobach/javascripts. Wydają się ciągnąć poprawnie.
- Aplikacja Application.js jest nietknięta i zawiera element // = require_tree.
- Dla niestandardowego JS (ten, w którym kod js jest wyświetlany powyżej) aktualnie mam go jako plik JS w zasobach/javascripts. Próbowałem umieścić odpowiednie pliki obrazu/wideo w folderze, zmieniając ścieżki do adresów internetowych plików i nazując je .html.erb i używając fragmentów ruby, bez powodzenia.

Jak mogę sprawić, aby moja implementacja działała? Możesz zobaczyć, że działa poza Railsami here.

Answer 1

udało mi się dostać BigVideo do pracy z szynami. Nie jestem pewien, czy jest to najbardziej idealna poprawka, ale jeśli podasz pełny adres URL filmu (przez coś takiego jak <%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>), zostanie on załadowany na stronę.

Więc kod I skończyło się w końcu było:

<script> 
    $(function() { 
     var BV = new $.BigVideo(); 
    BV.init(); 
    BV.show("<%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>",{ambient:true}); 
    }); 
</script> 

Wcześniej skonfigurować przykładową aplikację, że można spojrzeć na. Znajduje się tutaj (uwaga: Starałem się pozostać nieco wiernego do onepager przykład, ale nie jest to dokładnie to samo):

http://bigvideo.herokuapp.com/

Można również zobaczyć kod użyłem go utworzyć tutaj:

https://github.com/scouttyg/bigvideo-example

zrobiłem też trochę zabawy rzeczy jak umieścić film w swoim katalogu (aktywa/filmy), i dodaje skompilowane ścieżki do application.rb również.

Myślę, że pomysł jest generalnie, powinieneś używać BigVideo z CDN i nie podawać go z samej aplikacji railsowej - podobnie jak to sugeruje w szynach, aby odciążyć przesyłanie plików do rzeczy takich jak S3, itp.

Answer 2

jeśli js działa prawidłowo plików uczyniłoby odpowiednio w przypadku, gdy umieścić je w katalogu app/assets/images i włączyć je do js jak poniżej

BV.show('assets/yay.jpg'); 
    } else { 
BV.show('assets/test.mp4',{ambient:true}); 

Answer 3

Innym sposobem:

Dodaj te (wymagane) linijek kodu do application.html.erb pliku:

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.11.3/video.js"> </script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/BigVideo.js/1.1.5/lib/bigvideo.js"></script> 

a następnie kod Scott zawarte powyżej

<script> 
$(function() { 
var BV = new $.BigVideo(); 
BV.init(); 
BV.show("<%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>",{ambient:true}); 
}); 
</script> 

... a następnie ostatecznie zdecyduje się to zrobić lepiej, ponieważ to sprawi, że wszystko będzie działać co najmniej.