lecture 6 -video and audio on web
Upcoming SlideShare
Loading in...5

lecture 6 -video and audio on web






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

lecture 6 -video and audio on web lecture 6 -video and audio on web Document Transcript

  • Lecturer: Maura McDonnell Page 1 of 8 Topics AUDIO AND VIDEO >>Preparing Audio and Video for web - some tips >>Audio and Video linking - <a href> >>Player Download >>Embedding video >>Streaming Issues >>Audio Video Resources AUDIO and VIDEO PREPARING AUDIO AND VIDEO FOR YOUR WEB SITE Ensure that your audio and video file is in your site folder, it can be in its own folder and it is probably a good idea to put your audio and video in its own folder, just remember to put that folder inside your site folder. Ensure that you have encoded your audio and video so that it is ready for the web. Broadband access is becoming more common, so playing video and audio is no longer as much a painful downloading experience, however it is a good idea to offer two to three video/audio files with settings that would suit the modem user and the broadband user or let the user know what format the file is, what size it is and a link to download the latest player for the clip. A rule of thumb, keep the clip short, keep the file size down. However you may wish to have available a high quality version (still keeping file size down as much as possible) for the more discerning viewer. Common web Formats Audio Common web Formats Video Mp3 = .mp3 Quicktime = .mov Real audio = .ra Mpeg = .mpg Real video = .rm Common Settings Video Progressive download Stream download Video Settings for web Premiere 6 [Check out premiere help also ] There are a range of options to choose, in premiere 6 you can export your movie clip from the timeline and choose the save for web feature, this launches the wonderful encoding software media cleaner. Here you will see a range of options for saving your video for the web. There are two ways of increasing picture quality without making large file size. Reduce frame rate… and Reduce aspect ratio/resolution. Example, a clip that is between 320 X 240 and 240 x 180 pixels might compress to a 200 to 300k file, take it down to either 160 x 120 for files to 100k. Cleaner settings in premieres save for web and in cleaner application itself will have set up these kinds of settings. Good idea to have aspect ratios divisable by4 You will have to decide on trade offs between: quality resolution (width by height) file size Experiment with different settings and pay attention to these three things 1
  • Lecturer: Maura McDonnell Page 2 of 8 Quicktime Medium Progressive Download settings provide a good setting, for the more broadband user. Real media files are good for the modem user, however do provide a link to a smaller quicktime file also that a modem user can download Other Video Encoding Software You can go into Terrans Cleaner 5 directly in the program files directly on your computer, or access its settings within Premiere in its save for web feature in the export menu. If you go to Cleaner directly, you can see the settings used for each type of encoding. Players Encoding Software The players also provide encoding software. Some are free Quicktime has its own encoding software for the web Windows Media has Windows Media Encoder available on its website, it is free URL: www.microsoft.com/windowsmedia click on Technologies and Tools link Real Media has its own free encoding tool also available for download on the web. It is called Helix Producer . URL: www.realnetworks.com/products/producer/index.html NOTE: with video ensure that the video that the original video you encode is of the highest quality, start with a high quality video and make web versions of it ensuring that you keep a back up copy of your high quality video somewhere safe. Rem you cannot add quality to a video. (quality - resolution (pixel width and height) and compression settings) Example sites that provide video clips: http://www.re-voir.com http://www.ifilm.com This site allows user to choose their format and connection speed You can get your film added to this site, check out what they are looking for. http://www.ninjatune.net/videos/ Real media embed http://www.ninjatune.net/videos/video.php?type=ra&id=3 Quicktime embed http://www.ninjatune.net/videos/video.php?type=qt&id=31 My own quicktime embed http://www.soundingvisual.com/projects/db.htm Ars Electronica http://www.aec.at/onscreen/index_pc.html Imagina http://www.ina.fr/index.en.html Lovebytes Festival http://www.lovebytes.org.uk lot of video clips of winners of the festival Depict! Festival http://www.depict.org/pages/shortlist_content.htm lit of winners and view their video clips http://www.aec.at/onscreen/mbox/main.html individual filmmaker with embedded windows media video file Interesting Audio Sites http://www.amadeusmedia.com Brings together a group of composers to create music to go with pictures of all kinds, including film, tv, web, multimedia….interesting idea…. <A HREF> You can use the linking tag <a href> to link to any audio and video file. The browser will automatically open the default player on the users computer to play the file. In terms of the browser, it is opening a helper application. Most computers will have players for certain files - eg mp3 or quicktime (.mov) 2
  • Lecturer: Maura McDonnell Page 3 of 8 If not, then the browser will prompt the user to download it. <a href="audio.mpg">Link to Audio</a> <a href="video.mov">Link to Video</a> Put in your own text that calls the video audio….or you can use an image in whatever style suits your site Sometimes you will see sites that provide image cues/icons to let people know that audio and/or video is available on the site. Keep an eye on video audio sites and see what visual cues they provide for letting user know audio and video is on the site. Download Player link It is good practice to also provide a link to the download page for a certain player. It is also common practice to use the image logo of the player to become the link for the download page. Each player also has these logo images available on their site (indeed it is they that recommend using the images) Note: Windows media player and Real media player provide code that will always put the latest player image on your site, so you don't physically put the image on the page, you provide a link to acess the latest image on their server. Quicktime files (.mov) need the Quicktime player to play files Download code for Quicktime player is: (do check apple site also) <a href="http://www.apple.com/quicktime/download/"> Windows Media files (.wm) need the Windows Media Player to play files It provides the download link and code to access the latest image from their site. Download link for player is: http://windowsmedia.com/download Code for the latest image of the latest player <img src="http://www.microsoft.com/windows/windowsmedia/images /Download_88x31_static.gif" width="88" height="31" border="0" alt="Get Windows Media Player" vspace="7"> In practice wrap the image code in a href tags that link to the download page for the player - like so: <a href="http://windowsmedia.com/download"> <img src="http://www.microsoft.com/windows/windowsmedia/images /Download_88x31_static.gif" width="88" height="31" border="0" alt="Get Windows Media Player" vspace="7"></a> Real Media files - both audio and video need the Real Media Player to play files It provides the download link and code to access the latest image from their site. Download link for player is: http://switchboard.real.com/links/?btn=en/dwnld_88x31 Code for the latest image of the latest real media player <img src="http://logo.real.com/en/dwnld_88x31.gif" width="88"height="31" border="0" alt="DownloadPlayer" vspace="7" hspace="2"> In practice wrap the image code in a href tags that link to the download page for the player - like so: 3
  • Lecturer: Maura McDonnell Page 4 of 8 <a href="http://switchboard.real.com/links/?btn=en/dwnld_88x31"><img src="http://logo.real.com/en/dwnld_88x31.gif" width="88"height="31" border="0" alt="DownloadPlayer" vspace="7" hspace="2"></a> Note: Real audio is encoded with the file extension .ra and real video is encoded with the file extension (.rm) Audio - Mp3 Video - .avi Video .mpg <EMBED> You can embed the media player for your media file directly in a webpage, so that the video/audio file starts to play directly in your web page. I have done this for one of my quicktime video files. See: http://www.soundingvisual.com/projects/db1.htm Embedding your media player directly into your webpage, is like providing your own console to the user, you can integrate the embedded clip into your page design. Each media player provides its own code for embedding the player for that file format. This code usually provides information on the player version held by the user and whether there is a player or not, it also provides automatic link to the download page for the player. Simple Embed You can embed your video on a webpage just using opening and embed tags. However it only works reliably for quicktime files. You can do this simply like so: <embed src="videos/nameofvideo.mov" width="193" height="146"> </embed> All videos on the re-voir website, use this simple code to embed their video clip. However, they provide a link to the video extract, that link points to a webpage with the embed video code in it, so the video plays or starts to download immediately, without a helper application, however it will only play if the user has the player plug in on their computer. NOTE: It is not a good idea to provide embedded video immediately on a page, better to provide a link to the html page with the embedded video, so that the user chooses whether they will play the file directly or not like the revoir site http://www.re-voir.com This site provides video clips to avant garde filmmakers - both current and historical. The user clicks on a filmmaker, then on the page that contains a simple embed code for playing quicktime movies, the movies are in quicktime format. Check it out. More Detailed Embed Code Each player then has its own settings for the embed tags…and has its own codes for checking what versions of a player a users computer has and whether they have a player or not, if the user doesn't have a player, then the code will automatically prompt the user to download the player. Quicktime Embed Code Example code for embedding progressive download quicktime video file 4
  • Lecturer: Maura McDonnell Page 5 of 8 <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="480" HEIGHT="376" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE=" nameofvideoclip.mov "> <PARAM NAME="autoplay" VALUE="true"> <PARAM NAME="controller" VALUE="true"> <PARAM NAME="loop" VALUE="false"> <EMBED SRC=" nameofvideoclip.mov " WIDTH=480 HEIGHT=376 AUTOPLAY=true CONTROLLER=true LOOP=false PLUGINSPAGE="http://www.apple.com/quicktime/"> </EMBED> </OBJECT> Note: in cleaner 5 you can choose to have it generate the html file for embedding the video clip…you can then grab the code from that file…or you can adapt this code and copy it in directly into your html file….(ensure pathnames/directories are correct - usual html stuff) Example code for embedding streaming quicktime video file <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="192" HEIGHT="160" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM NAME="src" VALUE="QuickTime4_Required.mov"> <PARAM NAME="qtsrc" VALUE="rtsp://directory/nameofvideoclip.mov"> <PARAM NAME="autoplay" VALUE="true"> <PARAM NAME="controller" VALUE="true"> <PARAM NAME="loop" VALUE="false"> <EMBED SRC="QuickTime4_Required.mov" QTSRC="rtsp:// directory/nameofvideoclip.mov " WIDTH=192 HEIGHT=160 AUTOPLAY=true CONTROLLER=true LOOP=false PLUGINSPAGE="http://www.apple.com/quicktime/"> </EMBED> </OBJECT> note: this code was generated with cleaner 5 when I selected streaming settings, it also gives you the option of generating the html file, this is useful for you can then grab the code and put it in your own designed web page. However this stream html setting assumes you have a streaming server set up…..again this is something you can have done. The streaming lines in the above code are: <PARAM NAME="qtsrc" VALUE="rtsp://directory/nameofvideoclip.mov"> and <EMBED SRC="QuickTime4_Required.mov" QTSRC="rtsp:// directory/nameofvideoclip.mov " WIDTH=192 HEIGHT=160 AUTOPLAY=true CONTROLLER=true LOOP=false PLUGINSPAGE="http://www.apple.com/quicktime/"> </EMBED> rtsp is the streaming server code. Windows Media Embed Code The media player embed code is available at their website, I found some problems with it on netscape, had it on my site for a while as an embed video, then took it off and providing an <a href> link to download and open up the windows media file in its own player - that is not in the web page. You can check this area out more yourself if you go to the windowsmedia website. It’s a pity 5
  • Lecturer: Maura McDonnell Page 6 of 8 about some of the difficulties as windows media video has a lovely good quality to it and nice small file sizes…. Here is the code I used….however do check out the website also. <OBJECT ID="MediaPlayer1" width=192 height=189 classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.ca b#Version=6,0,02,902 standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject"> <PARAM NAME="FileName" VALUE="videoclips/videoclipname.wmv"> <PARAM NAME="animationatStart" VALUE="true"> <PARAM NAME="autoStart" VALUE="false"> <PARAM NAME="showControls" VALUE="true"> <EMBED type="application/x-mplayer2" pluginspage = http://www.microsoft.com/Windows/MediaPlayer/ SRC="videoclips/videoclipname.wmv" name="MediaPlayer1" width=192 height=189 AutoStart=false></EMBED> </OBJECT> Note: There are problems with Netscape Problems with Windows Media Embed… microsoft probs and compatibilities. Example code from successful windows media stream, uses some javascript put in the relevant td tag From url: http://www.aec.at/onscreen/mbox/main.html <SCRIPT language=JavaScript> <!-- if ( navigator.appName == "Netscape" ) { //-- This next line ensures that any plugins just installed are updated in the Browser //-- without quitting the browser. navigator.plugins.refresh(); // We don't need the APPLET within IE, and APPLET is treated as an implied // end to the OBJECT tag by the IE HTML parser. // ***Please note that if you do not need to script events, you can safely remove the next two lines document.write("x3C" + "applet MAYSCRIPT Code=NPDS.npDSEvtObsProxy.class" ) document.writeln(" width=5 height=5 name=appObsx3E x3C/appletx3E") } //--> </SCRIPT> <OBJECT classid=CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95 codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsm p2inf.cab#Version=5,1,52,701 height=240 id=MediaPlayer1 type=application/x-oleobject width=320 standby="Loading Microsoft® Windows® Media Player components..."><PARAM NAME="AutoStart" VALUE="False"><PARAM NAME="FileName" VALUE="inside_low.wvx"><PARAM NAME="ShowControls" VALUE="0"><PARAM NAME="ShowStatusBar" VALUE="0"> <embed type="application/x-mplayer2" 6
  • Lecturer: Maura McDonnell Page 7 of 8 pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/M ediaPlayer/" src="inside_low.wvx" name="MediaPlayer1" width=320 height=240 autostart=False showcontrols=0 filename="inside_low.wvx" showstatusbar="0" vspace="0" hspace="0"> </embed> </OBJECT> STREAMING MEDIA HTTP Stream - Web Page Stream Real Media Stream - Streaming Server RTSP HTTP Stream You can stream a real media file from a website using the http protocol. In this case, the real media file downloads into the real media player like any download file. If you have a fast connection it will happen fast, if not…it will be slow RULES FOR HTTP STREAM Real media encode: Encode your audio/ video file to the real media format - ie .ra for real audio and .rm for real video. Place these in their own folder. Note there are a variety of settings you can choose for streaming….56k dialup modem user; 256 DSL or cable, 512k DSL or cable, you can see the settings in the premiere 6 save for web feature, in Cleaner 5 and in Real Media Encoder - Helix. Create .ram file In that same folder provide a .ram text file that calls the real media file. This tells the realplayer where to find content. You just type in the url of your real media file. It has to be the full url. (Hence this can only be done when you have your file on a real web server space - webspace) Open a text editor and put in the url Example http://thisismywebspace.com/myvideo.rm Save this with the .ram file extension such as myvideo.ram Upload the ram and realmedia file to the same directory. <a href> link to ram file Place a link to the ram file - not the realmedia file - in your html web page document <a href=http://www.yourwebspace.com/myvideo.ram>Launch Media Clip</a> REAL MEDIA STREAM This is done in the exact same way as http stream except that your realmedia file and ram file are located on a special real media server. Many webhosting companies provide a realmedia streaming server. You can buy any number of streams, this will cost you. It is used when you have a lot of people accessing the streaming file at the same time Encode realmedia file Prepare ram file except this time the url will be the realmedia streaming server Eg 7
  • Lecturer: Maura McDonnell Page 8 of 8 rtps://streamingservername/website/myvideo.rm You would get this url from the web/real media stream host. NOTE: http streaming is not an extra cost when hosting your website. Most standard hosting and free hosting packages can handle http stream as essentially it is just a link to a file. Rtsp streaming means that the server is conficured to handle the real media stream, the administrator of the server needs to do this configuration. AUDIO VIDEO RESOURCES Useful links http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwmt/html/introwmt7-2.asp http://msdn.microsoft.com/library/en-us/dnwmt/html/cross-browser.asp?frame=true http://msdn.microsoft.com/downloads/samples/internet/default.asp http://www.realnetworks.com/resources/contentdelivery/documentation/httpstream.html http://www.realnetworks.com/resources/contentdelivery/documentation/quicktime.html http://hotwired.lycos.com/webmonkey/templates/print_template.htmlt? meta=/webmonkey/01/49/index2a_meta.html http://www.dircon.com/streaming/index.html example streaming solution cost 8