Page is a not externally linkable
Robo - 8:50 pm on Nov 5, 2012 (gmt 0)
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" />
<!--[if IEMobile]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen" />
<![endif]-->
</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.