Need help embedding videos in html5

[ralph.m]

I actually meant to remove autoplay from the code before posting here. The reason I had the autoplay attribute in there was because on one website it was suggested as a fix for the video not playing in IE9. But it didn't help in this case, so I meant to remove it.

It's better not to have it there, in my opinion. I often suffer what poes described—opening a few tabs and suddenly thee are multiple sounds screeching at me because some videos in those tabs started to play. When someone visits your page, you don't know that they want to watch the video (or even download it—they may be on a mobile). You really should leave the choice up to them.

[Stomme poes]

How would I shut of the autoplay on the script given to us earlier by
ralph

For later reference... in the following line of code:
<video controls="controls" poster="http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg" width="320" height="240" autoplay>

autoplay here is a shortened form of autoplay="autoplay" (in the above code, controls="controls" can also be shortened to just controls).
They are boolean attributes. When it exists in the code, it means it is true. You can remove it entirely, which means it's false. I'm not sure if you can do autoplay="false" or controls="false" though. Would have to ask. In the JS that Pullo posted, that's actually setting the value of false so it works, but I dunno if in markup it still really makes it false...

http://www.w3.org/html/wg/drafts/htm...media-autoplay

By the way, that link says the following:

Note: Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.

The first part of that really, really, really gets under my skin. They recommend the same for autofocus. Guess what? Browser vendors haven't gotten off their duffs yet. Users can turn off Javascript, but they cannot turn off most of these new HTML5 features. The above is not true. It is hoped that some day in the future, the above will be true. Like, when I get my moving sidewalks and my flying car and my robot maid.

[jeffocal]

It worked in FF, Chrome, Safari, Opera, iPhone and IE8, but it had a problem in IE9. After some investigation, it seems the problem is that you need to tell your server to allow certain types of files, such as mp4. You can do this in a .htaccess file.

These are a tad messy, though. If you have access to your web server, look in your root folder and see if you can find a file there called .htaccess. If it's there, open it up and paste in this code, and save it:

AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

We added the lines

AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

to our htacess file on the root directory however we are still getting the invalid source error in IE 9 & 10 Please visit http://www.theimagineershome.com/blog/?p=10 to see the error.

Jeff

[xhtmlcoder]

The VIDEO element isn't closed it should have BOTH a start and end tag as was mentioned post #16, e.g. <video>...</video> . The invalid source error sounds like a CODEC issue with the movie file itself though I don't have either of those godforsaken browsers to test with so it could also be a browser peculiarity.

[jeffocal]

It worked in FF, Chrome, Safari, Opera, iPhone and IE8, but it had a problem in IE9. After some investigation, it seems the problem is that you need to tell your server to allow certain types of files, such as mp4. You can do this in a .htaccess file.

These are a tad messy, though. If you have access to your web server, look in your root folder and see if you can find a file there called .htaccess. If it's there, open it up and paste in this code, and save it:

AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

If there isn't a .htaccess file there already, you can just create one and then paste in that code.

Sorry if that's all a bit confusing, but it confuses me too. There's no way around dipping your toe into these things if you want to manage your own website, though.

Ralph

We added the following lines to our htacess file as you suggested. However we are still seeing the error code invalid source when we try to play them in IE 10 & 9 running on windows 8
Type video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm
Please go to << http://www.theimagineershome.com/blog/?p=10 >> to see what we are seeing

A very frustrated Jeff

[jeffocal]

Robert

We added the video tag as you suggested (Please see below) however we are still receiving the error code invalid source in IE 10 & 9 in windows 8 Please visit << http://www.theimagineershome.com/blog/?p=10 >> to see how it is performing

<video controls="controls" poster="http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg" width="320" height="240" >
<source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4" type="video/mp4" />
<source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.webm" type="video/webm" />
<source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.ogg" type="video/ogg" />
<!-- Fallback object using Flow Player -->
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="320" height="240">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[ 'http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg',{'url':'http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4','autoPlay':false}]}" />
*<img alt="My Movie" src="http://www.theimagineershome.com/blog/video//7_darkmatter/darkmatter.jpg" width="320" height="240" title="No video playback capabilities, please download the video below." />
</video></object>

[Pullo]

Hey Jeff,

So, the good news is, I got it working!
It seems to have been a codec issue, as was suggested by @xhtmlcoder ; in post 29.

