Welcome to the RapidWeaver Community Forums, where you can chat with RapidWeaver users from around the world!
How to Encode for HTML5 Web Video, Use it With RapidWeaver and SublimeVideo. For beginners Part 2
Robyn
Port MoodyPosts: 18Members
If you haven't read Part one yet, read it here.
Now The Poster Image
1. Once again use the high quality original source file.
2. Open it with Quicktime Player.
3. Stop the video and set it to the very beginning. Using the first clip of the video will look the best on your site, as when the movie begins it will nook natural. If you want something else for your poster image now is the time to set the video to it.
4. From the "File" menu select "Export for Web"
5. A new menu appears over the video. Check the "Cellular" box (this is simply for speed. Check any box you want, the purpose here is only to get the JPG) and hit "Export." Find the newly created folder, move the JPG to a new location and trash the rest.
Using SublimeVideo in RapidWeaver
This is what makes all your hard work worth it. Go to SublimeVideo and sign up for a free account. When you are logged in, you will need to gather some code. Don't panic it's easy just copy and paste.
1 Log into Sublime Video and hit the "Embed Code" button.
2 A new box will appear. Select EVERYTHING in the box. Press command c.
3 Open the page in RapidWeaver you want to display your video. In the Page Inspector, hit "Header" then paste the code (command v) in the "Custom Header" window. This code must appear in every page you want your video.
4 Highlight the entire code below, Copy it (command c) then paste as plain text (command option v) onto your RapidWeaver Page in the location you want the video to be seen. These instructions can also be found at SublimeVideo Documentation Page
5 Now it's time to add the EXACT location of your files you uploaded with Cyberduck to the code you just dropped on to your page. Be sure to paste the EXACT location between the quotations for each appropriate file. Use Cyberduck to navigate to each file and retrieve the EXACT location. Paste the EXACT location into the code below. One for the JPG another for the MP4 etc. You must have at least a poster and MP4. If you choose to omit OGG for example simply delete the entire line with .ogg from the code.
Tip: Add the code from SublimeVideo to "Snippets" for future pages.
Tip: Feel free to adjust the width and height to your liking BUT, do not go bigger than the size of the file, AND keep the exact aspect ratio.
Note: The video will not work when viewing in RapidWeaver. Publish your page to see it in action. SublimeVideo explains how to view locally but I haven't bothered to figure that out yet. Perhaps someone can explain how.
Note: SublimeVideo will also produce a flash version of your video for any visitor who needs it. Right click on the video to see it in action.
Conclusion
SublimeVideo is as easy as it gets and looks absolutely great on any page. I can't recommend it enough! I tested it with multiple videos per page in; stacks, accordion, carousel, styled text, the sidebar, pluskit, and the blog page without a hitch. It also works with the individual blog links too! SublimeVideo will display a small badge on the lower corner of your video for the first 5 seconds then disappear. This doesn't bother me a bit, even the logo looks good, but I will be upgrading to a paid plan in the new year, that is up to you. Finally, I would also like to add I am not in any way affiliated with Handbrake, Firefogg, Cyberduck or SublimeVideo. Enjoy
This entire tutorial is also on my website with video examples. MarriedCouple.ca
Now The Poster Image
1. Once again use the high quality original source file.
2. Open it with Quicktime Player.
3. Stop the video and set it to the very beginning. Using the first clip of the video will look the best on your site, as when the movie begins it will nook natural. If you want something else for your poster image now is the time to set the video to it.
4. From the "File" menu select "Export for Web"
5. A new menu appears over the video. Check the "Cellular" box (this is simply for speed. Check any box you want, the purpose here is only to get the JPG) and hit "Export." Find the newly created folder, move the JPG to a new location and trash the rest.

Using SublimeVideo in RapidWeaver
This is what makes all your hard work worth it. Go to SublimeVideo and sign up for a free account. When you are logged in, you will need to gather some code. Don't panic it's easy just copy and paste.
1 Log into Sublime Video and hit the "Embed Code" button.
2 A new box will appear. Select EVERYTHING in the box. Press command c.
3 Open the page in RapidWeaver you want to display your video. In the Page Inspector, hit "Header" then paste the code (command v) in the "Custom Header" window. This code must appear in every page you want your video.
4 Highlight the entire code below, Copy it (command c) then paste as plain text (command option v) onto your RapidWeaver Page in the location you want the video to be seen. These instructions can also be found at SublimeVideo Documentation Page
5 Now it's time to add the EXACT location of your files you uploaded with Cyberduck to the code you just dropped on to your page. Be sure to paste the EXACT location between the quotations for each appropriate file. Use Cyberduck to navigate to each file and retrieve the EXACT location. Paste the EXACT location into the code below. One for the JPG another for the MP4 etc. You must have at least a poster and MP4. If you choose to omit OGG for example simply delete the entire line with .ogg from the code.
Tip: Add the code from SublimeVideo to "Snippets" for future pages.
Tip: Feel free to adjust the width and height to your liking BUT, do not go bigger than the size of the file, AND keep the exact aspect ratio.
Note: The video will not work when viewing in RapidWeaver. Publish your page to see it in action. SublimeVideo explains how to view locally but I haven't bothered to figure that out yet. Perhaps someone can explain how.
Note: SublimeVideo will also produce a flash version of your video for any visitor who needs it. Right click on the video to see it in action.
<video class="sublime" width="640" height="360" poster="http://www.the exact location of your poster image.jpg" preload="none"> [source src="http://www.the exact location of your MP4 video.m4v" /] [source src="http://www.the exact location of your WEBM video.webm" /] [source src="http://www.the exact location of your OGG video.ogg" /]
Conclusion
SublimeVideo is as easy as it gets and looks absolutely great on any page. I can't recommend it enough! I tested it with multiple videos per page in; stacks, accordion, carousel, styled text, the sidebar, pluskit, and the blog page without a hitch. It also works with the individual blog links too! SublimeVideo will display a small badge on the lower corner of your video for the first 5 seconds then disappear. This doesn't bother me a bit, even the logo looks good, but I will be upgrading to a paid plan in the new year, that is up to you. Finally, I would also like to add I am not in any way affiliated with Handbrake, Firefogg, Cyberduck or SublimeVideo. Enjoy
This entire tutorial is also on my website with video examples. MarriedCouple.ca
I'm the one on the right
Me and Dropbox, sitting in a tree. S-Y-N-C-I-N-G.
Me and Dropbox, sitting in a tree. S-Y-N-C-I-N-G.
