Need help embedding videos in html5

HTML & CSS
41

I just downloaded the file http://www.theimagineershome.com/blog/video/7_darkmatter/7_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.

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/241127-Any-alternatives-to-GSpot
Maybe it helps, but I can’t make any comment about the programs they recommend.

42

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

43

Is this the file that is currently available under: http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4?

44

Yes

45

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

46

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

Jeff

47

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.

48

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.

49

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?)

50

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.

51

What happens if you download the video I converted and upload it to your servers?
Does it play then?

Here’s the download link.

52

Pullo

I downloaded our video directly from your site and loaded it to mine and we are still getting the invalid source error

53

Obviously I meant create a new stripped down page with basically only the VIDEO element:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>
      Sintel
    </title>
  </head>
  <body>
    <p>
      I'm the content
    </p><video controls="controls"><source src=
    "http://media.w3.org/2010/05/sintel/trailer.mp4" type=
    'video/mp4; codecs="avc1, mp4a"'> <source src=
    "http://media.w3.org/2010/05/sintel/trailer.ogv" type=
    'video/ogg; codecs="theora, vorbis"'>
    <p>
      Your user agent does not support the HTML5 Video element.
      Download: <a href=
      "http://media.w3.org/2010/05/sintel/trailer.mp4">Sintel</a>
    </p></video>
  </body>
</html>

We know this MP4 file (see MP4 link in this code sample) is correctly encoded in this example; thus you could use this as the reference file, and upload that MP4 “Sintel, the Durian Open Movie Project” trailer *.mp4 file in Binary of course and see if it runs on your server - using this post CODE as the new page. The control values are of course blank but you still should be able to use the UA (browser default) to enable the playing. I am trying to determine if it’s the file or code or server or browser.

54

I want to make sure I understand what you want me to do

Do you want me to redirect this video file to [B]http://media.w3.org/2010/05/sintel/trailer.mp4[/B] this url to the one on my server at http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4

55

Download that MP4 trailer file. Upload it to your server. Make a completely new page as per post #53 (copy-and-paste) if that is possible. So the new page only contains that code and see if it plays the Sintel movie trailer (the mp4 should be now uploaded to your server obviously).

Therefore in the code make sure you change:[FONT=courier new] http://media.w3.org/2010/05/sintel/trailer.mp4[/FONT] to the location you uploaded to, e.g. http://www.your_own_website.com/your_folder/trailer.mp4 thus the trailer will now be on your server, and the code will be linking to that new location/file on your site, etc.

For example the only bit you’d change is the link, the part in pink:

....

<video controls="controls"><source src=
    "[COLOR=#ff0066]http://www.theimagineershome.com/blog/video/trailer.mp4[/COLOR]" type=
    'video/mp4; codecs="avc1, mp4a"'> 
....
56

We made a test page to test our video file as you suggested << http://www.theimagineershome.com/test_video.htm >> however we are still getting an invalid source error when we try to load it. Any ideas

57

Xhtmlcoder

You may find this helpful the source file for the above video at http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4 runs when loaded directly from our survers.

58

Hi Jeff,

I’m afraid you might have misunderstood what xhtmlcoder is driving at.

We know that the video “http://media.w3.org/2010/05/sintel/trailer.mp4” is correctly encoded and will play in IE9 / 10.
You should download this file from the above address, upload it to your servers and include it in a simple HTML file as per post 53.

However, I just looked at the source code of the link you posted and I see:

<video controls="controls">
  <source src= "http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4" type='video/mp4; codecs="avc1, mp4a"'>
  ...
</video>

If you can ascertain if trailer.mp4 plays on your server or not, we have considerably narrowed the potential problem area.

59

Thanks Pullo

Robert I loaded the trailer to http://www.theimagineershome.com/test_video.htm and it runs.

60

<source src=“http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4” type=“video/mp4” />

Thanks again Pullo
I restored the our source code to its original configuration. I have been incorporating suggestions from everyone and trying to remember to return it back to the original when they don’t help. Thanks for reminding me