Need help embedding videos in html5

[jeffocal]

We have been tiring to reformat all of the 150 educational flash videos on our site because it is no longer support in html5 and many of the new mobile browsers.

We have already converted them to the following formats. mp4, webm, ogg which I have been told are the best ones suited for our purposes and installed a script below which we obtained on line.

However we see the error message "invalid source" (Please visit << http://www.theimagineershome.com/blog/?p=2519 >> to view error) when we attempt to open it on the web.

Could some please help by telling us why we are getting that error.

Thank you

Jeff

< table border="1" width="200" bgcolor="#333333" align="right">
< tbody>
< tr>
< td>
< video id="myvideo" controls="controls" autoplay="autoplay" poster="images/what_is_time.jpg">
< 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">
< /video></td>
< /tr>
< tr>
< td>
< p align="center"><span style="font-family: arial; color: #0080ff; font-size: small"><a href="http://www.youtube.com/watch?v=sfN-7HczmOU"><strong><span style="color: #0080ff; font-size: small"><font size="3">What is time</font></span></strong></a></span></p>
< /td>
< /tr>
< /tbody>
< /table>

[ralph.m]

Hi jeffocal. Welcome to the forums.

What browser are you seeing that error in? The video works for me in Chrome, Firefox and Opera. It won't work in older IE browsers, though, which will require a Flash fallback.

[jeffocal]

We are only seeing the error on the one article "Defining What Time is?" at http://www.theimagineershome.com/blog/?p=2519 in which we have attempted to load a video using the script mentioned in our original article. The error on that page is appearing on all browsers including Chrome, Firefox and Opera and IE10 on windows 8. Don't be confused by the fact that all of the videos on our other articles are functional because we have not yet tied to upgrade to run in the html5 format. Please remember we are trying to reformat all of the 150 educational flash videos on our site to one that is functional in html5, as many of the new mobile browsers possible and again if possible backwards compatible to the old browse such as Google, Chrome opera and previous version of IE

[ralph.m]

The What Time Is works fine for me in Firefox, Opera and Chrome (which are the ones I tested) on my Mac.

Perhaps check out some of these articles for more info on using the <video> element:

http://www.sitepoint.com/what-do-you...t-html5-video/
http://designfestival.com/implementi...back-in-html5/
http://www.webmonkey.com/2010/05/emb...s-using-html5/
http://hibbard.eu/how-to-embed-video...e-using-html5/

[jeffocal]

Thank you for checking it on your mac and referring me to those web sites however the video on the article "what is time" does not play on them or IE10 / 9 on systems running windows 7 or 8.

I spent a some time trying to understand what they were telling me to do and tried to incorporate some of their suggestions into our video script but still could not get it to play on any system running windows because I have no clue as to what they are tell me to do.

If anyone can post a script which can be used as a template to embedded videos which are playable in html5, as many of the new mobile browsers possible and again if possible backwards compatible to the old browses such as Google, Chrome opera and previous version of IE running windows I and the readers of our blog will be forever grateful.

[saisyam]

In IE9 and IE10 MP4 will work properly. I tested your videos. It seems that the MIME Type coming from server is not proper. If you are using Apache httpd server check 'AddType' and add the appropriate MIME types for MP4/Ogg (ogv/oga) and test it. Hope this should work. We already did this earlier.

[jeffocal]

Thank you siasvam
For your time and effort on our behalf however I check with my hosting provider and they informed me that our server is configured for
the following MIME types are configured for apache for mp4 and ogg:

application/mp4 mp4s
application/ogg ogx
audio/mp4 mp4a
audio/ogg oga ogg spx
video/mp4 mp4 mp4v mpg4
video/ogg ogv
video/vnd.uvvu.mp4 uvu uvvu
Unfortunately even with those setting the issues with our videos is still present. Do you or any else have any more suggestions on how to resolve it.

[saisyam]

We had the same issue when we did this for our client. But it got solved on IE after adding the MIME type into apache. Try to embed other video (mp4) inside the video tag and see if it is working by writing a simple html page. I tested your video links by writing a simple html page. I got the same issue. But I replaced it with other video and it worked fine. Still I am confident it could be some server issue not the HTML.

[Stomme poes]

Maybe there's something in how the video was encoded, if it is in fact the video with the problem. Or how the video file's own MIME was set.

[jeffocal]

I am pretty sure it is a problem with the script on out page http://www.theimagineershome.com/blog/?p=2519 `because the videos runs if you load it directly from our server http://www.theimagineershome.com/blo...at_is_time.mp4

One of our friends gave us the following script
<embed
width="320" height="240"
<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">
</embed>

However it is also non functional as you can see if you visit our page

[ralph.m]

At the moment it's linking to YouTube, although that link is broken. YouTube isn't a bad option, though. Just click the Share button under the video once it's uploaded and then copy the Embed code and paste it into your page.

[jeffocal]

I don't believe it is linking to youtube because the url of the video file we are using is located http://www.theimagineershome.com/blo...at_is_time.mp4 which is on our servers.

[ralph.m]

I don't believe it is linking to youtube ...

This is the code I see right now:

<a href="http://www.youtube.com/watch?v=sfN-7HczmOU"><strong><span style="font-size: small; color: #0080ff"><font size="3">What is time</font></span></strong></a>

Seeing is believing.

[jeffocal]

This is the code I see right now:

<a href="http://www.youtube.com/watch?v=sfN-7HczmOU"><strong><span style="font-size: small; color: #0080ff"><font size="3">What is time</font></span></strong></a>

Seeing is believing.

Unfortunately you are not seeing or understanding what we are tiring to accomplish.

The link you mentioned in your post is in the table cell below the were we what the videos located on our local servers at http://www.theimagineershome.com/blog/video/ to play.

As we mentioned in our original post

We have been tiring to reformat all of the 150 educational flash videos on our site because it is no longer support in html5 and many of the new mobile browsers using the script below

We are asking for help because we cannot get the video to run using it (Please visit << http://www.theimagineershome.com/blog/?p=2519 >> to view error)

< table border="1" width="200" bgcolor="#333333" align="right">
< tbody>
< tr>
< td>
< video id="myvideo" controls="controls" autoplay="autoplay" poster="images/what_is_time.jpg">
< 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">
< /video></td>
< /tr>
< tr>
< td>
< p align="center"><span style="font-family: arial; color: #0080ff; font-size: small"><a href="http://www.youtube.com/watch?v=sfN-7HczmOU"><strong><span style="color: #0080ff; font-size: small"><font size="3">What is time</font></span></strong></a></span></p>
< /td>
< /tr>
< /tbody>
< /table>

[TechnoBear]

I'm not seeing any error message. There is an audio track "what is time?" which autoplays, but there is no accompanying video.

[xhtmlcoder]

The markup is malformed, which cannot be helping, and the page never fully loads... in fact it even managed to freeze my browser! You should NOT have a space in your start tag after the left angle bracket the browser will think you are writing unescaped < and thus assuming &lt; NEVER a good idea!

The large 25 MB file didn't help matters either have you anything smaller on a demo page minus all the junk...?

I can get it to work, i.e. the lone VIDEO element itself, on a demo page minus any JavaScript (ONCE THE MARKUP IS FIXED) you see the physicist, that guy usually appears on the BBC, Professor Brian Cox. One important lesson to learn ensure you check your markup first... There may be other issues though like I said, it seems to work on a demo page if you write the markup correctly using; <VIDEO>....</VIDEO> so that has narrowed down one fault you had.

[ralph.m]

Unfortunately you are not seeing or understanding what we are tiring to accomplish.

OK, sorry, at the time I last looked all I could see was a YouTube link. Now I see what you mean.

We have been tiring to reformat all of the 150 educational flash videos on our site because it is no longer support in html5 and many of the new mobile browsers using the script below

Flash is still supported in a lot of devices, and often, for maximum compatibility, a Flash version of the video is included in the list of available options. I haven't delved into this murky area much yet, but those links I gave above go into a lot of detail about how to set this up—with Flash fallbacks etc. At the moment, you don't have the <video> element on your page, so if you want to go that route, it would be worth updating the code. As I say, though, it's best to read through those articles I linked to to get a clear overview of what's involved here.

An easy alternative, if this gets too much for you, is to upload them all to YouTube and just embed them on your page. It's super easy, and very reliable, as YouTube videos are optimized for viewing on all platforms.

[jeffocal]

An easy alternative, if this gets too much for you, is to upload them all to YouTube and just embed them on your page. It's super easy, and very reliable, as YouTube videos are optimized for viewing on all platforms.

Some of our videos do not appear on youtube or as in the case of the one we a trying to load on this page is not longer available on it which is why we prefer to have them available on our servers instead of having to rely on a third party.

I have visit numerous site that such as the ones you mentioned in your post in an attempt to figure out what is wrong with our script Unfortunately I do not have a clue as to what they are telling me to do.

My specialty is high end theoretical physics which may be why I find the down to earth functionality of html nomenclature so confusing

That is why we need your help
Jeff

[ralph.m]

I've done a little digging, and played with the Video for Everyone code that is recommended. I ended up with this:

<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>
           <!-- Fallback Text -->
           Your browser does not appear to support the video element or Flash. Please download the video below.
</video>
<p><strong>Download video:</strong> <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4">MP4 format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.ogg">Ogg format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.webm">WebM format</a></p>

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.

[jeffocal]

Thanks

I found the htacess files however i cannot open it. I've emailed my web provider and asked them to check it and add the information if it is not already there

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

<!-- Fallback Text -->
Your browser does not appear to support the video element or Flash. Please download the video below.
</video>
<p><strong>Download video/strong> <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4">MP4 format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.ogg">Ogg format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.webm">WebM format</a></p>

[ralph.m]

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.

[jeffocal]

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.

[Stomme poes]

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...

[jeffocal]

You could always disable autoplay.

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>

[Pullo]

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...._prop_autoplay

Off Topic:

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