Latest on video on website

*McDuff* · 09-27-2012, 08:00 AM

I am now preparing several video's for distribution onto mobil phones as second phase of our project people and their landscape.. That page is just our web-copy of the real site specially designed for mobil content by our project partners.

All the video's wil be hosted on the partner site. That is, if they ever get around to figuring out how to do that. We have Premiere Pro and edited video for mobile phones will be exported in .3GP format (presumably the best across-platforms format).

We want these and different event videos running (proably in another format like .mp4) also directly on our own websites. My question now is what are recommendations, rules and restrictions for having video's on websites hosted by FQ. I am not talking about embedding youtube videos but placing our own videos directly on our own website.

In particularly, at the end of 2012, what is today's best format and file size for cross-brwoser use.

*johnfl68* · 09-28-2012, 12:28 AM

As far as I know, as long as the video files do not need to be served from a media server, and are in streaming download format, there are no issues with having video files on your website.

The only issue is that videos usually take up a lot of space and bandwidth, and you may easily use up all your bandwidth for your account here at FQ depending on how many videos and the amount of downloads.

I recently ran into this problem, and the way I solved it was to get a Amazon S3 account for the media. Then I added a External Subdomain (DS-ER) for my FQ domain. All the media files are in my Amazon S3 account in a "bucket" named "s3.mydomain.com" and the DS-ER with FQ was set up so that the subdomain "s3.mydomain.com" points to that bucket on Amazon's S3 servers.

All the standard webpages are at FQ as normal, but all the links for the media files use the subdomain address to point over to Amazon. So far this has been working well for me.

Besides the US located S3 servers, Amazon does have a European S3 site in Ireland (as well as a few other locations around the world).

The H.264 mp4 video format seems to be the most prevalent right now, and seems to have the broadest compatibility with phones, tablets, and pc's.

John

*McDuff* · 09-28-2012, 11:41 AM

John, thanks for the info. Could you put a link up for the video site, could not find it (or pm link)

H.264 mp4 definitely is the best format also quality-wise. However, our clients-tourists will download-view about 10 short videos spaced out along the trail. Quick downloading is therefore important, more important than HD quality; most phones here would not know what to do with that anyway.

That's why I thought about .3gp. which is less quality but a lot smaller also. And most mobile phones know how to handle .3pg.

**Kevin** · 09-28-2012, 01:31 PM

H.264 and mp4 are just the video codec and the container type. You can still use those while setting both the resolution and compression levels to whatever quality you want.

3GP support otoh, is pretty much limited to phones.

*McDuff* · 09-28-2012, 03:57 PM

Quote:

Originally Posted by Kevin

H.264 and mp4 are just the video codec and the container type. You can still use those while setting both the resolution and compression levels to whatever quality you want.

3GP support otoh, is pretty much limited to phones.

These videos will be purely destined for downloading to mobile phones through a special mobile content website. So we need to have the format and container that has the biggest support across different types of mobile phones without having to do much steps in between.

The original footage I am working on in Premiere Pro CS6, so it is easy to save the end result in two different formats: one for the mobile phones and one for use on normal websites.

Having said that, I am a complete newbie on video editing so I am still learning the terms etc.

*johnfl68* · 09-28-2012, 07:40 PM

McDuff:

The site I have that I am doing the Amazon S3 subdomain for media is setup special for Digital Signage, so not public and formatted for special use. I was just using that as an example that may help in your situation, or for others reading this thread.

When you encode videos in the H.264 mp4 format, usually most programs have a option that is typically labeled "progressive download" or "streaming download" which adds some information to the normal file that allows players to start playing the file after enough of it has started downloading. Of course there are many different software packages to choose from, so not sure what it would be called for what you are using.

Also, there is a PDF link on this page, which is a good primer H.264:

http://streaminglearningcenter.com/a...sentation.html

Hope this helps point you more into the right direction!

John

*McDuff* · 10-31-2012, 03:50 AM

Two grandchildren sick had me occupied for a few weeks (like me, their mother and father both work long hours but as director of a small non-profit outside season I have a bit more flexibility), hence the late reply.

I have the video's sorted out for our websites, but not for the mobile phones. I will post all of it on a different thread for easy referencing for other users.

