embed | www.mydeo.com

Posts Tagged ‘embed’

Flash video player generator

Posted in Uncategorized, tagged cdn, embed, Flash, Flash live, flash player, HTML5, mydeo, mydeo.com, players on January 25, 2013 | 1 Comment »

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.

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 »

How to make a HTML5 player

Posted in Uncategorized, tagged Android, embed, html, HTML5, ios, LLNW, mobile, mobile video, mydeo, mydeo.com, video on January 15, 2013 | 1 Comment »

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 »

Flowplayer Quick start guide

Posted in Articles, Technical, tagged embed, flowplayer, m3 on April 24, 2009 | 3 Comments »

Flowplayer Quick start guide

We have put together a quick start guide for those of you who would like to embed a flash video into your webpage. This example uses a flash player called Flowplayer, which if free to use. Please visit http://flowplayer.org for more information about the player and further examples on how to customise the player. The commercial version of the player will allow you to remove the Flowplayer logo and replace it with your own. If you would like to embed windows media player, please see http://blog.mydeo.com/2009/01/27/embedding-windows-media-player-into-web-pages

In this first example we will describe how to embed flowplayer into a page and play ‘progressive download’ (HTTP) content. See http://blog.mydeo.com/2009/01/12/streaming-vs-progressive-download-understanding-the-difference/ to find out more about ‘progressive download’ and ‘streaming’:

Download Flowplayer from http://flowplayer.org/download/index.html
Unzip everything and place them all in the same folder
You should have two .swf files in this folder now and a subfolder called ‘example’
Create an HTML file with your HTML editor and place it in the ‘example’ folder
Copy and paste the following code into the <head> tag in your HTML

<script type="text/javascript" src="flowplayer-3.1.0.min.js"></script>

Next, copy the following code into the <body> section of your HTML

<a
         href="YOUR URL GOES HERE"
         style="display:block;width:425px;height:300px;"
         id="player">
</a>
 
<!-- this script block will install Flowplayer inside previous A tag -->
<script language="JavaScript">
                flowplayer("player", "../flowplayer-3.1.0.swf");
</script>

Your video should now be playing when you open that HTML file.

This next example will show you how to embed the player and play a ‘streaming’ (RTMP) file.

Download Flowplayer from http://flowplayer.org/download/index.html
Download the RTMP plug-in for flowplayer from http://flowplayer.org/plugins/streaming/rtmp.html
Unzip everything and place them all in the same folder
You should have three .swf files in this folder and a folder called ‘example’
Create an HTML file with your HTML editor and place it in the ‘example’ folder
Copy and paste the following code into the <head> tag in your HTML

<script type="text/javascript" src="flowplayer-3.1.0.min.js"></script>

Next, copy the following code into the <body> section of your HTML

<div class="player_sample">

                  <a                          
                         style="display: block;height:400px;width:600px;background-color: #ffffff;border: solid 1px #ccc;" 
                         id="rtmp_player">
         </a>
         <!-- Note: the id="" property of the above tag (rtmp_player) must match the first parameter of the script below -->

           <script>
                $f("rtmp_player", "../flowplayer-3.1.0.swf", {
 
                   clip: { 
                       url: 'YOUR URL HERE - This is the end part of the URL that m3 give you, without the flv extention', 
                       provider: 'rtmp',
                       autoPlay: false
                        },
    
            plugins: {
                  rtmp: { 
                  url: '../flowplayer.rtmp-3.1.0.swf', 
                  netConnectionUrl: 'rtmp://fs.cdn.mydeo.net/a584/d1/u/m3/'  // This is the first part of the URL m3 gives you
                      }
                 }    
              });
                              
              </script>

             </div>

Now you need to change the URL to match the URL that m3 gives you for your flash video.

This should be all you need to get started with flowplayer. The player is completely customisable so for anyone who would like more information about please visit http://flowplayer.org. Their website is very well documented and has great code samples.

If you need help with this or anything else, please feel free to contact us on m3@mydeo.com

Read Full Post »

Need to make an embeddable player for your media?

Posted in Technical, tagged embed, players on March 4, 2009 | Leave a Comment »

You may not know it, but there is often a very simple way to embed most types of media into a web page, without the need for – sometimes expensive – 3rd party code.

We quite like this site http://cit.ucsf.edu/embedmedia/step1.php for a quick-and-easy wizard approach to produce code for embedding:

Windows Media
Flash
QuickTime
Real Media

We have tested the code produced by the wizard and it is all compatible with the m3 service. Just plug in your m3-hosted media URLs and away you go!

/Richard

Read Full Post »

Embedding Windows Media Player into web pages

Posted in Articles, Technical, tagged embed, html, m3, video, video streaming, windows media player on January 27, 2009 | 6 Comments »

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>

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:

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

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

-Specifies the playback rate. 0.5 equates to half the normal playback speed, 2 equates to twice.<param name=”ShowStatusBar” 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.

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>

Read Full Post »

www.mydeo.com

Posts Tagged ‘embed’

Flash video player generator

How to make a HTML5 player

Flowplayer Quick start guide

Need to make an embeddable player for your media?

Embedding Windows Media Player into web pages

Links

Top Posts

Categories

Tags

Recent Comments

Follow “www.mydeo.com”