Need help embedding videos in html5

HTML & CSS
61

Robert

Please accept my apologizes for not following your directions. I tried to download the movie trailer however it tells me that I have to purchase “quick time pro” before I can. Can you refer me to another video file that I can download without having to purchase anything. If not I will bite the bullet and make the purchase.

Jeff

62

Maybe try another browser. In Chrome, if you right click on the video, there’s an option to Save Video As … (on Mac, at least).

63

Ralph

Thanks for the tip. I use firefox to download the file and with I even more remarkable I think I finial got it right the I loaded the trailer to my server and http://www.theimagineershome.com/test_video.htm it does not appear to be running

Jeff

64

Does it run in IE9?

65

No in windows 7

66

Maybe I misread your post #63. I thought you said it was running, so I was checking in which browsers. Hmm, the link you posted certainly works for me. Anyway, Robert felt this would provide useful information, so let’s see what he makes of this. :smiley:

67

Ralph

Could you please do me a favor and see if the video on http://www.theimagineershome.com/blog/?p=10 runs on your system

thanks Jeff

68

Yep, works fine. :slight_smile:

69

Good morning,

So I had a look at the page source http://www.theimagineershome.com/test_video.htm.
You have:

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

which is incorrect, as you are missing the opening quotation mark after the src attribute.

It should be

src="http

not

src=http

Can you add this quotation mark and check again that the video plays correctly.

Here’s the code for you to copy and paste:

<!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://www.theimagineershome.com/trailer.mp4" type='video/mp4; codecs="avc1, mp4a"'> 
      <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>
70

[ot]

Good catch, “Dave”. :smiley: [/ot]

71

Ok the video plays.

But what does this all mean???

72

It means that your server is capable of serving a correctly encoded mp4 video, which can then be played in IE 9 and 10.
Now that we have excluded a server configuration problem and we know that the code you are using to embed the videos is correct, we have narrowed the problem down considerably.
It now seems quite certain that you are getting the errors you are getting because the mp4 videos are not encoded “correctly”.
I’ll have a think about this, but in the meantime would be glad to hear suggestions from anyone else.

73

Ok the trailer video runs which means that something is not right with formatting of the video 7_darkmatter.mp4 we are uploading. We have already tried several times to reformat it and several others using Handbrake and microconverter to the “H.264/MPEG-4 AVC” codec and then reloaded them. Unfortunately all of them have the error invalid source when we try to run them. If it was only one video I would assume that the file was corrupted but I find it very hard to believe that all of the files on our server are corrupted. Therefore it must have something to do with how we are trying to convert them or the software we are using. In Handbrake the only choice we have in the “output setting container” drop down menu is mp4 is that correct. and if not what other options should we have.

A very bewildered theoretical physicists

74

As I was able to convert the video to the “H.264” codec and have it play correctly in IE 9 and 10, I conclude that something is going wrong in your conversion process.

Is your operating system 64 or 32 bit?
(I ask, because HandBrake has a 64bit and a 32bit version).

75

@jeffocal; Did you ever try Miro as an alternative? That’s the one I hear most about.

76

Pullo
I am running 64 bit and Ralph I have tried Miro

77

Ok.

What I could offer you, would be to walk you through converting the video using GSpot and HandBrake.
I could take a series of screen shots and upload them to my website, so you can follow the steps and see if there are any discrepancies between what I am doing and what you are doing.
Would this be something you are interested in?

BTW, I have only recently installed Win8 64-bit. I haven’t added any codec packs or anything, so it must be something simple.

78

Sure that sound like a plan Please post the url of your site

79

Ok.

Let’s start with the video.
I have downloaded it from here: http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4
It is 60.2 MB in size

Now, download GSpot from here: http://www.headbands.com/gspot/v26x/GSpot270a.zip
Unzip it to your desktop.
Double click on GSpot.exe so that the GUI opens and drag 7_darkmatter.mp4 on to it

You should see this.

Notice that the codec is “MPEG-4 Video”, which you can see in the top right hand corner.

So far, so good?

80

yes that is what I am seeing