Download as
Browse Code »

Commit 890e9322f10cf6165c5ee876f6349596035456c7

Authored by Fernando Brito
1 parent bbef3f33
Exists in master and in 2 other branches v2, wikilibras

Proper videojs initialization

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