Flash
From itghelp
Contents |
Embedding a Flash Player in a Classes V2 Page
Getting Started
The .flv files format is a newer format (as opposed to .swf) that allows one to embed a video file in a webpage that is only playable in a "kiosk" mode. That is, those who view the content are able to view the video, stop, play, pause, etc. but not download or otherwise alter the file. This format is particularly useful within the Classes V2 utility, as professors can allow students to watch portions of films on HTML pages created within the server, controlling which clips are available when and easily adding or removing content.
Thus, the first step in embedding flash video files in a Classes V2 page is to transcode/encode your video files into the .flv format. To do this, you will need Adobe Flash CS3. When this program is installed on your machine, there is another standalone encoder that is named "Adobe Flash CS3 Video Encoder" that is included. Open this program, and drag your files into the main window. The settings for the transcode should be "Flash 8 - Medium Quality (400 kbps)," this setting will give you the most managable file size and decent quality for watching on a computer screen. Click "Start Queue" and allow the files to transcode. The finished files should have the .flv name appended and will probably be located in the same folder your source files came from.
Classes V2
Once you have your video files in the .flv format, they are ready to be uploaded to the Classes V2 server, and eventually be embedded in a HTML page. A few things to remember before starting this process:
- The Classes V2 server has a 5 GB limit for uploads. If you files exceed this limit, you will either need to remove some files, or seek another way to deliver these files.
- The process takes some time, so give yourself ample time to complete the needed operations.
To upload your .flv files onto the Classes V2 server, first login to the page to which you desire to upload the files. Next, open the "resources" tab on the left side of the screen and create a folder by clicking on the drop-down menu "Add" and selecting "create folders." Name your folder something that will allow you to remember that your pages and .flv files will be contained within it, and click "Create folders now." Find your new folder back in the resources menu and click on it. Now, click the drop-down menu next to "Add" again, but this time select "Upload Files." You can now find the files that you desire to upload on your computer, and have the ability to upload more than one at a time. However, Classes V2 only allows 100 MB worth of files to be uploaded at a time, so you may need to perform multiple uploads to get all of your files on the site.
Embedding Your File
When all of your desired files have been uploaded to the Classes V2 site, the final step in the process is to create HTML pages with your .flv files embedded within them. To do this takes a bit of extra work and can seem complicated, but I will try and simplify the process here.
To begin, you will need a Flash player (.swf file), a javascript (.js file), and an HTML script. Although this all may sound very complex, there is a great open source software group that has done all of these things for you. So, you will need to go to http://www.jeroenwijering.com/?item=JW_FLV_Media_Player, enter your email address (uncheck the box that says "Keep me updated on upgrades, skins and other things JW" unless you want emails about these things), and click on the button that says "Download JW FLV Media Player." With the box unchecked you do not have to worry about spam or other junk mail being sent to your account. Download the file to a location where you will be able to easily find it. The file will be in a folder named "mediaplayer."
Now, navigate back to your Classes V2 page, back to the resources page, and back into the folder your created before for your .flv files. Click on the drop down menu labeled "Add" and choose "Upload Files" again. This time, browse to the "mediaplayer" folder you just downloaded and choose both the "player.swf" and the "swfobject.js" files. These are your player and javascript files.
Once these files are uploaded, open a plain text document, stickies, or any other format that you will be able to copy and paste from and onto. Returning to the Classes V2 page,click on the drop-down menu next to the "player.swf" file labeled "Actions." Choose the option "Edit Details." Near the bottom of the long page that opens, there is a heading named "File Details," and the 5th entry below this heading is "Web Address (URL)." Next to this entry should be a somewhat long URL, highlight it, copy it (Command + C or "Edit --> Copy"), and paste (Command + V, or "Edit --> Paste") it onto the plain text document you just opened. Returning to the Classes V2 page, click the button labeled "Update" at the bottom of the screen to return to the resources page. Now, perform the same operation, only do it with the "swfobject.js" file, remember to give yourself a nice return on the text document between the two URLs, otherwise they might get mixed up. To complete this step, perform the same procedure one more time, except choose one of the .flv files that you previously uploaded, pasting it on the same document. You should now have three URLs on the document; the player (.swf file), the javascript (.js file), and the Flash video file you want to embed in the HTML page (.flv file). You may want to place a label such as "Javascript file; Flash Player file; Flash Video File" next to each entry so that you will remember which is which; this action might prove very helpful in the next step.
Finally, when you have returned to the Resources page on the Classes V2 site, click again on the drop-down menu labeled "Add" and this time, select "Create HTML Page." Another page will load, with an editor present for creating HTML pages. Near the top of the editor is a button labeled "Source." Click on this button (you should not notice any change in the way that the main box in the editor looks after clicking on this button, so only click once). Now, for the final element that was mentioned, the HTML script. Copy and Paste the following script into the main editor box:
<script type='text/javascript' src='1 HERE'></script>
<div id="preview">This div will be replaced</div>
<script type='text/javascript'>
var s1 = new SWFObject('2 HERE','player','470','320','9','#ffffff');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addParam('flashvars','file=3 HERE');
s1.write('preview');
</script>
Where you see the bold words "1 HERE, etc. paste the following from your previous document (if you have labeled each URL, be sure to only copy the portion beginning with "https://" and not any part of the label):
1 HERE = The URL for the Javascript file (.js, probably the second file you copy-pasted the URL from)
2 HERE = The URL for the Flash Player ( .swf, probably the first file you copy-pasted the URL from)
3 HERE = The URL for the Flash video file (.flv, probably the third file you cpoy-pasted the URL from)
Only replace the bold words with the URLs, do not delete any single quotes, equal signs, etc. - this will cause a break in the code and will most likely cause your page to appear incorrectly, or not at all. Once you have done the previous work, click the button labeled "Continue" found below the main editor box. This action will bring you to a page that allows the naming of the page, as well as many other options, among which is the ability to turn the page on or off for those in your Classes V2 group that was previously mentioned. When you have completed all of the information that you desire to enter here, click the button labeled "Finish" at the bottom of the screen. This action should return you to your Resources page, where the HTML page that you just created should appear. Click on the page and preview the video to be sure everything works correctly. If you need to change the name of the page, start and end dates, etc. you can simply click on the drop-down menu labeled "Actions" next to the page and choose "Edit Details."
Enjoy!
