Need help embedding videos in html5

I found the htacess files however i cannot open it.

Hm, how were you accessing it?

BTW should we included the following as part of the video script because that text is appearing in the table below the video when I tried to install it

Nah, you don’t really need it. It’s just part of the ‘video for everyone’ setup that ensures there’s a way for anyone—no matter how basic their device—have some way to access the fiels. But for practical purposes, it’s not likely to be much use, so personally, I would leave it off.

I’m still waiting to here from my web hosting provider regarding updating the htacess files however the script you provided works in all browser other than IE 9&10

One question is there a way to disable the autoplay in the rss feed only. I have quite a few who access our blog from our feed << http://feeds.feedburner.com/theimagineershome/TbmO >> and if the autoplay is activated in it all of the video will start running when they open it. That would not only be confusing but also very irritating to our readers.

You could always disable autoplay. Autoplay is generally horrid anyways. Youtube gets away with it by pointing to themselves and saying “well but we’re a video site, that’s all we do!” but I still set my browser to click-to-play. Nothing like opening a link in a new tab while continuing reading the current one, while listening to some tunes or a screen reader, and suddenly hearing some video going off simply because you opened a tab.

But you might be able to set them to no autoplay which hits rss and then have javascript on your site to autoplay there, I suppose…

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

<video controls=“controls” poster=“http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg” width=“320” height=“240” autoplay>
<source src=“http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4” type=“video/mp4” />
<source src=“http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.webm” type=“video/webm” />
<source src=“http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.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/10_what_is_time/what_is_time.jpg’,{‘url’:‘http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4’,'autoPlay’:false}]}” />
<img alt=“My Movie” src=“http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg” width=“320” height=“240” title=“No video playback capabilities, please download the video below.” />
</object>

Try removing the word autoplay from the video tags.
As poes mentions, you could then reactivate them again using JS if need be.

I don’t normally like linking to W3Schools, but in this case, this page might actually help you somewhat: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_av_prop_autoplay

Off Topic:

Anyone know if SitePoint has something like this I could link to instead.

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.

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/html/master/embedded-content-0.html#attr-media-autoplay

By the way, that link says the following:

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.

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

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.

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

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>

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.

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

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.

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>

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.

Hi Jeff

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/blog/video/7_darkmatter/7_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.

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

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/blog/video/7_darkmatter/7_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>

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.