But before we get too excited, please check that it works for you.
Here's a link, where, using IE 9 or 10, you can see your video still showing the original error, alongside my version of the same video (hopefully) playing nicely.

To achieve this I used HandBrake to convert your version of the video from the "MPEG-4 Video" codec to the "H.264/MPEG-4 AVC" codec.
After that it played just fine.

The settings I used are detailed here.
Look under the section "Encoding H.264 Video with HandBrake"
(I also had to rename the file from .m4v to .mp4)

So, I hope that helps somewhat.

[jeffocal]

Thank you for pullo for taking the time to post a working copy of our video and yes it does help a great deal

However I download handbake as you suggested used it to convert the file to H.264 and reloaded it to our server but we are still receiving the error invalid source. You mentioned that you had to change the file extension. The file I uploaded has the extension mp4. (7_darkmatter.mp4) Is that correct and if not what should it be.
Jeff

[ralph.m]

Well done, Pullo. My next suggestion was going to be to check the encoding ... but I wasn't sure what to suggest in terms of changing it.

@jeffocal: If you use the code you already have, just switch this at the end:

</video></object>

to this:

</object></video>

When I said Yes to cutting the code above, I didn't notice that the closing <video> tag was in there.

[jeffocal]

Thanks Ralph

I made the change

Jeff

<video controls="controls" poster="http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg" width="320" height="240"><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4" type="video/mp4" /><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.webm" type="video/webm" /><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.ogg" type="video/ogg" /><!-- Fallback object using Flow Player --><object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="320" height="240"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="config={'playlist':[ 'http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg',{'url':'http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4','autoPlay':false}]}" /> *<img alt="My Movie" src="http://www.theimagineershome.com/blog/video//7_darkmatter/darkmatter.jpg" width="320" height="240" title="No video playback capabilities, please download the video below." /> </object></video>

[jeffocal]

Pullo

Could you please post the script you used to upload the video because the one I have been using does not seems to be working the way it should.

[Pullo]

Hi Jeff

Could you please post the script you used to upload the video because the one I have been using does not seems to be working the way it should.

Sure thing.
I think it's easiest if I detail the steps I took from start to finish, so here goes:

• Using IE10 I downloaded the video from your servers. To do this I opened the URL http://www.theimagineershome.com/blo...darkmatter.mp4 directly in the browser and IE asked me if I wanted to open or to download the file. I chose download.
• I then opened the mp4 file using a freeware program called GSpot (unfortunate name, I know). It is a portable file (i.e. requires no installation) and is available here.
• GSpot told me that the mp4 file was encoded using the "MPEG-4 Video" codec (as well as a bunch of other information).
• I then closed GSpot, and opened the video in the latest version of HandBrake (available here).
• In HandBrake, from the presets on the right hand side, I selected "iPhone & iPod Touch"
• I also put checks in the "web-optimized" check box and the "Keep Aspect Ratio" check box.
• I then changed to the video tab and selected "Avg Bitrate (kbps)" to be "1500" and put a tick by "2-Pass Encoding"
• I then pressed the "Start" button at the top of the window and the program converted the file into "7 Darkmatter-1.m4v"
• Once the conversion was complete, I renamed the file to "7 Darkmatter-1.mp4"
• Just to be on the safe side, I then re-check the codec using GSpot and ensured it was now "H.264/MPEG-4 AVC". (It was).
• I then embedded the video with the following code in a web page, uploaded it to my server for good measure, and ensured I could view it using IE10.
• For the upload I used FileZilla with its standard settings.

<video controls="controls" poster="http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg" width="320" height="240">
  <source src="darkMatter.mp4" type='video/mp4'/>
</video>

Hopefully this will help you identify any potential areas of difficulty you are having.

[ralph.m]

You could just save Pullo's version and upload it to your site.

[jeffocal]

Pullo

I discovered something very interesting. When I used hardbake to convert the videos they run when loaded directly from its url << http://www.theimagineershome.com/blo...darkmatter.mp4 >> (have patience because it takes long time to load) like they did on the page you posted them on however it does not run when we try to load it from our web site http://www.theimagineershome.com/blog/?p=10

This make me think part of the problem my be in our coding and I for the life of me cannot figure it out.
Your help is sorely needed and will be greatly appreciated.

Below is a copy of the script that is presently installed on our page. I'm reposting it because we have make serial attempts to repair it and we what to be sure that we are all looking at the current one.

<video controls="controls" poster="http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg" width="320" height="240"><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4" type="video/mp4" /><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.webm" type="video/webm" /><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.ogg" type="video/ogg" /><!-- Fallback object using Flow Player --><object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="320" height="240"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="config={'playlist':[ 'http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg',{'url':'http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4','autoPlay':false}]}" /> <img alt="My Movie" src="http://www.theimagineershome.com/blog/video//7_darkmatter/darkmatter.jpg" width="320" height="240" title="No video playback capabilities, please download the video below." /> </object></video>

[jeffocal]

Pullo

Could you a favor and check to make sure that we have correctly reformatted our video to your recommendations and recommend another program other than gspot that I can use to determine what the format of our videos are. For some reason I cannot get it to install on my windows 8 system.

[Pullo]

Could you a favor and check to make sure that we have correctly reformatted our video to your recommendations

I just downloaded the file http://www.theimagineershome.com/blo...darkmatter.mp4
When I open it in GSpot, it is unfortunately showing the codec to be "MPEG-4 Video", which means that something didn't go right with the conversion process.

and recommend another program other than gspot that I can use to determine what the format of our videos are. For some reason I cannot get it to install on my windows 8 system.

Sorry, I only know GSpot.
I'm not a big audio / video buff and this is the only one I have any experience with.
I don't understand why it won't work on your Win8 box though.
Just download the archive from here: http://gspot.headbands.com/v26x/GSpot270a.zip
Then extract it to your Desktop and run it. You don't need to install it.
I'm running Win8, too and it works fine for me.

Incidentally, a quick Google search for "GSpot alternatives" threw up this: http://forum.videohelp.com/threads/2...tives-to-GSpot
Maybe it helps, but I can't make any comment about the programs they recommend.

[jeffocal]

I was able to get gspot running and checked that this time the file I upload was in the H.264/MPEG-4 AVC format however I am still receiving an invalid source when I try to view in on our site. Could you please check it again and see if is indeed in that format and if so help us understand why it is not functional.

Thanks

Jeff

[Pullo]

Is this the file that is currently available under: http://www.theimagineershome.com/blo...darkmatter.mp4?

[jeffocal]

Yes

[Pullo]

I just cleared my IE cache (so there could be no possibility that I was downloading a cached file).
I then downloaded http://www.theimagineershome.com/blo...darkmatter.mp4 from your server.
I opened it with GSpot and the codec is still showing as "MPEG-4 Video".

Unfortunately something seems to be going wrong in the encoding process.

[jeffocal]

Can you recommend another code conversion software because the gspot status box tells me that Codec Status Undetermined after running handbrake.

Jeff

[Pullo]

Again, unfortunately not with any degree of conviction.
I had to use HandBrake for a previous project and it has served me well ever since. I've never used anything else.
Which version of the software are you using?
Are you on a 32bit or 64bit Windows?

...

Racking my brains however, I remember them talking about video converters in SitePoint's HTML5 & CSS3 FOR THE REAL WORLD.
I have a copy here, so I just dug it out. This is from Chapter 5:

Miro Video Converter6 is free software with a super-simple interface that offers the
ability to encode your video into all the necessary formats for HTML5 video. It’s
available for Mac and Windows.7

Simply drag a file to the window, or browse for a file in the customary way. A dropdown
box offers options for encoding your video in Theora, WebM, or MPEG-4
format. There’s also an option for MP3 and a number of presets for device-specific
video output.

[xhtmlcoder]

Maybe; VLC media player, might be of some use. I am also wondering if the 'codec' value wants adding for example: type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' . Ideally though a demo page should be created with just the VIDEO element covering the MP4 file, as I am assuming this is the only file of concern with relation to MSIE, again it may depend upon what mulimedia codecs are installed on your OS for successful video playback.

[ralph.m]

Yes, I was going to suggest Miro, as it's the main one I'm aware of. People rave about it, although the one thing I don't understand is how to get good video quality when converting to various formats. I find they come out pretty poorly, but there may be something I'm doing wrong (... wrongly?)

[jeffocal]

Robert I tried your suggestion type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" of updating our code without success and Pullo of reloading a file after using Micro without success. My experiences tell me that when we figure this out will be asking ourselves why it took so long.