JazzHeaven Header

Template Mobile 1-Part Lesson or Interview EVS OK

Template Mobile 1-Part Lesson or Interview EVS OK w Playlist IMAGE (for MOBILE devices)

This WILL BE the TEMPLATE PAGE for MOBILE 1-Part Lessons or INTERVIEW pages

What is on this page:
* For Android & iPad: 720×416 EVS Video Player for 1-part Lesson
* For iPhone: 592×336 EVS Video Player [the SAME VIDEO AGAIN!] * OPTIONAL EXTRAS Section at the bottom (MP3/PDF Extras & VIDEO Extras, if any)

understand what you are after & check out some final pages like this from our already released projects!

You can simply use the login info FW gave you to see our all already released ONLINE VIDEOS!
Log in and look at some of the product pages: regular ones, MOBILE ones, INTV ones…
In this case: the MOBILE pages are what you are after in below instructions!)

NOTE: to use this template page as INTERVIEW page:
Simply leave out the parts about
1) Playlist
2) Extras at the bottom


[FYI: EVS (Easy Video Suite) is the video player we use for MOBILE videos!
http://jazzheaven.evsuite.com is the login! Login info: see GD with Project Setup Instructions.]

* Set up Video(s) in EVS (720×416 AND 592×336 versions):

NOTE: FW already applied some “winning settings” upfront; so SOME of the required settings
may ALREADY be selected – in which case you just verify that… (And FIX, if not; and ADD the missing ones…)

* Log into EVS: http://jazzheaven.evsuite.com
* go to the FILES tab & hit the RELOAD button at the BOTTOM RIGHT
* find your video (720×416 version first…; later 720×416 EXTRA(S), if any; later 592×336 version(s))
It should be fairly at the top… (Make sure you have the UNCATEGORIZED folder selected at the TOP LEFT!)
If needed: use find function (apple + f)
NOTE: EVS drawback: with LONG file names: you may not be able to differentiate similar file names (e.g. between 720 & 592 version), since it displays too little of the file name. IF NEEDED: guess which one it is (click on SETTINGS link that shows when you hover over a file name; the following screen WILL show the FULL file name… if correct one: continue… if NOT: go back…)

* once found, hover over right file name & click SETTINGS
* leave the DEFAULT PROFILE selected and click SELECT
IMPORTANT: UNLESS there is ANOTHER PROFILE showing that is named clearly indicating you should use THAT OTHER PROFILE instead!
A profile is: a way of using the SAME UNDERLYING video with different settings.
E.G.: if I wanted to use our home page trailer on our home page with AUTO-PLAY and a certain size.
BUT THEN use the same video, but with NO-AUTOPLAY and (more different settings, if I wanted to) on ANOTHER web page:
creating a NEW PROFILE would allow me to do that…
NAMING THE PROFILE very clearly is key, obviously…
(Since if I later went into this video: I would HAVE to be 100% clear which one is used on the page that I like to change the video on now…)
SPECIFIC USE: if you run into the issue that you can NOT save the correct VIDEO DIMENSIONS with the DEFAULT PROFILE: SOLUTION: create a NEW profile & it WILL work… (more on choosing Video Dimensions below!)

* now you will see 6 TABS below the video player; you really only use/change tabs 1, 2 & 6
* in the VIDEO tab (already selected):
– Stuff in ITALIC below: ONLY IF VIDEO DIMENSIONS are NOT correct already:
– manually enter your WIDTH & HEIGHT (720×416 or 592×336)
– confirm that this is now displaying the CORRECT video dimensions!

– leave everything else on this tab at NO. (Note: later, you'll come back here to upload your SPLASH IMAGE!)
* click on NEXT (you could have also manually chosen/clicked on next tab above… – side note: it WILL save the settings you selected now)
* in the PLAYER tab:
– confirm the right player is selected (it should be already); it's the 10th player from the left; with the blue bar. (To be specific: scrolling from the left: it's the FIRST player with anything BLUE in it!)
(Same as the one on home page at http://JazzHeaven.com)
– For “Choose when to display the control bar” select ON MOUSEOVER
* click on NEXT, and confirm that FRAME tab has NONE selected
* click on NEXT, and confirm that BAR tab has NO selected
* click on NEXT, and confirm that SHADOW tab has the first one selected (which is NO shadow)
* click on NEXT, and answer this question “Do you want to add interactive Events onto the Timeline of your video?”
by clicking on YES, LET'S GO!
* on the following screen, all you do is CONFIRM that there is NOTHING (as in: no “event”) on the Video Timeline you see at the top
If there IS: delete it! (We don't use this feature for PREMIUM videos; only for TEASERS…)
* click on EMBED CODE at the bottom right! (This page will actually give you a working “preview video player” with all your current settings)
* now, one more DOUBLE-CHECK: click on EDIT SETTINGS below the video player, and confirm that the VIDEO DIMENSIONS were saved correctly! (720×416 or 592×336)
If they are correct; click on GET YOUR EMBED CODE at the top right!
If it were NOT correct: adjust it again! (See above in italic!)

* Take Screenshot for SPLASH IMAGE(S):
Still in EVS: in the PREVIEW of the EVS video you just created, take a SCREENSHOT (apple+shift+4) of EXACT video player (720×416).
WATCH: you need an image WITHOUT the play button = you need to create that screenshot WHILE the video plays!!
Choose a moment where the artist looks NOT stupid. ;)
AND: consider that there later will be a PLAY BUTTON in the CENTER of the shot = do NOT choose a moment where the artist's FACE is right in the center!!
Take a few screenshots right after another (3 to 4) – then pick the winner(s)!
NAME only the winning screenshot! (Delete the others)
Name winner something like: “kw-4s-mobile-lesson-splash-720×416”.
Park it in a NEW FOLDER on your desktop called something like “kw 4s mobile TEMP splash stuff”

* NOW REPEAT the above TWO paragraphs
[1) prep EVS video and 2) take screenshot (in EVS Preview Video Player) for splash image] for any OTHER 720×416 premium video(s) of the project! (Incl. EXTRAS Video(s)!)

