Need help embedding videos in html5

**Pullo** · Jan 27, 2013 15:59

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

Here's the download link.

**jeffocal** · Jan 27, 2013 16:22

Pullo

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

**xhtmlcoder** · Jan 27, 2013 16:34

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

Code:

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

**jeffocal** · Jan 27, 2013 16:55

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

Do you want me to redirect this video file to http://media.w3.org/2010/05/sintel/trailer.mp4 this url to the one on my server at http://www.theimagineershome.com/blo...darkmatter.mp4

**xhtmlcoder** · Jan 27, 2013 17:12

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: http://media.w3.org/2010/05/sintel/trailer.mp4 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:

Code:

....

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

**jeffocal** · Jan 28, 2013 10:33

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

**jeffocal** · Jan 28, 2013 11:39

Xhtmlcoder

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

**Pullo** · Jan 28, 2013 14:29

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:

HTML Code:

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

**jeffocal** · Jan 28, 2013 15:38

Thanks Pullo

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

**jeffocal** · Jan 28, 2013 15:48

Originally Posted by Pullo

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:

HTML Code:

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

.

<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

**jeffocal** · Jan 28, 2013 16:36

Originally Posted by jeffocal

Thanks Pullo

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

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

**ralph.m** · Jan 28, 2013 17:11

Originally Posted by jeffocal

I tried to download the movie trailer however it tells me that I have to purchase "quick time pro" before I can.

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

**jeffocal** · Jan 28, 2013 17:25

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

**ralph.m** · Jan 28, 2013 17:29

Does it run in IE9?

**jeffocal** · Jan 28, 2013 18:13

No in windows 7

**ralph.m** · Jan 28, 2013 18:41

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.

**jeffocal** · Jan 28, 2013 19:24

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

**ralph.m** · Jan 28, 2013 21:21

Originally Posted by jeffocal

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

Yep, works fine.

**Pullo** · Jan 29, 2013 00:36

Good morning,

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

HTML Code:

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

HTML Code:

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

**ralph.m** · Jan 29, 2013 00:50

Off Topic:

Originally Posted by Pullo

It should be

src="http

Good catch, "Dave".

**jeffocal** · Jan 29, 2013 05:09

Ok the video plays.

But what does this all mean????

**Pullo** · Jan 29, 2013 05:28

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.

**jeffocal** · Jan 29, 2013 05:54

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

**Pullo** · Jan 29, 2013 06:12

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

**ralph.m** · Jan 29, 2013 06:17

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

User Tag List

Thread: Need help embedding videos in html5

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions