RapidWeaver FAQ - Movies and Flash content







Share/Bookmark


How can I embed any video content into my RapidWeaver website? How can I embed my videos using HTML5?


Whenever you can I would recommend you to use HTML5 to embed your movies or video contents so they can be played on the iPad, the iPhone and the iPod Touch too.


Using HTML5


The best solution to implement video content with HTML5 currently is to use videojs.com



1) To be able to do that you first have to convert your video content to .mp4 and to .ogg format. I think the best and easiest way to convert your movie to .mp4 and .ogg is using a freeware application named Miro Video Converter.

a) Go to
http://www.mirovideoconverter.com/ to download the application
b) Drag your video in the appropriate box and choose to covert it to MP4, hit Convert! Repeat the procedure choosing Theora (which is .ogg).
c) The video you get from converting to Theora has a
.theora.ogv extension. Change .theora.ogv to .ogg before you upload the video to the web. You will have to confirm to use .ogg, approve.
d) That's it.

2) Upload the two files to your server and get their URL (see Chapter 2 of this page for further details)
3) Copy the following code and edit it as described further on

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="URLtoPreviewImage.png" data-setup="{}">
<source type="video/ogg" src="URLtoTheMovie.ogg">
<source type="video/mp4" src="URLtoTheMovie.mp4">
</video>



If you want the video to autoplay type
autoplay near controls. So it will read controls autoplay
If you want the video to loop type
loop near controls. So it will read controls loop or controls autoplay loop if you also want it to autoplay.
If you don't want the controls to display simply remove
controls from the code.
Change width and height to fit your video
Where it says
URLtoPreviewImage.png enter the URL to the preview image of the video
Where it says
URLtoTheMovie.ogg enter the URL to the .ogg movie you uploaded
Where it says
URLtoTheMovie.mp4 enter the URL to the .mp4 movie you uploaded

4) Add the code to your page or post. Select it, go to Format, HTML and choose Code.


If adding the video using HTML5 is not a solution for you have a look at the following chapters...


Chapter 1: Movies display as Q instead of movies?
Chapter 2: Storing Flash files and other content on your Server
Chapter 3: Embedding video in RapidWeaver
3.1 WMV
3.2 QuickTime (If drag&drop doesn’t work)
3.3 FLV
3.4 SWF
3.5 Real
Chapter 4: Flash video player
Note 1: If you experience the following problem...



Chapter 1: Movies display as Q instead of movies?


The Q means that the movie is loading. If you don’t want the Q and want the progress bar instead (sometimes also referred to as quick start)

Open the file using QuickTime Pro.
From the File menu choose "Save As..." and pick the Desktop as the save location so you don't have to rename the file.
(This was suggested by QuickTimeKirk on the Apple Discussion Forum)

Chapter 2: Storing Flash files and other content on your Server


1. Create a new folder in the folder you publish your website to from iWeb
2. Name this new folder something like 'files' or ‘movies’ or whatever
3. Copy your .flv or any other file to that folder
4. Upload the folder to your server using your FTP application
5. yourbaseurl.com/nameofthefolder/nameofthefile.extension is the address at which the file will be stored on the web
Example: http://yourbaseurl.com/movies/nameofthefile.flv

Substitute the red url in the codes of Chapter 3, 5 or 6 with that one modified to fit your case

Chapter 3: Embedding video in RapidWeaver


In general you only have to change the following parameters:
- Width & Height
- Autostart (or Autoplay)
- Controller
and only if you want to. The other parameters don’t need to be changed and you don’t have to care about them.

Where I wrote
sample.wmv or any other “sample.” you need to replace it with the full url of the movie you found following Chapter 2 or Chapter 3 (or you know what the url is). It will look something like that:
http://yourdomain.com/folder/sample.wmv

Change the sizes width and height parameters (number of pixels). Read the note about that at the end of the page.

Value
true or 1 means that you agree with the action it is set for (it is enabled)
Value
false or 0 means that you do not agree with the action it is set for (it is disabled)

Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code".


The following codes were collected all over the internet. I hope they work. Simply copy and paste them into your pages (after you modified them to fit your case).

