rocketwheel-command 1.1.1 → 1.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/rocketwheel/command/manifest.rb +6 -2
- data/lib/rocketwheel/command/version.rb +1 -1
- data/templates/project/2.1/Rocketfile.yml.tt +6 -1
- data/templates/project/2.1/source/com-project-deploy-guide.md +208 -0
- data/templates/project/2.1/source/index-480.html.tt.ignore +1 -1
- data/templates/project/2.1/source/index-720.html.tt.ignore +1 -1
- metadata +3 -2
|
@@ -26,8 +26,12 @@ module Rocketwheel
|
|
|
26
26
|
@playlist = self.fetch('playlist', [])
|
|
27
27
|
end
|
|
28
28
|
|
|
29
|
-
def
|
|
30
|
-
@
|
|
29
|
+
def player_options_480
|
|
30
|
+
@player_options_480 ||= self.fetch('player-480', Hash.new)
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
def player_options_720
|
|
34
|
+
@player_options_720 ||= self.fetch('player-720', Hash.new)
|
|
31
35
|
end
|
|
32
36
|
|
|
33
37
|
def meta
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
# Deployment Guide
|
|
2
|
+
The Luminosity Player has been configured and placed into the **cyb-ux-final-480.html** and **cyb-ux-final-720.html**
|
|
3
|
+
files that sit at the root of your deployment package. It is ready for you to
|
|
4
|
+
deploy to your server.
|
|
5
|
+
|
|
6
|
+
Below is an outline of the deployment code present in the cyb-ux-ux-final-480.html file.
|
|
7
|
+
Please note that in order for the player to function the folder structure must
|
|
8
|
+
remain intact. If you do move files out of this structure you will need to alter file paths. **Some basic HTML skills will be required to complete the deployment.**
|
|
9
|
+
|
|
10
|
+
## Meta Tags
|
|
11
|
+
The og(open graph) meta tags are used by the 'Share This' widget. Use these tags to define the information that 'Share This' shares. For more documentation see: http://support.sharethis.com/customer/portal/articles/475079-share-properties-and-sharing-custom-information#Open_Graph_Tags
|
|
12
|
+
|
|
13
|
+
You will need to add an absolute URL for og:image tag. This should point to the poster thumb image that lives in the images folder on your server.
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
<meta property="og:title" content="Cybertap Recon" />
|
|
17
|
+
<meta property="og:type" content="Sharing Widgets" />
|
|
18
|
+
<meta property="og:url" content="http://www.cybertapllc.com/" />
|
|
19
|
+
<meta property="og:image" content="images/cyb-ux-preview.png" />
|
|
20
|
+
<meta property="og:description" content="Cybertab Recon Overview Video" />
|
|
21
|
+
<meta property="og:site_name" content="cybertapllc.com" />
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The viewport meta tag is used by mobile devices to size the video page.
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
<meta name="viewport" content="width=880" />
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## CSS Includes
|
|
32
|
+
The following CSS stylesheet provides styling for the player.
|
|
33
|
+
```
|
|
34
|
+
<link rel="stylesheet" href="demoplayer/stylesheets/player.css" type="text/css" media="screen">
|
|
35
|
+
```
|
|
36
|
+
## JavaScript Includes
|
|
37
|
+
The following script should be included.
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
<script src="demoplayer/javascripts/player.js" type="text/javascript"></script>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
## Google Analytics & Player Initialization
|
|
47
|
+
The main inline JavaScript section that appears in the <head> section of the webpage includes Google Analytics Setup, Tracking Vars, Playlists, Player Options and Event Tracking. The only item you may need to change is the Google Analytics Account ID. Everything else should stay as is.
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
### Google Analytics
|
|
51
|
+
The first section of JavaScript code is standard Google Analytics embed code.
|
|
52
|
+
|
|
53
|
+
We've already added your Googel Analytics Account ID... you're good to go!
|
|
54
|
+
|
|
55
|
+
You can add your Google Analytics Account ID to this code by replacing the 'UA-xxxxxxx-x' string with your account ID. If you do not use Google Analytics, leave it as is.
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
//google analytics
|
|
59
|
+
var _gaq = _gaq || [];
|
|
60
|
+
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
|
|
61
|
+
_gaq.push(['_trackPageview']);
|
|
62
|
+
(function() {
|
|
63
|
+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
64
|
+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
65
|
+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
66
|
+
})();
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Tracking Vars
|
|
70
|
+
Next are a set of tracking varibles, no need to do anything here, we've set these up already.
|
|
71
|
+
```
|
|
72
|
+
//tracking vars
|
|
73
|
+
var track_category = "Cybertab - Recon Overview";
|
|
74
|
+
var percentage_played = 0;
|
|
75
|
+
var secs_played = 0;
|
|
76
|
+
var track_play = true;
|
|
77
|
+
var title = null;
|
|
78
|
+
var this_duration = 0;
|
|
79
|
+
var video_completed = true;
|
|
80
|
+
var ctaLink = null;
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Player Setup
|
|
84
|
+
The demo player and its playlist is then initiated by the following lines of JavaScript. In this section you initiate the player, build out the playlist(s) by defining the duration of the movie, location of the poster thumb, title, description and video file.
|
|
85
|
+
|
|
86
|
+
Additionally you can set the video to autostart by changing its value to 'true'.
|
|
87
|
+
|
|
88
|
+
Again please note if you move the location of assets such as images and video files out of the folder structure provided, you will need to update the playlist file paths that link to these assets.
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
$(function() {
|
|
92
|
+
Player.setup({
|
|
93
|
+
playlist: [
|
|
94
|
+
{
|
|
95
|
+
"image": "images/cyb-ux-preview.png",
|
|
96
|
+
"title": "Cybertap Recon",
|
|
97
|
+
"description": "Description",
|
|
98
|
+
"duration": 190,
|
|
99
|
+
"levels": [
|
|
100
|
+
{
|
|
101
|
+
"file": "videos/cyb-ux-final.mp4"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
],
|
|
106
|
+
jwplayer_options: {
|
|
107
|
+
autostart: false,
|
|
108
|
+
width: 854,
|
|
109
|
+
height: 480
|
|
110
|
+
}
|
|
111
|
+
})
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Events and Tracking
|
|
115
|
+
The following code triggers Google Analytics Event Tracking.
|
|
116
|
+
```
|
|
117
|
+
//Events and Tracking
|
|
118
|
+
Player.addHandler('onPlay', function() {
|
|
119
|
+
if(track_play) {
|
|
120
|
+
title = Player.Controller.playlist[Player.Controller.current.index].title;
|
|
121
|
+
this_duration = Player.Controller.playlist[Player.Controller.current.index].duration;
|
|
122
|
+
track_play = false;
|
|
123
|
+
video_completed = false;
|
|
124
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Started', title]);
|
|
125
|
+
};
|
|
126
|
+
});
|
|
127
|
+
Player.addHandler('onComplete', function(e) {
|
|
128
|
+
video_completed = true;
|
|
129
|
+
track_play = true;
|
|
130
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Completed', title]);
|
|
131
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Seconds Played', title, this_duration]);
|
|
132
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Percentage Played', title, 100]);
|
|
133
|
+
});
|
|
134
|
+
Player.addHandler('onPlaylistItem', function(e) {
|
|
135
|
+
if(!video_completed) {
|
|
136
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Seconds Played', title, secs_played]);
|
|
137
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Percentage Played', title, percentage_played]);
|
|
138
|
+
}
|
|
139
|
+
track_play = true;
|
|
140
|
+
});
|
|
141
|
+
Player.addHandler('onTime', function(e) {
|
|
142
|
+
secs_played = Math.round(e.position);
|
|
143
|
+
percentage_played = Math.round((secs_played / this_duration) * 100);
|
|
144
|
+
});
|
|
145
|
+
$('.track-link').live("click", function(event){
|
|
146
|
+
event.preventDefault();
|
|
147
|
+
_gaq.push(['_trackEvent', track_category, $(this).data('track-action') , Player.Controller.playlist[Player.Controller.current.index].title]);
|
|
148
|
+
ctaLink = $(this).attr('href');
|
|
149
|
+
setTimeout(function() {
|
|
150
|
+
top.location.href = ctaLink;
|
|
151
|
+
}, 1500);
|
|
152
|
+
});
|
|
153
|
+
window.onbeforeunload = function(e) {
|
|
154
|
+
if(!video_completed) {
|
|
155
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Percentage Played', title, percentage_played]);
|
|
156
|
+
_gaq.push(['_trackEvent', track_category, 'Video: Seconds Played', title, secs_played]);
|
|
157
|
+
}
|
|
158
|
+
};
|
|
159
|
+
//end of Events and Tracking
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
## Player HTML Markup
|
|
165
|
+
The following markup is placed into the body of the web page. When the player
|
|
166
|
+
initiates, it will be loaded into this markup. Share This button html hooks are defined inside the player branding div. Call To Action links are defined inside the annotation tags. To change the URL destinations, simply change the anchor href properties.
|
|
167
|
+
|
|
168
|
+
```
|
|
169
|
+
<div id="demoplayer-position">
|
|
170
|
+
<script type="text/x-handlebars">
|
|
171
|
+
{{#view Player.View styles="inline"}}
|
|
172
|
+
{{view Player.PlayerView}}
|
|
173
|
+
<div id="demoplayer-branding">
|
|
174
|
+
<img src="images/cyb-logo.png" />
|
|
175
|
+
<div class="share">
|
|
176
|
+
<span class='st_linkedin_large' ></span>
|
|
177
|
+
<span class='st_twitter_large' ></span>
|
|
178
|
+
<span class='st_facebook_large' ></span>
|
|
179
|
+
<span class='st_email_large' ></span>
|
|
180
|
+
<span class='st_sharethis_large' ></span>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
{{/view}}
|
|
184
|
+
</script>
|
|
185
|
+
<script type="text/x-handlebars" data-template-name="annotations">
|
|
186
|
+
{{#annotation cta-1 video="1" start="189" image="images/cyb-ux-cta-480.png"}}
|
|
187
|
+
<div class="demoplayer-action-playfirst">
|
|
188
|
+
<a href="#" id="replay"><img src="demoplayer/images/replay.png" /></a>
|
|
189
|
+
</div>
|
|
190
|
+
{{/annotation}}
|
|
191
|
+
</script>
|
|
192
|
+
</div>
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
## Share This JavaScript Includes
|
|
197
|
+
Lastly the following code sets up the share this button functionality. If you have a ShareThis account, you can replace the generic publisher ID in the code with your publisher ID.
|
|
198
|
+
```
|
|
199
|
+
<script type="text/javascript">var switchTo5x=true;</script>
|
|
200
|
+
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
|
|
201
|
+
<script type="text/javascript">
|
|
202
|
+
stLight.options({
|
|
203
|
+
// replace this generic publisher ID with your own. If you do not have an account, leave as is.
|
|
204
|
+
publisher:'b9f8cca1-6dd1-42d9-b354-0ae0088e96cc',
|
|
205
|
+
onhover:false
|
|
206
|
+
});
|
|
207
|
+
</script>
|
|
208
|
+
```
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
$(function() {
|
|
36
36
|
Player.setup({
|
|
37
37
|
playlist: <%= JSON.pretty_generate(playlist) %>,
|
|
38
|
-
jwplayer_options: <%= JSON.pretty_generate(
|
|
38
|
+
jwplayer_options: <%= JSON.pretty_generate(player_options_480) %>
|
|
39
39
|
})
|
|
40
40
|
//Events and Tracking
|
|
41
41
|
Player.addHandler('onPlay', function() {
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
$(function() {
|
|
36
36
|
Player.setup({
|
|
37
37
|
playlist: <%= JSON.pretty_generate(playlist) %>,
|
|
38
|
-
jwplayer_options: <%= JSON.pretty_generate(
|
|
38
|
+
jwplayer_options: <%= JSON.pretty_generate(player_options_720) %>
|
|
39
39
|
})
|
|
40
40
|
//Events and Tracking
|
|
41
41
|
Player.addHandler('onPlay', function() {
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: rocketwheel-command
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.1.
|
|
4
|
+
version: 1.1.2
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2013-07-
|
|
12
|
+
date: 2013-07-25 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: thor
|
|
@@ -169,6 +169,7 @@ files:
|
|
|
169
169
|
- rocketwheel-command.gemspec
|
|
170
170
|
- templates/project/2.1/Rocketfile.yml.tt
|
|
171
171
|
- templates/project/2.1/source/.DS_Store
|
|
172
|
+
- templates/project/2.1/source/com-project-deploy-guide.md
|
|
172
173
|
- templates/project/2.1/source/images/.DS_Store
|
|
173
174
|
- templates/project/2.1/source/images/.empty_directory
|
|
174
175
|
- templates/project/2.1/source/images/com-logo.png
|