* Now, REPEAT setting up EVS (see FIRST section above: “Set up Video(s) in EVS (720×416 AND 592×336 versions)“) for each 592×336 video of the project! (But NO need for now taking 592×336 screenshots!!)
IMPORTANT: for the 592×336 videos, you do NOT need to take screenshots in EVS for the splash images!! => In the next step below (in Photoshop), you will simply also create 592×336 JPG versions (from the same image as for the 720×416 JPGs!).

* In PHOTOSHOP, convert the winning 720×416 screenshots to JPGs (720×416 *AND* 592×336):
Note upfront: you should now have screenshots for EACH MP4 file on your WP page on your local desktop…
[DON'T HAVE PHOTOSHOP? Try a free online tool like http://pixlr.com/
* open PHOTOSHOP & open the first winning 720×416 screenshot.
* select the CROP tool (top left; below the paint brush; ) & enter WIDTH: “720 px” (and later 592) and HEIGHT: “416 px” (and later 336)
* select the image with the crop tool (put your mouse over it & cover the whole image).
(You may have to slightly adjust the selected area now! Can adjust with UP/DOWN/RIGHT/LEFT ARROWS on your keyboard! -> Make sure the EDGES are clean!)
* Go to IMAGE/CROP and crop it!
* Now go to FILE/”SAVE FOR WEB AND DEVICES…” & choose “100” for QUALITY & check off “CONVERT TO SRGB” & all else NOT checked off!); and SAVE it to the TEMP FOLDER with the screenshots from before called “kw 4s TEMP splash stuff” (or similar…)

Still in PHOTOSHOP, create the 592×336 version of the JPG:
* with the same image that you STILL have open in Photoshop: at top left, change WIDTH to “592 px” & HEIGHT to “336 px”;
then select the image with the crop tool. (You may have to slightly adjust the selected area now! Can adjust area with UP/DOWN/RIGHT/LEFT ARROWS on your keyboard! -> Make sure the EDGES are clean!)
* Go to IMAGE/CROP and click on CROP!
* Now go to FILE/”SAVE FOR WEB AND DEVICES…” & choose “100” for QUALITY & check off “CONVERT TO SRGB” (and all else NOT checked off!); and SAVE it to the same TEMP FOLDER with the screenshots from before called “”kw 4s mobile TEMP splash stuff” (or similar…)
WATCH: before saving, ADJUST FILE NAME and change “720×416” to “592×336”. Then hit SAVE!
Now, CLOSE out of your current Photoshop document (red circle at top right); and no need to save it…!

* REPEAT LAST FEW STEPS (in Photoshop; the 2 paragraphs above) to create splash image(s) for any other videos on your WP page!
You should end up with 720×416 AND 592×336 JPGs of ALL screenshots in your temp folder!

* Add SPLASH IMAGE(S) to EVS Video:
* GO BACK TO EVS, to the same video you dealt with before (find it, hover over it & click on SETTINGS)
* in the VIDEOS tab:
* “Use a related image?” => YES
* “Additional image options” select USE AS A SPLASH IMAGE
* “Show the ‘Play' icon?” => YES
* hit SELECT IMAGE (to upload your Splash Image): must find the correct JPG on your computer's desktop! (The temp folder!)
NOTE: VERY CAREFULLY to now choose the CORRECT JPG! (Right size! And NOT the initial screenshot WITHOUT “.JPG” extension!)
[Just an FYI: image will end up magically sitting in the EVS S3 folder; and EVS will have added some additional text to the file name.] * click NEXT
* click FINALIZE at the top right
* click NO, JUST SAVE!