3.1 WMV


<object type="video/x-ms-wmv"
  data="sample.wmv"
  width="320" height="260">
  <param name="src" value="sample.wmv" />
  <param name="autostart" value="true" />
  <param name="controller" value="true" />
</object>



3.2 QuickTime



The following code is written for a 320x240 px movie. As you will notice the height is set to 256 and not 240px. That’s because the movie controls take 16px in height and those must be added to the height for the controls to work properly.

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="320"
HEIGHT="256" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="sample.mov">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="true">
<EMBED SRC="sample.mov" WIDTH="320" HEIGHT="256" AUTOPLAY="true"
CONTROLLER="true"
PLUGINSPAGE="http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>



You can disable the movie controls by changing the parameters Controller=”true” to Controller=”false”.

3.3 FLV


<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv_mini.swf" width="320" height="240">
    <param name="movie" value="http://flv-player.net/medias/player_flv_mini.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="flv=sample.flv&amp;autoplay=1&amp;autoload=1" />
</object>



That uses the player of
http://flv-player.net/

3.4 SWF


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="468" height="60"
id="mymoviename">
<param name="movie"  
value="sample.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="sample.swf" quality="high" bgcolor="#ffffff"
width="468" height="60"
name="mymoviename" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>



3.5 Real


<object width="320" height="256"
classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA">
   <param name="src" value="sample.rm" />
   <param name="center" value="false" />
   <param name="maintainaspect" value="true" />
   <param name="autostart" value="false" />
   <param name="numloop" value="1" />
   <param name="controls" value="imagewindow,all" />
</object>



Visit the following sites for further informations:

http://www.exploittheweb.co.uk/objects.html (*****Best)
http://www.danfergusdesign.com/classfiles/VCA225-digiProduction/exercises/ex-videoEmbed.html
http://www.alistapart.com/articles/byebyeembed
http://developer.apple.com/quicktime/compatibility.html

Chapter 4: Flash video player


The codes posted in Chapter 4 simply integrate the video into the website but without displaying a player with start/stop, pause, volume and time functionalities. If you want to have these features you need to use a flash video player.

1. Go to
this website to download the player and you will get a folder called “mediaplayer”.
2. In the folder you find a file called “preview.jpg”. Replace that image with a preview image for your movie. Replace the “video.flv” file with your own video. If you need to convert your video to .flv you can use
Crunch (freeware). Otherwise you can also use H.264 .mp4 files.

If you have multiple videos you want to post on your site add them all to that folder. To make it easier for you to embed them into your site rename the files to

preview1.jpg, video1.flv for the first video
preview2.jpg, video2.flv for the second video


3. Upload the entire folder to the root of your server (what the root is, is explained in the Basic web knowledge base FAQ on my website)
4. On the page where you want to embed the video add the following code:

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="400" height="315">
                <param name="movie" value="/mediaplayer/player.swf" />
                <param name="allowfullscreen" value="true" />
                <param name="allowscriptaccess" value="always" />
                <param name="flashvars" value="file=/mediaplayer/video.flv&image=/mediaplayer/preview.jpg" />
                <embed
                        type="application/x-shockwave-flash"
                        id="player2"
                        name="player2"
                        src="/mediaplayer/player.swf"
                        width="400"
                        height="315"
                        allowscriptaccess="always"
                        allowfullscreen="true"
                        flashvars="file=/mediaplayer/video.flv&image=/mediaplayer/preview.jpg"
                />
        </object>



If you have multiple videos where it says video.flv change it to video1.flv, video2.flv, …
If you have multiple videos where it says preview.jpg change it to preview1.jpg, preview2.jpg, …
to fit your case.

Change width and height parameters to fit your video. Example of the player:



Note 1: If you experience the following problem...


“The shape of the picture is not quite right – the player seems to squeeze the picture slightly even though I know I have the correct pixel ratio set up”

You should try to play around a bit with pixels… Maybe different things handle pixel slightly differently… Maybe you have to include the pixels used by the movie control bar…

“I have done that. For my 400×225 16:9 movie, I needed to add 18 pixels to the height parameter and it worked. This is solved, thanks”


This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share