Proper videojs initialization

Fernando Brito
1 parent bbef3f33
Showing 12 changed files with 51 additions and 28 deletions Show diff stats
app/assets/stylesheets/components/video_player.css.scss
app/helpers/application_helper.rb
app/views/devise/sessions/new.html.haml
app/views/layouts/application.html.erb
app/views/static/home.haml
app/views/v_libras/requests/_position_step.haml
app/views/v_libras/requests/_service_step.haml
app/views/v_libras/requests/_size_step.haml
app/views/v_libras/requests/_video_step.haml
app/views/v_libras/requests/new.haml
app/views/v_libras/videos/index.haml
app/views/v_libras/videos/show.haml
@@ -15,8 +15,12 @@
 .video-vlibras {
   max-width: 50%;
+  margin: auto;
 }
-.video-js {
-  width: 100%;
+.video-js { padding-top: 56.25% }
+.vjs-fullscreen { padding-top: 0px }
+
+#vlibras-wizard {
+  .video-js { padding-top: 0px !important; }
 }
 \ No newline at end of file
@@ -46,11 +46,14 @@ module ApplicationHelper
                 :data => { 'toggle' => "tooltip" }, :title => request.response)
   end
-  def html5_video_tag(url, id, classes = nil, *args)
+  def html5_video_tag(url, id, classes, data_options, *args)
     options = args.first || {}
     options[:id] = id
     options[:class] = "video-js vjs-default-skin vjs-big-play-centered #{classes}"
+    options[:width] = 'auto'
+    options[:height] = 'auto'
+    options['data-setup'] = data_options
     content_tag(:video, options) do
       if url.class == String
@@ -70,4 +73,14 @@ module ApplicationHelper
     'video/mp4'
   end
+  def include_videojs_assets
+    content_for(:css) do
+      stylesheet_link_tag "//vjs.zencdn.net/4.6/video-js.css"
+    end
+
+    content_for(:js) do
+      javascript_include_tag "//vjs.zencdn.net/4.6/video.js"
+    end
+  end
+
 end
+= include_videojs_assets
+
 .row-fluid
   .span7
-    = html5_video_tag(['/system/videos/login.webm', '/system/videos/login.mp4'], 'login', 'video-instructions',
-      :autoplay => 'autoplay', :loop => 'loop')
+    = html5_video_tag(['/system/videos/login.webm', '/system/videos/login.mp4'],
+      'login-video', 'video-instructions', '{ "autoplay": true }')
   .span4.offset1.login
     %h2 Entrar
@@ -8,11 +8,10 @@
   <%= yield :javascript_code %>
   <%= yield :css %>
-  <%= stylesheet_link_tag    "application", :media => "all" %>
+  <%= stylesheet_link_tag  "application", :media => "all" %>
   <%= yield :css_code %>
-
   <%= csrf_meta_tags %>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -47,9 +46,8 @@
   </footer>
 </div>
-<link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
-<script src="//vjs.zencdn.net/4.6/video.js"></script>
+<%= yield :bottom %>
 </body>
 </html>
+= include_videojs_assets
+
 .breadcrumb
   %h1 Menu
 .hero-unit
   .row-fluid
     .span4
-      = html5_video_tag(['/system/videos/vlibras.webm', '/system/videos/vlibras.mp4'], 'video-vlibras', 'video-instructions',
-        :autoplay => 'autoplay', :loop => 'loop')
+      = html5_video_tag(['/system/videos/vlibras.webm', '/system/videos/vlibras.mp4'],
+            'vlibras-video', 'video-instructions', '{ "autoplay": true, "loop": true }')
       %br/
       %h2= link_to "V-LIBRAS", new_v_libras_request_path
 #position-step.wrapper
   .video_wrapper
-  = html5_video_tag(['/system/videos/workflow/localizacao.webm', '/system/videos/workflow/localizacao.mp4'], 'id-4', 'video-wizard')
+  = html5_video_tag(['/system/videos/workflow/localizacao.webm', '/system/videos/workflow/localizacao.mp4'],
+        'id-4', 'video-wizard', '{ "preload": true, "controls": false }')
 - content_for :javascript_code do
   :javascript
@@ -21,6 +22,4 @@
       var VLibrasPosition = new VLibrasLocalization();
       VLibrasPosition.init("#position-step", optionsPosition);
-
-      videojs("id-4", { "controls": false, "autoplay": false, "preload": "true", "width": 940, "height": 530 });
     });
 \ No newline at end of file
 #service-step.wrapper
   .video_wrapper