[FW NOTE TO SELF: EVS will now upload this splash image to the EVS S3 folder AND *automatically* make its file name “the MP4 file name (PLUS the EVS PROFILE name at the end, if any!!)”. ALSO: ACL of this JPG is automatically set to READ for EVERYONE by EVS already! ;)
ALSO: fyi, one could change EVS settings and would NOT need to update the embed code on the WP page… page would AUTOMATICALLY reflect the changes!! IF the REGULAR embed code is used ONLY!

* Add EVS video to your WP page:
* click on CENTER MY VIDEO below the code you see
* confirm that “Your video's share URL” says THIS VIDEO PAGE IS DISABLED. If not: change it to that!
* Bottom left, where it says “Do you want to add security to your video?” => make sure http://jazzheaven.com is added as an URL!
If NOT: add URL (http://jazzheaven.com) and hit SAVE
* copy the embed code below the EVS preview video (you will now add this to your WP page!)

* in your WP page: in the HTML editor & the correct place where the video belongs, click with your mouse (and also delete the placeholder text (e.g. “[EVS CODE 720 Student Lesson HERE]”).
Then click the “EMBED AN EVS VIDEO” just above the HTML editor & PASTE IN your EVS code!
Then hit UPDATE to save your WP page! [Make sure you REALLY see the page updating! Can see this at bottom left – or at top of window (moving circle)…] * REPEAT this paragraph for ALL video players on your page!
And confirm that all videos are showing now! (By hitting VIEW PAGE (below the page title).)

* Can now DELETE the TEMP folder on your desktop with the splash images!

(Since they are all uploaded to EVS already… – so they could later be found in the EVS S3 folder…)

* Prep Screenshot of 720X416 PLAYLIST (from 720×416 CF version PLAYLIST!):
* go to regular WEB version page of this video in WordPress (which you already set up earlier!)
[Put “[Artist First & Last Name] web” in WP search bar to find it quickly…] * take a look at the page:
=> IF Playlist has a scroll bar: TEMPORARILY make ONE little change to this page's LOWEST-sitting CSS file (search for “css”)!
Modify it to say this: “…style-720×416-w-playlist-700-height.css”
So you can simply REPLACE the existing HEIGHT VALUE with “700” – OR… add “-700-height”, if it currently ends with “…-w-playlist.css”!
1) Remember the ORIGINAL HEIGHT!
2) Temporarily BACK UP the original HTML code – by copying & pasting it into notepad or other simple text doc…).
=> IF Playlist shows WITHOUT scroll bar: ignore the previous temp CSS height modification & move on to next line!
* Now, CREATE A SCREENSHOT of the PLAYLIST on this page ONLY! (So, NOT the video player(s)…!)
On a Mac, use apple+shift+4. (Be as EXACT as possible to catch the real WIDTH & HEIGHT of the playlist only!! ALSO: this should be the SAME WIDTH as the video player!! (720px))
This will save the screenshot your desktop as a .png file.
Park this .png file of the screenshot on your desktop and name it”kenny-werner-4s-solo-lesson-playlist-720″

* In PHOTOSHOP, create 720 JPG(s) of PLAYLIST Screenshot:
* open PHOTOSHOP & open the winning 720 playlist screenshot.
* select the CROP tool (top left; below the paint brush; ) & enter WIDTH: “720 px” (and leave HEIGHT *blank*!)
* select the image with the crop tool (put your mouse over it & cover the whole image).
(You may have to slightly adjust the selected area now! Can adjust with UP/DOWN/RIGHT/LEFT ARROWS on your keyboard! -> Make sure the EDGES are clean!)
* Go to IMAGE/CROP and crop it!
* Now go to FILE/”SAVE FOR WEB AND DEVICES…” & choose “100” for QUALITY & check off “CONVERT TO SRGB” & all else NOT checked off!); and SAVE it to the TEMP FOLDER with the screenshots from before called “kw 4s mobile playlist screenshots TEMP” (or similar…).
Name file exactly like the screenshot – only with a .JPG at the end. This will automatically be suggested by Photoshop…
(So, s/th like: “kenny-werner-4s-solo-lesson-playlist-720.jpg”.)
REPEAT this section for all playlist screenshots!

