HTML5 Video Tag

Content
1

I have checked the Sitepoint book JUMP START HTML5: MULTIMEDIA BY TIFFANY B. BROWN for solution and I have checked internet with no luck so I am turning to this forum.

I placed a video “.mp4” file along with a “.webm” file on a web page. The video plays for me on Internet Explorer, Safari, Chrome, and Firefox but NOT on Opera. In Opera the player comes up along with the poster image, but it does not play. In attempt to solve this issue, then added a “.ogv” file to the others, but nothing changed.

On devices, I checked ipad and it runs there, but not on the android phone – I used firefox browser and I got a grey box with an X on it and I get the message that Your browser does not support the video tag

I can run the specific “webm” video and the “ogv” video locally using the Opera browser, but once I uploaded to the server they don’t work. I am thinking it has something to do with the way the file is being served by the server- can anyone share with me how to check?

When I go directly to the folder on the server (Windows Platform) via the browser – the “.mp4” file runs if I double click it but, not for the other 2 – I get “page cannot be found” message. I have deleted and uploaded several times with no change. Interestingly, the “.mp4” file runs for me when I double click it from within the Opera browser.

To Wrap Up – I need a cross-browser that works across browsers and devices.

Please help me understand where I am going wrong.

This is the code I am using –

<video controls loop width=“800” height=“450” poster=“img/commercial_poster.jpg” >
<source src=“video/GNCS2014.mp4” codecs=“avc1.42E01E, mp4a.40.2”'>
<source src=“video/GNCS2014.webm” type=‘video/webm; codecs=“vp8, vorbis”’>
<source src=“video/GNCS2014.ogv” type=‘video/ogg; codecs=“theora, vorbis”’ />
Your browser does not support the video tag.
</video>

2

Hi sauer. Welcome to the forums. :slight_smile:

One thing to try is adding this to your site’s .htaccess file, to make sure the server is allowed to run each format:

#Video MIME Types:
AddType video/m4v .m4v
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Our of interest, which version of Opera are you testing in? Do you have a live link to this?

3

Thank You so much for your response - I really appreciate it.

  1. I can’t seem to find the .htaccess file so I have reached out to the service providers and waiting on a response.

  2. Opera Version 12.00

  3. http://greaternewarkcharterschool.org/video.html

I have embedded an “mpg” file and didn’t experience any issues across major browsers. I really want to learn to use the HTML 5 Video tag

4

Does your web hosting account have a control panel of some sort?

5

Yes

6

Sometimes the .htaccess file is hidden unless you choose to view files starting with a dot. If there isn’t a .htaccess file, you can create one, too. Do you have CPanel?

7

Thank Your for your quick response. I did go in and made hidden file visible and I didn’t see it in there so I reached out to the providers but I still haven’t received a response. Yes, I do have a control panel

8

I created the .htaccess file and put the code you suggested and the video still doesn’t play on Opera. I also upgraded to Opera Version 12.16.

9

Hi sauer

Not sure if this will make any difference though you can give it a try.
I had a similar problem sometime back and my HTML5 videos didn’t show and wouldn’t play in Safari on mac.

I finally realised I needed an absolute path for the video to show and work.

Change all your videos from

video/GNCS2014.webm

to

http://www.sample.com/video/GNCS2014.webm

See if that helps.

Barry

10

OK, that was worth checking. Next thing: you need to tidy up your HTML a little bit. Try this:

<source src="video/GNCS2014.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<source src="video/GNCS2014.webm" type="video/webm; codecs='vp8, vorbis'">
<source src="video/GNCS2014.ogv" type="video/ogg; codecs='theora, vorbis'">

The other problem I see is that the second and third files throw a 404 error. The webm and ogg links seem to be broken, so make sure the files are actually in place.

11

Thanks Barry -

12

No problems, did it work?

13

Thanks again. I cleaned up the HTML as you suggested. Still no luck with

Yes, I experience the same thing, but I have checked and keep checking and they are there. I also deleted the videos and uploaded again and nothing.

I also tried before as Barry suggested, a direct path in the code for the videos but that wouldn’t work - of course, since I can’t access them myself using the direct path in the browser - I get what your getting.

This is the link I am currently working on - http://www.greaternewarkcharterschool.org/video2.html

14

I also tried before as you suggested with no luck - I can’t access the video using the direct path in the browser either.

This is the current link I am working on http://www.greaternewarkcharterschool.org/video2.html

15

The old code is still online—at least in the page you originally linked to. It has errors in it.

Could you double check that the .htaccess file is in place now, and that it contains what I posted in post 2?

16

http://www.greaternewarkcharterschool.org/video2.html

Works in Chrome
Your videos don’t have absolute path on the URL above.
I tried in Opera and just loads the image its exactly what happened to me.

If I load the direct video link in opera it works.
http://www.greaternewarkcharterschool.org/video/GNCS2014.mp4

Fix and update the URLs to absolute and try again.

17

It does now - still doesn’t run in Opera. It runs in Firefox, IE, Safari and Chrome but not in Opera.

18

Yes everything is now updated but like you, doesn’t work in Opera.
The only other solution I can suggest is maybe try reordering the videos…

mpg
webm
ogv

ogv
mpg
webm

ogv
webm
mpg

and so on…

Worth a try it might be trying to load the video which is not compatible with Opera first and causing conflict.
Something else you can cross off your list.

Barry

19

I asked the service provider where I can find the .htaccess file and his response was

"A .htaccess file will only exist in a Unix environment. Your accounts are on a Windows server platform. There is a Windows version of that same file called httpd.ini which you can use in a similar manner. "

I created a “httpd.ini” file and added your suggested code and uploaded it to the server and no difference -

20

Thanks Barry, tried but no luck.
If you look at the actual video folder online - its like the “webm” and the “ogv” are there but not really there if that makes any sense. The only one I can run there is the mp4 file.