SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 125

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Need help embedding videos in html5

    We have been tiring to reformat all of the 150 educational flash videos on our site because it is no longer support in html5 and many of the new mobile browsers.

    We have already converted them to the following formats. mp4, webm, ogg which I have been told are the best ones suited for our purposes and installed a script below which we obtained on line.

    However we see the error message "invalid source" (Please visit << http://www.theimagineershome.com/blog/?p=2519 >> to view error) when we attempt to open it on the web.

    Could some please help by telling us why we are getting that error.

    Thank you

    Jeff



    Code:
    < table border="1" width="200" bgcolor="#333333" align="right">
    < tbody>
    < tr>
    < td>
    < video id="myvideo" controls="controls" autoplay="autoplay" poster="images/what_is_time.jpg">
    < source src="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4" type="video/mp4" >
    < source src="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.webm" type="video/webm">
    < source src="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.ogg" type="video/ogg">
    < /video></td>
    < /tr>
    < tr>
    < td>
    < p align="center"><span style="font-family: arial; color: #0080ff; font-size: small"><a href="http://www.youtube.com/watch?v=sfN-7HczmOU"><strong><span style="color: #0080ff; font-size: small"><font size="3">What is time</font></span></strong></a></span></p>
    < /td>
    < /tr>
    < /tbody>
    < /table>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi jeffocal. Welcome to the forums.

    What browser are you seeing that error in? The video works for me in Chrome, Firefox and Opera. It won't work in older IE browsers, though, which will require a Flash fallback.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    We are only seeing the error on the one article "Defining What Time is?" at http://www.theimagineershome.com/blog/?p=2519 in which we have attempted to load a video using the script mentioned in our original article. The error on that page is appearing on all browsers including Chrome, Firefox and Opera and IE10 on windows 8. Don't be confused by the fact that all of the videos on our other articles are functional because we have not yet tied to upgrade to run in the html5 format. Please remember we are trying to reformat all of the 150 educational flash videos on our site to one that is functional in html5, as many of the new mobile browsers possible and again if possible backwards compatible to the old browse such as Google, Chrome opera and previous version of IE

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    The What Time Is works fine for me in Firefox, Opera and Chrome (which are the ones I tested) on my Mac.

    Perhaps check out some of these articles for more info on using the <video> element:

    http://www.sitepoint.com/what-do-you...t-html5-video/
    http://designfestival.com/implementi...back-in-html5/
    http://www.webmonkey.com/2010/05/emb...s-using-html5/
    http://hibbard.eu/how-to-embed-video...e-using-html5/

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for checking it on your mac and referring me to those web sites however the video on the article "what is time" does not play on them or IE10 / 9 on systems running windows 7 or 8.

    I spent a some time trying to understand what they were telling me to do and tried to incorporate some of their suggestions into our video script but still could not get it to play on any system running windows because I have no clue as to what they are tell me to do.

    If anyone can post a script which can be used as a template to embedded videos which are playable in html5, as many of the new mobile browsers possible and again if possible backwards compatible to the old browses such as Google, Chrome opera and previous version of IE running windows I and the readers of our blog will be forever grateful.

  6. #6
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Hyderabad
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE9 and IE10 MP4 will work properly. I tested your videos. It seems that the MIME Type coming from server is not proper. If you are using Apache httpd server check 'AddType' and add the appropriate MIME types for MP4/Ogg (ogv/oga) and test it. Hope this should work. We already did this earlier.

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Hyderabad
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We had the same issue when we did this for our client. But it got solved on IE after adding the MIME type into apache. Try to embed other video (mp4) inside the video tag and see if it is working by writing a simple html page. I tested your video links by writing a simple html page. I got the same issue. But I replaced it with other video and it worked fine. Still I am confident it could be some server issue not the HTML.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Maybe there's something in how the video was encoded, if it is in fact the video with the problem. Or how the video file's own MIME was set.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am pretty sure it is a problem with the script on out page http://www.theimagineershome.com/blog/?p=2519 `because the videos runs if you load it directly from our server http://www.theimagineershome.com/blo...at_is_time.mp4

    One of our friends gave us the following script
    <embed
    width="320" height="240"
    <source src="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4" type="video/mp4" >
    <source src="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.webm" type="video/webm">
    <source src="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.ogg" type="video/ogg">
    </embed>

    However it is also non functional as you can see if you visit our page

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    At the moment it's linking to YouTube, although that link is broken. YouTube isn't a bad option, though. Just click the Share button under the video once it's uploaded and then copy the Embed code and paste it into your page.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't believe it is linking to youtube because the url of the video file we are using is located http://www.theimagineershome.com/blo...at_is_time.mp4 which is on our servers.

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    I'm not seeing any error message. There is an audio track "what is time?" which autoplays, but there is no accompanying video.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The markup is malformed, which cannot be helping, and the page never fully loads... in fact it even managed to freeze my browser! You should NOT have a space in your start tag after the left angle bracket the browser will think you are writing unescaped < and thus assuming &lt; NEVER a good idea!

    The large 25 MB file didn't help matters either have you anything smaller on a demo page minus all the junk...?

    I can get it to work, i.e. the lone VIDEO element itself, on a demo page minus any JavaScript (ONCE THE MARKUP IS FIXED) you see the physicist, that guy usually appears on the BBC, Professor Brian Cox. One important lesson to learn ensure you check your markup first... There may be other issues though like I said, it seems to work on a demo page if you write the markup correctly using; <VIDEO>....</VIDEO> so that has narrowed down one fault you had.

  14. #14
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The VIDEO element isn't closed it should have BOTH a start and end tag as was mentioned post #16, e.g. <video>...</video> . The invalid source error sounds like a CODEC issue with the movie file itself though I don't have either of those godforsaken browsers to test with so it could also be a browser peculiarity.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pullo

    I discovered something very interesting. When I used hardbake to convert the videos they run when loaded directly from its url << http://www.theimagineershome.com/blo...darkmatter.mp4 >> (have patience because it takes long time to load) like they did on the page you posted them on however it does not run when we try to load it from our web site http://www.theimagineershome.com/blog/?p=10

    This make me think part of the problem my be in our coding and I for the life of me cannot figure it out.
    Your help is sorely needed and will be greatly appreciated.

    Below is a copy of the script that is presently installed on our page. I'm reposting it because we have make serial attempts to repair it and we what to be sure that we are all looking at the current one.

    HTML Code:
    <video controls="controls" poster="http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg" width="320" height="240"><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4" type="video/mp4" /><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.webm" type="video/webm" /><source src="http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.ogg" type="video/ogg" /><!-- Fallback object using Flow Player --><object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="320" height="240"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashVars" value="config={'playlist':[ 'http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg',{'url':'http://www.theimagineershome.com/blog/video/7_darkmatter/7_darkmatter.mp4','autoPlay':false}]}" /> <img alt="My Movie" src="http://www.theimagineershome.com/blog/video//7_darkmatter/darkmatter.jpg" width="320" height="240" title="No video playback capabilities, please download the video below." /> </object></video>
    Last edited by Stevie D; Jan 27, 2013 at 13:38. Reason: CODE tags added

  16. #16
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pullo

    Could you a favor and check to make sure that we have correctly reformatted our video to your recommendations and recommend another program other than gspot that I can use to determine what the format of our videos are. For some reason I cannot get it to install on my windows 8 system.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by jeffocal View Post
    Could you a favor and check to make sure that we have correctly reformatted our video to your recommendations
    I just downloaded the file http://www.theimagineershome.com/blo...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.

    Quote Originally Posted by jeffocal View Post
    and recommend another program other than gspot that I can use to determine what the format of our videos are. For some reason I cannot get it to install on my windows 8 system.
    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/2...tives-to-GSpot
    Maybe it helps, but I can't make any comment about the programs they recommend.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Is this the file that is currently available under: http://www.theimagineershome.com/blo...darkmatter.mp4?

  20. #20
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes

  21. #21
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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/blo...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.

  22. #22
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can you recommend another code conversion software because the gspot status box tells me that Codec Status Undetermined after running handbrake.

    Jeff

  23. #23
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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.

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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?)

  25. #25
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.


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
  •