-  = html5_video_tag(['/system/videos/workflow/sub_audio.webm', '/system/videos/workflow/sub_audio.mp4'], 'id-2', 'video-wizard')
+  = html5_video_tag(['/system/videos/workflow/sub_audio.webm', '/system/videos/workflow/sub_audio.mp4'],
+      'id-2', 'video-wizard', '{ "preload": true, "controls": false }')
   .row-fluid.hide
     .span1.offset3
@@ -25,7 +26,5 @@
       var VLibrasSubAudio = new VLibrasLocalization();
       VLibrasSubAudio.init("#service-step", optionsService);
-
-      videojs("id-2", { "controls": false, "autoplay": false, "preload": "true", "width": 940, "height": 530 });
     });
 #size-step.wrapper
   .video_wrapper
-  = html5_video_tag(['/system/videos/workflow/tamanho.webm', '/system/videos/workflow/tamanho.mp4'], 'id-3', 'video-wizard')
+  = html5_video_tag(['/system/videos/workflow/tamanho.webm', '/system/videos/workflow/tamanho.mp4'],
+        'id-3', 'video-wizard', '{ "preload": true, "controls": false }')
 - content_for :javascript_code do
@@ -20,7 +21,5 @@
       var VLibrasSize = new VLibrasLocalization();
       VLibrasSize.init("#size-step", optionsSize);
-
-      videojs("id-3", { "controls": false, "autoplay": false, "preload": "true", "width": 940, "height": 530 });
     });
 #video-step.wrapper
-  = html5_video_tag(['/system/videos/workflow/sub_audio.webm', '/system/videos/workflow/sub_audio.mp4'], 'id-1', 'video-wizard')
+  = html5_video_tag(['/system/videos/workflow/sub_audio.webm', '/system/videos/workflow/sub_audio.mp4'],
+    'id-1', 'video-wizard', '{ "autoplay": true, "controls": false }')
   .row-fluid
     .span1.offset3
@@ -19,6 +20,4 @@
       var VLibrasVideo = new VLibrasLocalization();
       VLibrasVideo.init("#video-step", optionsVideo);
-
-      videojs("id-1", { "controls": false, "autoplay": true, "preload": "true", "width": 940, "height": 530 });
     })
 \ No newline at end of file
+= include_videojs_assets
+
 - content_for :js do
   = javascript_include_tag "jquery.steps.js"
   = javascript_include_tag "v_libras/requests/shared"
+= include_videojs_assets
+
 - content_for :js do
   = javascript_include_tag "v_libras/videos/index"
@@ -51,14 +53,14 @@
       %button.close{"aria-hidden" => "true", "data-dismiss" => "modal", type: "button"} ×
       %h3 Aguarde...
     .modal-body
-      = html5_video_tag(['/system/videos/aguarde.webm', '/system/videos/aguarde.mp4'], 'video-wait', 'video-instructions auto-margin')
+      = html5_video_tag(['/system/videos/aguarde.webm', '/system/videos/aguarde.mp4'], 'video-wait', 'video-instructions auto-margin',
+        '{ "preload": true, "controls": false, "autoplay": true }')
+
     .modal-footer
       %a.btn{"aria-hidden" => "true", "data-dismiss" => "modal", href: "#"} Fechar
   - content_for :javascript_code do
     :javascript
       $(function () {
-        videojs("video-wait", { "controls": false, "autoplay": true, "preload": "true", "width": "400px", "height": "300px" });
-
         $('#modal-wait').modal();
       })
 \ No newline at end of file
+= include_videojs_assets
+
 .breadcrumb
   %h3= "Vídeo #{@video.request.video_filename}"
 .row-fluid
-  .span12.text-center.well
-    = html5_video_tag(@video.url_mp4, 'video-vlibras', 'video-vlibras', :autoplay => 'autoplay', :controls => 'controls')
 \ No newline at end of file
+  .span12.well
+    .video-vlibras.text-center
+      = html5_video_tag(@video.url_mp4,
+                  'video-vlibras', '', '{ "controls": true, "autoplay": false }')
 \ No newline at end of file
		1	+= include_videojs_assets
		2	+
1	- content_for :js do	3	- content_for :js do
2	= javascript_include_tag "jquery.steps.js"	4	= javascript_include_tag "jquery.steps.js"
3	= javascript_include_tag "v_libras/requests/shared"	5	= javascript_include_tag "v_libras/requests/shared"