SitePoint Sponsor

User Tag List

Results 1 to 25 of 25

Thread: HTML5 Video Tag

  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5 Video Tag

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi sauer. Welcome to the forums.

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

    Code:
    #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. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sauer View Post
    I can't seem to find the .htaccess file so I have reached out to the service providers and waiting on a response.
    Does your web hosting account have a control panel of some sort?

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sauer View Post
    Yes
    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. #7
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    If there isn't a .htaccess file, you can create one, too.
    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. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,727
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    video/GNCS2014.webm
    to
    Code:
    http://www.sample.com/video/GNCS2014.webm
    See if that helps.

    Barry
    The more you learn.... the more you learn there is more to learn.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, that was worth checking. Next thing: you need to tidy up your HTML a little bit. Try this:

    Code:
    <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. #11
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Barry -

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,727
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problems, did it work?
    The more you learn.... the more you learn there is more to learn.

  13. #13
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    OK, that was worth checking. Next thing: you need to tidy up your HTML a little bit. Try this:

    Code:
    <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.
    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. #14
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry View Post
    No problems, did it work?
    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. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sauer View Post
    I cleaned up the HTML as you suggested.
    The old code is still online—at least in the page you originally linked to. It has errors in it.

    Quote Originally Posted by sauer View Post
    I also tried before as you suggested with no luck - I can't access the video using the direct path in the browser either
    Could you double check that the .htaccess file is in place now, and that it contains what I posted in post 2?

  16. #16
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,727
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.greaternewarkcharterschoo...o/GNCS2014.mp4

    Fix and update the URLs to absolute and try again.
    The more you learn.... the more you learn there is more to learn.

  17. #17
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry View Post
    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.greaternewarkcharterschoo...o/GNCS2014.mp4

    Fix and update the URLs to absolute and try again.
    It does now - still doesn't run in Opera. It runs in Firefox, IE, Safari and Chrome but not in Opera.

  18. #18
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,727
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    The more you learn.... the more you learn there is more to learn.

  19. #19
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post

    Could you double check that the .htaccess file is in place now, and that it contains what I posted in post 2?
    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. #20
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by sauer View Post
    its like the "webm" and the "ogv" are there but not really there if that makes any sense.
    Can those video files be run independently of the browser? Perhaps the files themselves are corrupt.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Ew, Windows hosting [holds nose and flushes toilet] ...

    OK, see if something like this helps: http://stackoverflow.com/questions/6...re-iis-storage

  23. #23
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Can those video files be run independently of the browser? Perhaps the files themselves are corrupt.
    Thanks - I can run the specific “webm” video and the “ogv” video locally through the browsers - including Opera, 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- I am currently looking into this.

    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.

  24. #24
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ew, Windows hosting [holds nose and flushes toilet] ...

    OK, see if something like this helps: http://stackoverflow.com/questions/6...re-iis-storage
    Hey Ralph

    Reading the information on the link you provided - made me think of checking the IIS so I first checked out the service providers list of registered MIME types and didn't see the ".ogv" type or the "webm" type. I then went to the IIS Administration Console and there was an area there to add custom MIME types. So I added the 2 types and now they work on

    So in short - adding it through the files we discussed wasn't an option on this server but adding it through the console was. I really appreciate all your help and patience in helping me with this issue. I am so grateful to you, Barry and Stephen. People like you make the world a better place. I hope to pay it forward someday.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    That's fantastic! Glad it worked out, and thanks for the feedback. I guess we've all learned something about IIS. It's probably a bad habit I have of not asking what kind of hosting you have before suggesting things like .htaccess. Apache is the more common kind of hosting, but not the only one.

    In these days of HTML5 video, it's surprising that things like ogg and webm aren't allowed by default.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •