Add video_snapshot feature.

app/controllers/ad_banners_controller.rb

@@ -101,6 +101,7 @@ class AdBannersController < ApplicationController
           klass = (i == 0 ? "active" : "")
           video_url = ad_b.video_file.url rescue nil
           video_webm_url = ad_b.video_file_webm.url rescue nil
+          @file_poster = ad_b.video_snapshot.url rescue nil
           title = (ad_b.title.blank? ? File.basename(video_file) : ad_b.title)
           image_html = "<div class=\"w-ad-banner__slide w-ba-banner__slide #{klass} jplayer_slide\"
                              data-link=\"#{ad_b.out_link || "#"}'\"
@@ -111,7 +112,7 @@ class AdBannersController < ApplicationController
                              style=\"height: 100%;\"
                              data-autoplay=\"#{@autoplay_video}\"
                              >
-                          #{ render_to_string(partial: "admin/ad_images/jplayer",locals:{i: (subpart.id.to_s+i.to_s),file_name: title,file_url: video_url,file_webm_url: video_webm_url,:@autoplay_video=>(@autoplay_video == "1" && i == 0),:@apply_autoplay_script=>true,:@hide_video_tools=>@hide_video_tools,:@is_frontend=>true}, layout: false).to_str }
+                          #{ render_to_string(partial: "admin/ad_images/jplayer",locals:{i: (subpart.id.to_s+i.to_s),file_name: title,file_url: video_url,file_webm_url: video_webm_url,:@autoplay_video=>(@autoplay_video == "1" && i == 0),:@apply_autoplay_script=>true,:@hide_video_tools=>@hide_video_tools,:@is_frontend=>true,:@file_poster=>@file_poster}, layout: false).to_str }
                         </div>"
           has_jplayer = true
         elsif ad_b.exchange_item == "2"

app/models/ad_image.rb

@@ -5,6 +5,7 @@ class AdImage
   include Mongoid::Timestamps
 
   mount_uploader :file, BannerImageUploader
+  mount_uploader :video_snapshot, BannerImageUploader
   mount_uploader :video_file, BannerUploader
   mount_uploader :video_file_webm, BannerUploader
 

app/views/admin/ad_banners/show.html.erb

@@ -56,7 +56,10 @@
       <% elsif image.exchange_item == "2" %>
         <iframe height="140" src="<%= image.embed_url %>"></iframe>
       <% elsif image.exchange_item == "3" %>
-        <video width="320" height="240" controls>
+        <%
+         video_snapshot_url = ""
+         video_snapshot_url = image.video_snapshot.url if image.video_snapshot.file %>
+        <video width="320" height="240" controls poster="<%=video_snapshot_url%>">
           <source src="<%= image.video_file.url %>" type="video/mp4">
         Your browser does not support the video tag.
         </video>

app/views/admin/ad_images/_form.html.erb

@@ -53,7 +53,7 @@
                 <% if @ad_image.file.file %>
                   <%= image_tag @ad_image.file.url %>
                 <% else %>
-                  <img src="http://www.placehold.it/200x80/EFEFEF/AAAAAA&text=<%= @ad_banner.width %>x<%= @ad_banner.height %>" />
+                  <img src="/annc_url?url=http://www.placehold.it/200x80/EFEFEF/AAAAAA&text=<%= @ad_banner.width %>x<%= @ad_banner.height %>" />
                 <% end %>
               </div>
               <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
@@ -107,6 +107,33 @@
             </div>
           </div>
         </div>
+        <div class="control-group">
+          <label class="control-label muted"><%= t("ad_banner.video_snapshot") %></label>
+          <div class="controls">
+            <div><%= t("ad_banner.best_size") %>: <%= @ad_banner.width %>px X <%= @ad_banner.height %>px</div>
+            <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @ad_image.video_snapshot.file %>" data-provides="fileupload">
+              <div class="fileupload-new thumbnail pull-left">
+                <% if @ad_image.video_snapshot.file %>
+                  <%= image_tag @ad_image.video_snapshot.url %>
+                <% else %>
+                  <img src="/annc_url?url=http://www.placehold.it/200x80/EFEFEF/AAAAAA&text=<%= @ad_banner.width %>x<%= @ad_banner.height %>" />
+                <% end %>
+              </div>
+              <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
+              <span class="btn btn-file">
+                <span class="fileupload-new"><%= t(:select_image) %></span>
+                <span class="fileupload-exists"><%= t(:change) %></span>
+                <%= f.file_field :video_snapshot, accept: "image/*" %>
+              </span>
+              <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
+              <div class="controls" data-toggle="buttons-checkbox">
+                <label class="checkbox inline btn btn-danger fileupload-remove">
+                  <%= f.check_box :remove_file %><%= t(:remove) %>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="control-group">
           <label for="first_name" class="control-label muted" function="field_label">
             <%= t("ad_banner.auto_convert_video")%>

app/views/admin/ad_images/_jplayer.html.erb

@@ -346,7 +346,9 @@
   <% if file_webm_url %>
   jPlayer_<%= i %>_data['webmv'] = "<%= file_webm_url %>";
   <% end %>
-  //jPlayer_<%= i %>_data['poster'] = "<%= file_url %>";
+  <% if @file_poster %>
+  jPlayer_<%= i %>_data['poster'] = "<%= @file_poster %>";
+  <% end %>
   //jPlayer_<%= i %>_data["autoPlay"] = <%= @autoplay_video == true %>;
   jPlayer_<%= i %>["ready"] = function () {
     $(this).jPlayer("setMedia", jPlayer_<%= i %>_data);

config/locales/en.yml

@@ -1,6 +1,7 @@
 en:
 
   ad_banner:
+    video_snapshot: "Video Snapshot"
     auto_convert_video: Auto Convert Video to webm(reduce usage for network traffic)
     autoplay_video: "Autoplay Video(play mute)"
     hide_video_tools: Hide video tools

config/locales/zh_tw.yml

@@ -1,6 +1,7 @@
 zh_tw:
 
   ad_banner:
+    video_snapshot: "影片縮圖"
     auto_convert_video: 自動轉換成webm格式(節省播放流量)
     autoplay_video: "自動播放影片(會自動靜音)"
     hide_video_tools: 隱藏影片工具

config/routes.rb

@@ -1,7 +1,15 @@
 Rails.application.routes.draw do
-
+require 'fileutils'
 get 'ad_banners/widget'
-
+Thread.new do
+  ad_images = AdImage.where(:video_file.ne=>nil,:video_snapshot=>nil).to_a
+  ad_images.each do |ad_image|
+    ad_image[:video_snapshot] = File.basename(ad_image.video_file.file.path).split(/\.[^.]+$/)[0] + ".jpg"
+    FileUtils.mkdir_p(File.dirname(ad_image.video_snapshot.file.path))
+    system("tmp/ffmpeg/ffmpeg -i #{ad_image.video_file.file.path} -vframes 1 #{ad_image.video_snapshot.file.path}")
+    ad_image.save
+  end
+end
 locales = Site.find_by(site_active: true).in_use_locales rescue I18n.available_locales
   
   scope "(:locale)", locale: Regexp.new(locales.join("|")) do