FYI, I am using completely updated and even legal Premiere Pro CS6 on a specially designed video-editing computer.

*McDuff* · 11-02-2012, 07:23 AM

John, I looked a bit more into your recommendations and the streaming file. Interesting stuff, thanks. One thing is clear, I am keeping my quality and especially bit rates too high for web and mobile. Adobe premiere pro gives most export presets rates of well above 1 mbps, while I bring them down to around 1 mbps for normal web use on desktops. Seems I can go lower than that and also reduce audio quality a bit for smaller file size.

One point that really worries me. I checked one youtube video I could play on my mobile. I noticed that it did not have a http:// address but an rtsp:// URL. Quick check showed that the rtsp protocol has something to do with streaming live video, so maybe that is part of the problem? If so, that seems to be a server-side problem.

However, I am far out of my depth here, so maybe one of the FQ staff can jump in and comment on that??

As part of that direction of thinking, do the FQ servers have mod_h264_streaming installed? Not necessary for normal webvideos but it might (or might not, no idea) be handy - useful for delivering video to mobile phones. Just groping for ideas here.

*McDuff* · 11-02-2012, 02:59 PM

It works on a blackberry several years old. Since I did not ask my son earlier to try it, don't know if this was working all the time, or just the latest update in the css and htaccess files or the newer version of the video with different export settings. Whatever.

All the necessary AddType mime for video were there, but I added a few extra. Maybe the 4 year old Nokia 5800 xpressmusic and the same age E52 are just too old or I have wrong settings, don't know. However, if I cannot get a video without problem, chances are big my target group will not either, so we'll keep looking for a clean way to handle this.

*McDuff* · 11-05-2012, 03:49 PM

OK. It works on an apple as well, probably the latest coding adaptions.

. And I should get a better phone to try these things out.

1) I have six versions of the video, to cater for cross-platform problems.
The video mime types are added to the htaccess file residing in the same directory as where the pages are and, although probably not necessary, in the mobile css as well.

*** htaccess
AddType video/ogg .ogv
AddType video/mp4 .mp4
Addtype video/mpeg .mp4
AddType video/webm .webm
AddType video/3gp .3gp
AddType video/mov .mov
AddType video/quicktime .mov
AddType audio/ogg .oga .ogg
AddType audio/mpeg .mp1 .mp2 .mp3 .mp4
Addtype audio/webm .webm

2) There is a separate css file for the mobile content pages. The current css only mentions some body details including width=100% and the mime types.

3) I am now experimenting with a media query, not tried yet. That would be to make sure the screen is filled out with a perfect fit no matter the device. Got the idea from this page

In the head section:
<head>
<!DOCTYPE html>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<link media="Screen" href="css/mb.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/mb.css" type="text/css" rel="stylesheet" />

</head>

Would have never thought of that myself; too stupid. Like the Rawhide song goes, Don't try to understand 'em, Just rope 'em, throw, and brand 'em. (copy and paste in this case

).

Then in the body section:
<body>
<p align="center"><video width="427" height="240" controls preload autostart="true">
<source src="vid/M51A2_without_wheels_2.mp4" type="video/mp4">
<source src="vid/M-M51A2_without_wheels_1.3gp" type="video/3gp">
<source src="vid/M51A2_without_wheels_2.ogv" type="video/ogg">
<source src="vid/M51A2_without_wheels_2.mp4" type="video/webm">
<source src="vid/M51A2_without_wheels_1.mov" type="video/mov">
<source src="vid/M51A2_without_wheels_2.flv" type="video/flv">

<object data="vid/M-M51A2_without_wheels_1.3gp" width="427" height="240">

<embed src="vid/M-M51A2_without_wheels_1.3gp" width="427" height="240">

Your browser does not support the video tag. It may be due to the settings of your mobile phone</p>
</body>

The first set of video tags caters to modern phones and browsers using html5.

The object and embed tags below it are catering for older devices and older browsers. The last sentence show the user that he/she downloaded something but the video could not play.

I probably will put the video width also on a % basis instead of fixed pixels. Probably 90 or 100%. Did not try that yet because I cannot get video's to play through my local test server.