012 Embedding videos for all browsers and devices
Video: 012 Embedding videos for all browsers and devicesHello! This is Ray Villalobos and welcome to View Source. In this episode, I'm going to show you how to create a page that serves video to regular browsers and iOS devices without having to recompress the files in multiple formats. How is that possible? Let's View Source. HTML5 tags are revolutionary. Theoretically, it's possible to embed video or audio in a web site by adding a simple tag that's as easy to use as the image tag. The problem with using this tag is that older browsers do not support the media tags, but there's another problem.
Viewers: in countries Watching now:
The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.
- Creating a custom URL in WordPress
- Adding breadcrumb links to sites
- Creating a toggle button with jQuery
- Adding Twitter feeds to a site
- Adding PayPal buttons to pages
- Uploading photos to your web site
- Embedding videos for different browsers and devices
- Parsing and placing a YouTube video feed
012 Embedding videos for all browsers and devices
Hello! This is Ray Villalobos and welcome to View Source. In this episode, I'm going to show you how to create a page that serves video to regular browsers and iOS devices without having to recompress the files in multiple formats. How is that possible? Let's View Source. HTML5 tags are revolutionary. Theoretically, it's possible to embed video or audio in a web site by adding a simple tag that's as easy to use as the image tag. The problem with using this tag is that older browsers do not support the media tags, but there's another problem.
Newer browsers do not support the same format. Almost every major browser supports a slightly different file format. So if you want to show one video to every browser, you might have to encode files in WebM, Ogg, and MP4. Here I have what should be the way all browsers work; you have a simple video tag that links with the source attribute to a file on your site. You specify a width and a height and controls, so that shows the controls that people can use to play, pause, and scrub through the movie. So I am going to copy that, and paste that into this video player, and I am going to save this file.
I'm working with files that are stored in a server. So now that I've placed the files on the server, I'm going to pull up Safari and load this file. So as you can see, the file loads up fine and it plays in Safari. If I try to pull up the same file in Firefox, although I see the default player for Firefox, I can't see the video. It's not that Firefox doesn't understand the HTML5 video tag; it's that it doesn't understand the format that this video is in. In order to support as many browsers as possible, I would like to use Flash for desktop browsers and HTML5 for iOS devices, since if I choose a Flash only solution, iOS devices will not be able to understand Flash video.
Now one problem that you might run into when testing this solution out on your local machine is that Flash is picky about access to external files, and this is the reason why I am working off of a live server. So if you are working on local files, make sure you upload into a server before you preview your solution. So what I like to do is use a video player called flowplayer that is a free Flash-based player that works great on all desktop devices. So I am going to hit the Download link right here, and I'm going to scroll down so you can see the different licenses that I can get.
I have the two calls that I would normally use just to use flowplayer and I have a call to a method right here that gives flowplayer a couple of variables. The other option is to use this modified version of the form that actually checks the user agent, that means it checks to see which browser is trying to access this document, and then determines if the browser that is using this document comes from an iPhone, an iPod, or an iPad and if it does, then it uses the same video tag that we used before. Otherwise, it's going to use the normal flowplayer and that's what we have done in our version of the myscript file.
We'll make that little bigger so you can see it better. So you could see that this takes the information from the script, if the device is an iOS device, then it just writes out the normal video tag. If it's not an iOS device, then it uses flowplayer to display the video. So now I'm going to save the script, and I'm going to pull this up in Firefox, reload this page, and you can see that the flowplayer takes over and I am going to go Safari, refresh this page, once again flowplayer is taken over on desktop devices.
So now, it not only plays on desktop browsers, but will also play on any iOS device. So I wouldn't count out Flash just yet, it's an especially good solution for delivering online video, especially for older browsers. Tune in next time and don't forget that to solve just about any online project, sometimes the best solution is to View Source.
There are currently no FAQs about View Source.