There are many ways to display and work with video on the web. This document discusses some of the various techniques available to embed or host various types of video formats.
An extremely simple technique to achieving an online portfolio is to forgo all the payments, learning, work, conversions, multi-formats and head straight for the do it for me approach, like Dan Lupton. This technique is effective, costs nothing, and is easy to achieve, although it may not look as professional.
Some blogs are freely available (Wordpress, Blogger) and can be exactly what an artist needs. Both blogger and Wordpress allow for embedded video and with blogger you can upload videos up to 100MB in size directly to the site. Wordpress has a plug-in called VideoPress designed specifically for podcasting video.
Websites like YouTube and Vimeo have extremely easy solutions to providing video on your website. Upload to them and copy the links or code provided to add to your blog/site.
From basic to the extreme, doing it yourself can be extremely rewarding and fun. Knowing how to use html, css, and other web concepts can be incredibly useful this day and age. The following section describes ways to get you ready to accomplish this.
HTML5 has the <video> tag which allows for video to be embedded into webpages very easily. At the time this was written HTML5 was not officially released, but most companies are scrambling to upgrade their browsers to support the new language. The following MP4 video uses the <video> tag to embed the movie.
A Webhost is a computer that serves, or publishes, a website to the world wide web. Webhosts can be free, or for a fee. The following free hosting sites have not been tested or verified by Scott: Lime Domains, Lycos Tripod, $0.00 Webhost, Webs. They are able to give away sites by providing paid hosting for web owners who eventually need more than what the free account offers or by putting adds on the webpage.
I personally have found owning my website a very fun rewarding experience. I have created blogs, wiki's, forums, host video, media galleries on my websites all without coding a thing. Many hosting companies have a Control Panel that makes websites simple and easy to maintain and even create.
I personally host with Bluehost.com and costs around $100.00 per year and includes a domain (www.your_website_name.com).
If you are looking to buy only a web domain, but not a host there are many companies out there capability to do this. In the past I've used GoDaddy.com, but there are many others out there to provide this type of service. A domain provider should be able to redirect your domain name to another website or page. Your blogger or wordpress site can be accessed through your desired domain name.
The following diagram show the various pages and media that would appear on a multipage, multiformat, best case scenario website. If one chose not to provide all of the various sizes of video stick with the wise recommendations of Joe Crawford (1280 x 720)
Keep it Short and Simple. The best communication is direct and concise. Potential employers looking at your website want to see your contact info and examples of your work. They don't care about how flashy your site is or how cool they buttons look.
A great site to learn basic web design is w3schools.com. If you ask most web designers that is the place they'll tell you to start, and where to learn more.
Many hosting companies offer with their control panels, easy site builders which can be more than suitable for a web-resume type site.
There are many standards in this world, the problem is that not every one uses the same ones. The internet is no exception of this occurrence. There are major inconsistencies online. Here are some of the major ones and techniques to tend to them.
The first issue is the way we browse the web. Internet Explorer, Firefox, Google Chrome, Safari, hand held browsers and whatnot all have their own way of displaying websites, html, css, and various plug-ins like Quicktime, Flash, Java. The best way to deal with this is to keep things simple, and to test your website on as many different computers as possible in as many browsers as possible. For those interested in being fully compatible there are scripts available out there to detect the browser and adjust for these browser differences.
Another issue is the various plug-ins. Although Flash is readily available on most desktops, laptops and netbooks, it is not currently allowed on iPhones, iPods, and iPads. This is why it is best to provide multiple formats of your demo reel online.
In terms of graphic design, for a Portfolio site I recommend to keep it very simple so as not to have to worry too much about formatting in CSS and you don't want anything fancy or flashy on your site anyway. You want to provide the information a potential employer wants and nothing more.
Most editing software like Premier or Final Cut Pro can output a suitable file for online usage in a variety of formats. Adobe Media Encoder and Apple Compressor are also great tools for video conversion.
There are a number of Flash converters available to host video on your own site without the need of Vimeo or Youtube. Check out the list of various flash players at about.com including Flow Player
I often use MPEG Streamclip for video conversion. It's free and works well, plus it's software is Mac and PC compatible.
If you plan on using Vimeo or YouTube, they will do the conversion for you.
Working with video online can be a daunting task. Fortunately websites like YouTube and Vimeo have taken care of a lot of problems. With sites like these one simply has to create an account (for free) and upload their movie to the site. The website will convert the movie to their specific format and provide code to embed or link to the video. This is by far one of the simplest methods to host video. Although the sites can convert your video from almost any format and size there are standards that they prefer you to use when prepping your video so that you maintain the best quality possible. YouTube is most forgiving regarding video formats but Vimeo is also quite accepting. Both sites encourage uploading the highest quality video you have, and not pre-sizing it before upload.
Another method would be to host the video on your own website. About.com has a nice list of various web players that you could use to host and play the video on your own website, and there is of course the recommended Flow Player.
The drawback to using Vimeo, YouTube, or any of the free players is that the video is in a flash based format. This means that a Flash player is required to play the video. Although most personal computers have the player or a plug-in for their web browsers, the iPod/iPad devices aren't allowed to play Flash files. Theoretically most potential employers will be at their desk looking up your resume, and not surfing on their iPhone, but you never know. It's best to provide more options than less.
MPG is a web format and is multi-platform, but has many different varieties, so getting the right settings is very important for maximum compatibility. This video has been embedded into the webpage using the OBJECT and EMBED tags in HTML. Within the Object tag various settings like autoplay and show controller can be chosen.
This leaves us with Quicktime, Windows Media Video, or AVI files. AVI and Windows Media Video are Windows files and may not play well on Mac's, at least without a plug-in or additional download. Most Mac users will not likely have this plug in and the iPod/iPad market probably won't be able to play them either.
Quicktime is a common way to go as most people have the Quicktime player downloaded on their computer, including most Windows users. Quick time can be embedded into a webpage with the ability to detect if someone doesn't have the player and send then to get it if they don't.
Scott Hastings - techsupport@boomcity.biz
about.com video • w3schools.com:video - web video information sites
websitehelpers.com - Excellent article about hosting video on the web.
Teaching3D.com - Amazing resource from the great Joe Crawford
bluehost.com - My favourite web hosting company.
youtube.com • vimeo - video hosting sites
Multi-pass or Two-pass encoding usually makes the video look a little better, but won't change the final file size.