Rendering di uno sfondo utilizzando bigvideo.js in un'applicazione Rails

Question

Ho la seguente implementazione di bigvideo.js perfettamente funzionante al di fuori del mio progetto 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> 

Tuttavia, quando provo a tradurre questo per Rails, non sarà il rendering o l'immagine o il video.
- Ho tutti i file javascript in risorse/javascript. Sembra che stiano tirando correttamente.
- Application.js non è stato modificato e include // = require_tree.
- Per il JS personalizzato (quello in cui è visualizzato il codice js sopra) attualmente lo ho come file JS in assets/javascripts. Ho provato a inserire i file immagine/video rilevanti nella cartella, modificare i percorsi degli indirizzi Web per i file e denominarli .html.erb e utilizzare i frammenti di rubino, tutti senza successo.

Come posso eseguire la mia implementazione? Puoi vederlo funzionare al di fuori di Rails here.

Answer 1

sono stato in grado di ottenere BigVideo per lavorare con le rotaie. Non sono sicuro che questa sia la soluzione più ideale, ma se inserisci l'URL completo del video (tramite qualcosa come <%= request.protocol + request.host_with_port + asset_path('main-video.mp4') %>) verrà caricato nella pagina.

Quindi il codice ho finito per usare alla fine è stato:

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

Ho creato un app di esempio che si può dare un'occhiata a. Si trova qui (nota: ho cercato di rimanere po fedele al tuo esempio onepager, ma non è esattamente la stessa cosa):

http://bigvideo.herokuapp.com/

Si può anche vedere il codice che ho usato per creare qui:

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

ho anche fatto un po 'di cose divertenti, come ha messo il video in una directory (attivo/video), e ha aggiunto i percorsi precompilate a application.rb pure.

Penso che l'idea sia in generale, dovresti usare BigVideo con un CDN e non servirlo dall'app rails stesso - simile al motivo per cui è suggerito nei binari di scaricare il caricamento di file su cose come S3, ecc.

Answer 2

se js che lavorano correttamente i file sarebbero visualizzati correttamente in caso di metterli in app/assets/images directory e li includono nella js come qui di seguito

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

Answer 3

Un altro modo:

Aggiungere questi (richiesto) righe di codice al file application.html.erb:

<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> 

e quindi il codice Scott incluso sopra

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

... e poi alla fine decidiamo di farlo in un modo migliore, perché questo farà funzionare le cose come minimo.