|
How to stream video from your website in a separate window
This article includes coding to open and play a video clip within it's own pop-up window, sized for the video itself. Different scripting is in use on the Wacky Videos page at my site, where several video clips are selectable from a scrollable menu within an iframe. Another article will eventually be written by me to show how to apply that method as well. This article will show how to use Windows Media Player object and embed controls (for cross-browser compatability), to allow the video to play and work perfectly within all major browsers (eg: MSIE, Netscape/Mozilla, and Opera browsers). In this case, to show an actual working example, I'm referencing one of the video clips that appears on the Wacky Videos page at my site... Jurrasic Fart. The video is in WMV format. However the same technique described in this article can be used for MPG/MPEG or AVI video formats as well. Here is the link to open the pop-up window sized for the video clip, and you can supply a similar link on your web page to play your own video clip...
Okay. There are 3 things you need to do to get this to work for you... Step #1The first thing to do is to create an .m3u playlist file that references the location of the video file. Name it "play_video.m3u". In Step #2 below, in the object and embed code, you will reference the "play_video.m3u" playlist file which contains text pointing to the video file's location instead of referencing the actual video file itself, to allow "streaming" of the video. The only text contained within the .m3u playlist file will be a reference to the exact location (URL) of the video file. In the case of the example video clip used in this article, the content of the "play_video.m3u" playlist file is http://nunzioweb.com/misc/wacky/Jurrasic_Fart.wmvNow the above URL is specific to the video file I am using as an example in this article. You will have to change "http://nunzioweb.com/misc/wacky/Jurrasic_Fart.wmv" to the exact location (URL) of your video file instead. Step #2The next thing to do is to create a new page (the pop-up that plays the video). Name it "play_video.htm". This is the code for the entire page, including the player object and embed code...Important: Take note of the fact that "play_video.m3u" appears twice in the above code... both in the param name="fileName" value and in the pluginspage src (source) of the embed type. BOTH must be be there, to ensure that the video plays in all major browsers, and not just in Internet Explorer. Some other values in the above code can be changed if needed. The width (280) and height (256) values can be changed accordingly to "size" the video window to accommodate the actual width and height dimensions of the video. But here again width and height values must be equally changed for the type="application/x-oleobject" (width and height) and the pluginspage src (width and height) of the embed type. BOTH must changed identically, to ensure that the video displays the same in all major browsers, and not just in Internet Explorer. Autostart settings determine if the video starts playing automatically or not. If you want it not to start automatically, and prefer the site visitor to press the play button to start/stop the video, then change both those values to false and 0, respectively. BOTH values must be changed, to ensure that the video plays identically in all major browsers. Volume settings are just that... sets the volume level. A value of -300 is about mid-range. You can change that too if you like. BOTH values must be changed to be the same values, to ensure that the volume level is the same in all major browsers. In the pop-up that plays the video file, it is very important to have margins and padding set to ZERO at that targeted page. If not, placement within the pop-up window gets all messed up. So, when examining the above source code of that page, you will see that it also contains CSS styling that will eliminate page borders... CSS styling that I've used in the above page to eliminate page borders:
Step #3The next thing to do is to create the link in your web page to open the sized pop-up window that will display and play the video. Include this link code within your web page...In the above link code you can of course change what the link says to whatever you want. Change "Click here to play the video clip" to whatever you like, or, even use an image/button for a link. That's entirely up to you. You can also change the top and left values of 50 to something else too. Those values determine the x-y position of the resulting pop-up window in relation to where it appears on your web page. Change them to other values if you want. Okay. Have fun! Nunzio |
|
|