Feeds:
Posts
Comments

Posts Tagged ‘HTML5’

In this article I want to show you how you can quickly create the embed code for a Flash video player. In a previous article, we looked at HTML5 and the <video> tag. We saw that it’s very easy to create a player in HTML5 and the upshot of using it means we get to reach those all important iOS devices. There is a downside however by just using pure HTML5 and this was also mentioned in the previous article. Audiences who are using older systems with out of date browsers might not be able to view your videos if you’re only using HTML5. To prevent this, it’s suggested that you also include a Flash player in your fall back code so that these older systems have something to ‘fall back’ on.

Creating a Flash player from scratch is much harder than creating a HTML5 player so to keep things simple, I want to point you in the direction of the Open Source Media Framework site. They have a neat web application that allows you to create the embed code for your Flash video. You’re able to adjust the height and width along with other standard settings. I can’t begin to tell you how much time this saves and is especially useful when you need to get your videos up on your site quickly. To make use of the generator, click here.

OSMFpic

You should find the generator fairly easy to use, just click the preview button once you’ve entered your URL and settings and the embed code appears under the preview player. This code can be inserted into your HTML5 player from the previous article to enable that all important fall back feature.

One more thing I need to highlight about this application is the fact that it also works with live RTMP publishing URLs. This means that if you need a player for your live Flash event, you can quickly create one here. Remember that Mydeo offers world class live and on-demand video delivery (HTML5 and Flash compatible) at low entry level pricing. For more information about our products and how Mydeo can help you with online video, feel free to contact us by email: m3@mydeo.com or by phone: +44 208 540 2300.

Read Full Post »

HTML5 has been a hot topic for some time now but in many ways it’s becoming more of a norm. At Mydeo, I’m seeing more and more of our customers jumping on the <video> tag bandwagon and for good reason too. The use of Flash is slowing down mainly due to the lack of support in iOS devices but it’s also interesting to add that the latest versions of Android are also dropping support. Android and iOS are the market leaders for smartphones and tablets and together control over 85% of the overall pie. Consumers demand their videos on the go and if you’re still using the ye old ways of Flash then you could be losing a sizeable chunk of your audience to your competitor who has already utilised a solution for reaching these devices.

I’m here to tell you that you don’t need to spend the whole of your quarterly budget  on a video platform just to reach smart devices. This post will show you how to embed videos on your site using the <video> tag. It will also show you how to reach multiple browsers and devices because not all end users have the same equipment/software. I will use video files that have already been uploaded to the Mydeo servers to test with.

In the example below you’ll see a standard  HTML page but with the addition of the video tag that’s referencing a file on the Mydeo servers. If you copy this code and paste it into notepad and save the file as a .htm or .html, the file will open as a web page containing the video. This, in its current format will also play on iOS devices.

<html>
<head>
<title>My HTML5 Video</title>
</head>
<body>
<video src="http://mydeo.vo.llnwd.net/o1/u/m3/64de828ce3264daf912aa3493414a30d.mp4" controls="controls" height="480" width="620"></video>
</body>
</html>

If the video is not playing for you, there’s a good chance that the browser you’re using doesn’t support .mp4 or HTML5 at all. To reach almost every browser/device, we need to do a few more things.

The example below has a few additions: firstly, I have moved the source tag onto a different line and added support for three different file types: mp4, ogv (ogg) and webm. These three files types are the video formats excepted by HTML5 so by referencing all of them, you’ll reach a better percentage of end users. All the files referenced here are the same video but I’ve just converted them into the separate file types (information on how to convert you videos for free is mentioned later in the article). Secondly, if you want to be able to reach users using older operating systems with older browsers, you can also add a traditional Flash player (see the code example on how to add a Flash player). The player below is coded so if the first option doesn’t work, the browser will seamlessly attempt to play the second option and then the third and so on. This process is called a ‘fall back’, the browser falls back until it finds a compatible version to play.

<html>
<head>
<title>My HTML5 Video</title>
</head>
<body>
<video controls="controls" height="480" width="620">
<source src="http://mydeo.vo.llnwd.net/o1/u/m3/64de828ce3264daf912aa3493414a30d.mp4" type="video/mp4" />
<source src="http://mydeo.vo.llnwd.net/o1/u/m3/59243cfe69c74f3ebc26d14cb29e9b96.webm" type="video/webm" />
<source src="http://mydeo.vo.llnwd.net/o1/u/m3/160a3cd44c074efcae8b1fbb784aca9f.ogv" type="video/ogg" />
<--! Here is where you add code for a traditional flash player, you can use the mp4 URL above and generate yourself a player by navigating here: http://blog.mydeo.com/2013/01/25/flash-video-player-generator/ -->
</video>
</body>
</html>

And that’s it! You can use the code above to create your own HTML5 player, all you need to do is replace the source URLs with your own. There are many different options for customising your player so be sure to have a play around with the code. If you need to convert your files into mp4, ogg or webm then there is a fantastic video converter which is 100% free and can be downloaded here: http://www.mirovideoconverter.com/.

Remember that these test files are utilising Mydeo’s servers so if you need a hosting provider to deliver your HTML5 videos over a super fast global network, then do not hesitate to contact us. You can do so by email: m3@mydeo.com or by phone: +44 208 540 2300.

Read Full Post »

What is HTML 5 Video?

First, lets talk about what HTML 5 is. HTML 5 is the successor to HTML, the standard formatting language used to publish all web sites, and interpreted by all web browsers to display them. HTML 5 is a necessary replacement for traditional HTML because this new standard includes native support for today’s data-rich, interactive web applications. Traditional HTML does not include native support for rich media (videos, animations etc.) whereas HTML 5 does.

Ok, so what is “HTML 5 Video”?

Recently, the HTML 5 specification was updated to state the following:  

[Browsers] should support Theora video and Vorbis audio, as well as the Ogg container format.

This is primarily because there are no known patents or royalty arrangements that need be observed in order to produce or consume media encoded with these standards.

Can Mydeo deliver HTML 5 video?

Yes! In fact, we include support for it in all our packages. To get started, sign up for your free 15 day trial or give us a call to discuss.

What do I need to get started?

If you’ve got existing media that you’d like to convert into an HTML 5 video format, you can either do this yourself using a commercial encoder or use our pay as you go encoding service within your account.

You’ll then need your web designers to design you a player and a player page that support HTML 5. Some off the shelf freebies are available for this, check out HTML5video.org as an example.

Read Full Post »

Follow

Get every new post delivered to your Inbox.