From 890e9322f10cf6165c5ee876f6349596035456c7 Mon Sep 17 00:00:00 2001 From: Fernando Brito Date: Thu, 5 Jun 2014 10:56:43 -0300 Subject: [PATCH] Proper videojs initialization --- app/assets/stylesheets/components/video_player.css.scss | 8 ++++++-- app/helpers/application_helper.rb | 15 ++++++++++++++- app/views/devise/sessions/new.html.haml | 6 ++++-- app/views/layouts/application.html.erb | 6 ++---- app/views/static/home.haml | 6 ++++-- app/views/v_libras/requests/_position_step.haml | 5 ++--- app/views/v_libras/requests/_service_step.haml | 5 ++--- app/views/v_libras/requests/_size_step.haml | 5 ++--- app/views/v_libras/requests/_video_step.haml | 5 ++--- app/views/v_libras/requests/new.haml | 2 ++ app/views/v_libras/videos/index.haml | 8 +++++--- app/views/v_libras/videos/show.haml | 8 ++++++-- 12 files changed, 51 insertions(+), 28 deletions(-) diff --git a/app/assets/stylesheets/components/video_player.css.scss b/app/assets/stylesheets/components/video_player.css.scss index 2105e9d..73aac10 100644 --- a/app/assets/stylesheets/components/video_player.css.scss +++ b/app/assets/stylesheets/components/video_player.css.scss @@ -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 diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index a014eec..c5d48ee 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -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 diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml index 951a71e..c2bf9d4 100644 --- a/app/views/devise/sessions/new.html.haml +++ b/app/views/devise/sessions/new.html.haml @@ -1,7 +1,9 @@ += 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 diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b423164..9826fda 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -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 %> @@ -47,9 +46,8 @@ - - +<%= yield :bottom %> diff --git a/app/views/static/home.haml b/app/views/static/home.haml index 23bd8c3..068a84f 100644 --- a/app/views/static/home.haml +++ b/app/views/static/home.haml @@ -1,11 +1,13 @@ += 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 diff --git a/app/views/v_libras/requests/_position_step.haml b/app/views/v_libras/requests/_position_step.haml index fa38964..486d57d 100644 --- a/app/views/v_libras/requests/_position_step.haml +++ b/app/views/v_libras/requests/_position_step.haml @@ -1,7 +1,8 @@ #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 diff --git a/app/views/v_libras/requests/_service_step.haml b/app/views/v_libras/requests/_service_step.haml index 2d9b43d..e607342 100644 --- a/app/views/v_libras/requests/_service_step.haml +++ b/app/views/v_libras/requests/_service_step.haml @@ -1,7 +1,8 @@ #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 }); }); diff --git a/app/views/v_libras/requests/_size_step.haml b/app/views/v_libras/requests/_size_step.haml index cc598b3..9161904 100644 --- a/app/views/v_libras/requests/_size_step.haml +++ b/app/views/v_libras/requests/_size_step.haml @@ -1,7 +1,8 @@ #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 }); }); diff --git a/app/views/v_libras/requests/_video_step.haml b/app/views/v_libras/requests/_video_step.haml index 7f9ec7c..4cc5c95 100644 --- a/app/views/v_libras/requests/_video_step.haml +++ b/app/views/v_libras/requests/_video_step.haml @@ -1,5 +1,6 @@ #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 diff --git a/app/views/v_libras/requests/new.haml b/app/views/v_libras/requests/new.haml index 243ed31..1edacdf 100644 --- a/app/views/v_libras/requests/new.haml +++ b/app/views/v_libras/requests/new.haml @@ -1,3 +1,5 @@ += include_videojs_assets + - content_for :js do = javascript_include_tag "jquery.steps.js" = javascript_include_tag "v_libras/requests/shared" diff --git a/app/views/v_libras/videos/index.haml b/app/views/v_libras/videos/index.haml index 11d6b2f..4e63dd8 100644 --- a/app/views/v_libras/videos/index.haml +++ b/app/views/v_libras/videos/index.haml @@ -1,3 +1,5 @@ += 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 diff --git a/app/views/v_libras/videos/show.haml b/app/views/v_libras/videos/show.haml index 4bb3e56..32ea209 100644 --- a/app/views/v_libras/videos/show.haml +++ b/app/views/v_libras/videos/show.haml @@ -1,6 +1,10 @@ += 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 -- libgit2 0.21.2