* Upload Playlist JPGs to into your WP Page (for TOP 2 (720×416) Players ONLY):
* In your Mobile WP page for the lesson, find the placeholder for the playlist (something like “[EVS PLAYLIST *IMAGE* Lessons Part 1 HERE]”)
* Click on the “Upload/Insert” button/link at the top left above the HTML editor
* WATCH! Make sure to upload the .JPG version – and NOT the initial screenshot…!
* Choose the following settings in the POP-UP:
FILE NAME: leave as is (WP automatically filled in the file name; e.g. “kenny-werner-4s-lesson-playlist1-720”
ALTERNATE TEXT: Enter something like this: “Kenny Werner 4 Steps Playlist 1”
LINK URL: none
SIZE: full size
* Click on “INSERT INTO POST” (and NOT on SAVE IMAGE!)
* REPEAT for ALL playlist image JPGs for this page!
* Hit UPDATE to save the page (confirm it REALLY updates by seeing movement at BOTTOM LEFT of browser; or at very top) – and then hit VIEW PAGE to confirm it all displays correctly!

* You can now DELETE the TEMP folder on your desktop with the playlist JPGs & screenshots!
(Since they are all uploaded to WP already…)

* IMPORTANT: ALSO, now go the regular WEB version for the video for a moment (so NOT the MOBILE WP page you are mainly working on now!), and change the CSS HEIGHT *back* to its original value!
Search for “700”. (You added “700” before the lowest CSS file on that WP page.)
Now, either replace “700” with the ORIGINAL number of the CSS file.
Or…, if there was no # at the end of the CSS file, delete the “-700”, so that CSS file ends again with “…-w-playlist.css”.
Then hit UPDATE and view the page to confirm that the playlists look like before! (And no weird, LONG empty space below the playlist! And with a scroll bar, IF there was one initially.)

Back on MOBILE WP page:* Check PDF/MP3 EXTRAS DOWNLOAD LINK (find it by searching THIS WP here for “zip”…)
If no PDF/MP3 Extras: delete that whole section!
If PDF/MP3 Extras: insert the correct new link (you created this before! And parked it in the “Dia Ultracart OAP New Product Creation Checklist” GD!).
You wanna replace the “temp link” further below on this very WP template page that is called:

* Confirm text @ top is correct (Artist Name + Product Title; AND ARTIST FIRST NAME in 1st paragraph!! Make sure no “placeholder text” is left!)

* Once page looks DONE: confirm all instructions text is deleted & page is clean & READY TO GO now! Then this page is DONE! ;)

[FOR *INTERVIEWS* IGNORE this paragraph!!] NOTE: next you will create/set up the 24-HOUR (aka 1x) version of the MOBILE version!
=> To do that, you will simply COPY & PASTE the HTML content of the regular (web) MOBILE version (you just created) into a NEW WP page – and then DELETE any MP3/PDF EXTRAS!!
=> But you STILL follow the instructions in the “Dia Ultracart OAP New Product Creation Checklist” GD…! (Which you should already have open now!)

Joe Smith: “Test Product” Instructional Video – Mobile Version

The friendly version: [ARTIST FIRST NAME] and many people behind the scenes worked their butts off for many MONTHS to make this nice & shiny video for you.
Please allow us to keep bringing you the good stuff by not sharing your login info with other people.

The not-so-friendly version: If you share your user name & password with your friends, we WILL have to call our friend Tony with the big stick (aka cancel your account). Seriously. Yes, we have the technology in place to monitor that. Please play nice – or we will cancel your account.

This is the MOBILE VERSION – the regular web version will NOT play on mobile devices.

Please be patient! These are very BIG video files and they need a minute to load.
They will NOT play as instantly as when watching on a computer.

It is NORMAL that the screen turns black until the play button loads.
It is also normal that, after you click the Play Button, it will take a little while for the video to load.

Please be patient! ;) It will play.

Also, you can unfortunately NOT jump to later places in the video right away (contrary to our regular web version), it needs to load first.
So, before you think “this is not working on my iPhone/iPad/Android, etc.!”: hang on for a minute, it WILL work. ;)

Waited for a while and still have an issue? Contact us through our Support Center.
(Please be specific: What device? How long did you let it load? Which video? Etc.)

iPad & Android Version:

(See iPhone version further below!)


Chapter List below, for your reference
(For technical reasons NOT clickable. ALSO: Video first has to have loaded to the point you want to click!)



CLICK HERE to download (=> iPad only!)

Note to iPad Users:
This is a ZIP file download.
You CAN open zip files on iPads, but you need to get an iPad APP for that.
Here is a FREE one


Eric's Gear: (iPad/Android Version)

[EVS CODE 720 Extra Video HERE]


iPhone Version:


Eric's Gear: (iPhoneVersion)

[EVS CODE 592 Extra Video HERE]