Feeds:
Posts
Comments

Posts Tagged ‘html’

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 »

Embedding Windows Media Player into web pages:

The goal of this article is to explain in relatively simple terms how to get Windows Media Player embedded into your web site. In order to do this, you will have to have basic HTML knowledge and access to the HTML code of the page in which you would like to embed the player.

Windows Media Player is fairly simple to get onto your web site once you understand the basics. To begin with you will need to have a valid HTML page which you can edit. The minimum you need for a blank HTML page is the following:

<HTML>
    <BODY>
    </BODY>
</HTML>
 

 Below I will go through the HTML code needed to successfully embed windows media player into your web page line by line.

The first thing you need to do is to add the relevant OBJECT tag. This identifies the Windows Media Player ActiveX control to the browser and sets up any initial definitions. You must place the OBJECT tag inside the BODY portion of the HTML code:

<object classid=”clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6″ codebase=”http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112”  ID=”Video” width=”640″ height=”552″>

</object>

The ‘ID’ above refers to the unique name for each player instance on a webpage. For example if you wanted to embed more than one player on a page you would have to give each a unique ‘ID’ (ID’s can be anything, it’s up to you what you name them, but good practice would dictate that you don’t use any special characters or spaces). The ‘width ‘ and ‘height’ obviously refer  to the size of the player you would like to embed. You control other player options by using ‘param’ tags, which look like those shown below:

<param name=”ShowControls” value=”1″>

-Use “1” to show the control button(play, stop, etc…).” “0” will hide the controls.

<param name=”AutoStart” value=”1″>

-Use “1” to start the video playing as soon as someone gets to your web page.

<param name=”Rate” value=”1″>

-Specifies the playback rate. 0.5 equates to half the normal playback speed, 2 equates to twice.<param name=”ShowStatusBar” value=”1″>

<param name=”StretchToFit” value=”1″>

-Specifies whether video displayed by the control automatically sizes to fit the video window, when the video window is larger than the dimensions of the video image.

<param name=”uiMode” value=”mini”>

<param name=”SRC” value=”YOUR URL HERE”>

<param name=”URL” value=” YOUR URL HERE “>

 

Once you are done, your embed code should look something like the sample below. Feel free to copy and paste the below sample and enter your file details in.

<object classid=”clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6″ codebase=”http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112”  ID=”Video” width=”640″ height=”552″>

<param name=”ShowControls” value=”1″>

<param name=”AutoStart” value=”1″>

<param name=”Rate” value=”1″>

<param name=”ShowStatusBar” value=”1″>

<param name=”StretchToFit” value=”1″>

<param name=”uiMode” value=”mini”>

<param name=”SRC” value=”YOUR COMPLETE URL HERE”>

<param name=”URL” value=” YOUR COMPLETE URL HERE “>

</object>

 

Read Full Post »

Follow

Get every new post delivered to your Inbox.