embedded video for mobile content - Web Video Creation and Optimization forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

embedded video for mobile content

Making special pages with only video both for playing on pc as on mobiles

Robo

9:31 pm on Oct 25, 2012 (gmt 0)

10+ Year Member

For one of our projects, we are making several short 1-3 min videos. These videos will be hosted on our own servers and our project servers. Explicitly NOT on the YouTube etc video hosting. Each video will be in several formats (webm, mp4, ogv, 3gp) to cover as much as possible all browsers and hand-held devices.

Our main target group are tourists using their mobile phones to get short videos about the place they are at. Small shields with Beetagg and QR codes provide a direct link to these video pages.

What we would like to set up are special pages without the usual navigation and text etc but only the <video> tag with controls. Like you do not really download the video as file and then play it but access it directly. More or less the embedded video is the only content of the page and the page is the size of the video (like 720x576 or other sizes).

We should also be able to embed it on different pages from our sites like you would embed a youtube video.

Any idea how to set that up?

Robo

1:30 pm on Oct 28, 2012 (gmt 0)

10+ Year Member

Nobody?

LostOne

11:54 pm on Oct 28, 2012 (gmt 0)

10+ Year Member

Robo:

You really won't find many video folks around here. Too bad really, but it's more our advantage. Here's one site I've frequented from time to time...

[forums.creativecow.net...]

Robert Charlton

9:26 am on Oct 29, 2012 (gmt 0)

WebmasterWorld Administrator

10+ Year Member

Top Contributors Of The Month

Creative COW is one of the great digital video resources around... and let me make a suggestion to the Moderator of this forum that we allow it as an authoritative resource. Particularly for video encoding and transcoding issues, it's got some of the best information I've seen.

Be warned that some of these issues will reduce a strong man to tears.

Robo

9:01 am on Oct 31, 2012 (gmt 0)

10+ Year Member

I am registered with Creative Cow and their tutorials on these things are second to none. However, I thought that for the web-side coding this forum would be the place to go.

Here a text from what I posted at creativecow (no answer yet):

Mobile video content not playing on phone.

For our non-profit projects, I now have figured out and coded our sites to handle short videos we host ourselves (not via youtube or vimeo). I also exported the video as a .3gp format for mobile phones.

With our websites, I now have a separate page for mobile access, without all navigation stuff, headers and footers etc.

The idea is that through Beetagg or QR codes, visitors connect directly to these pages and get the video directly and full-screen on their phone with auto-start as well. It works through the link on a PC, but if I access the page through my phone, it only shows the alternate text "your browser does not recognize the video format.....etc". However, if I copy the same file from PC into the phone it will p[lay normally so the phone players installed recognize the format?

The code I use:
<body>
<p align="center"><video width="427" height="240" controls preload autostart="true">
<source src="vid/M-M51A2_without_wheels_1.3gp" type="video/3gp">
<source src="vid/M51A2_without_wheels_2.mp4" type="video/mp4">
<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_2.flv" type="video/flv">
Your browser does not support the video tag.</p>
</body>

Video is available in all five mentioned formats. Video types are defined and added in all .htaccess files and to be safe in css as well. It works in firefoxs on my pc, but not on two nokia smart phones (xpressmusic 5800 and N52). Any idea?

FYI, the video shown is amateur footage, later decided to be used on our museum site as well. The videos that are going to be on this project are better quality about nature and historic towns.

[edited by: travelin_cat at 6:56 pm (utc) on Oct 31, 2012]
[edit reason] Removed Direct Link [/edit]

LostOne

12:39 pm on Nov 5, 2012 (gmt 0)

10+ Year Member

Any answer over there Robo?

The only thing I dislike about Creative Cow is being moderated all the time! I've been a member for almost four years now and it takes a moderator to approve my messages.Maybe it has something to do with number of posts, I do not know. But then it does cater to real pros, which I am not...yet.

Robo

8:50 pm on Nov 5, 2012 (gmt 0)

10+ Year Member

LostOne, after some initial postings on CreativeCow, you can post directly. No clear answer yet there but I found out some things in the mean time. First, it works on an iPhone now as well, so probably part of the problem is that I am trying with too old phones or I have my settings wrong.

As to the solution, here goes:

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 mobile 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 and code from a site on mobile css tricks, did not try it out yet. Can I post their address?

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>

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.