SitePoint Sponsor

User Tag List

Page 1 of 6 12345 ... LastLast
Results 1 to 25 of 126
  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
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 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
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 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 Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you siasvam
    For your time and effort on our behalf however I check with my hosting provider and they informed me that our server is configured for
    the following MIME types are configured for apache for mp4 and ogg:

    application/mp4 mp4s
    application/ogg ogx
    audio/mp4 mp4a
    audio/ogg oga ogg spx
    video/mp4 mp4 mp4v mpg4
    video/ogg ogv
    video/vnd.uvvu.mp4 uvu uvvu
    Unfortunately even with those setting the issues with our videos is still present. Do you or any else have any more suggestions on how to resolve it.

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

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 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.

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

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

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

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jeffocal View Post
    I don't believe it is linking to youtube ...
    This is the code I see right now:

    Code:
    <a href="http://www.youtube.com/watch?v=sfN-7HczmOU"><strong><span style="font-size: small; color: #0080ff"><font size="3">What is time</font></span></strong></a>
    Seeing is believing.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    This is the code I see right now:

    Code:
    <a href="http://www.youtube.com/watch?v=sfN-7HczmOU"><strong><span style="font-size: small; color: #0080ff"><font size="3">What is time</font></span></strong></a>
    Seeing is believing.
    Unfortunately you are not seeing or understanding what we are tiring to accomplish.

    The link you mentioned in your post is in the table cell below the were we what the videos located on our local servers at http://www.theimagineershome.com/blog/video/ to play.

    As we mentioned in our original post

    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 using the script below

    We are asking for help because we cannot get the video to run using it (Please visit << http://www.theimagineershome.com/blog/?p=2519 >> to view error)

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

  15. #15
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,444
    Mentioned
    274 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 serve your porridge and then go out for a walk.

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

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jeffocal View Post
    Unfortunately you are not seeing or understanding what we are tiring to accomplish.
    OK, sorry, at the time I last looked all I could see was a YouTube link. Now I see what you mean.

    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 using the script below
    Flash is still supported in a lot of devices, and often, for maximum compatibility, a Flash version of the video is included in the list of available options. I haven't delved into this murky area much yet, but those links I gave above go into a lot of detail about how to set this up—with Flash fallbacks etc. At the moment, you don't have the <video> element on your page, so if you want to go that route, it would be worth updating the code. As I say, though, it's best to read through those articles I linked to to get a clear overview of what's involved here.

    An easy alternative, if this gets too much for you, is to upload them all to YouTube and just embed them on your page. It's super easy, and very reliable, as YouTube videos are optimized for viewing on all platforms.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    An easy alternative, if this gets too much for you, is to upload them all to YouTube and just embed them on your page. It's super easy, and very reliable, as YouTube videos are optimized for viewing on all platforms.
    Some of our videos do not appear on youtube or as in the case of the one we a trying to load on this page is not longer available on it which is why we prefer to have them available on our servers instead of having to rely on a third party.

    I have visit numerous site that such as the ones you mentioned in your post in an attempt to figure out what is wrong with our script Unfortunately I do not have a clue as to what they are telling me to do.

    My specialty is high end theoretical physics which may be why I find the down to earth functionality of html nomenclature so confusing

    That is why we need your help
    Jeff

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I've done a little digging, and played with the Video for Everyone code that is recommended. I ended up with this:

    Code:
    <video controls="controls" poster="http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg" width="320" height="240" autoplay>
       <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" />
       <!-- 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/10_what_is_time/what_is_time.jpg',{'url':'http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4','autoPlay':false}]}" />
     <img alt="My Movie" src="http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg" width="320" height="240" title="No video playback capabilities, please download the video below." />
           </object>
               <!-- Fallback Text -->
               Your browser does not appear to support the video element or Flash. Please download the video below.
    </video>
    <p><strong>Download video:</strong> <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4">MP4 format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.ogg">Ogg format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.webm">WebM format</a></p>
    It worked in FF, Chrome, Safari, Opera, iPhone and IE8, but it had a problem in IE9. After some investigation, it seems the problem is that you need to tell your server to allow certain types of files, such as mp4. You can do this in a .htaccess file.

    These are a tad messy, though. If you have access to your web server, look in your root folder and see if you can find a file there called .htaccess. If it's there, open it up and paste in this code, and save it:

    Code:
    AddType video/ogg .ogg
    AddType video/mp4 .mp4
    AddType video/webm .webm
    If there isn't a .htaccess file there already, you can just create one and then paste in that code.

    Sorry if that's all a bit confusing, but it confuses me too. There's no way around dipping your toe into these things if you want to manage your own website, though.

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

    I found the htacess files however i cannot open it. I've emailed my web provider and asked them to check it and add the information if it is not already there

    BTW should we included the following as part of the video script because that text is appearing in the table below the video when I tried to install it

    <!-- Fallback Text -->
    Your browser does not appear to support the video element or Flash. Please download the video below.
    </video>
    <p><strong>Download video/strong> <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4">MP4 format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.ogg">Ogg format</a> | <a href="http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.webm">WebM format</a></p>

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    I found the htacess files however i cannot open it.
    Hm, how were you accessing it?

    BTW should we included the following as part of the video script because that text is appearing in the table below the video when I tried to install it

    Nah, you don't really need it. It's just part of the 'video for everyone' setup that ensures there's a way for anyone—no matter how basic their device—have some way to access the fiels. But for practical purposes, it's not likely to be much use, so personally, I would leave it off.

  22. #22
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm still waiting to here from my web hosting provider regarding updating the htacess files however the script you provided works in all browser other than IE 9&10

    One question is there a way to disable the autoplay in the rss feed only. I have quite a few who access our blog from our feed << http://feeds.feedburner.com/theimagineershome/TbmO >> and if the autoplay is activated in it all of the video will start running when they open it. That would not only be confusing but also very irritating to our readers.

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You could always disable autoplay. Autoplay is generally horrid anyways. Youtube gets away with it by pointing to themselves and saying "well but we're a video site, that's all we do!" but I still set my browser to click-to-play. Nothing like opening a link in a new tab while continuing reading the current one, while listening to some tunes or a screen reader, and suddenly hearing some video going off simply because you opened a tab.

    But you might be able to set them to no autoplay which hits rss and then have javascript on your site to autoplay there, I suppose...

  24. #24
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    You could always disable autoplay.
    How would I shut of the autoplay on the script given to us earlier by
    ralph

    <video controls="controls" poster="http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg" width="320" height="240" autoplay>
    <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" />
    <!-- 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/10_what_is_time/what_is_time.jpg',{'url':'http://www.theimagineershome.com/blog/video/10_what_is_time/10_what_is_time.mp4','autoPlay':false}]}" />
    <img alt="My Movie" src="http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg" width="320" height="240" title="No video playback capabilities, please download the video below." />
    </object>

  25. #25
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,078
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Try removing the word autoplay from the video tags.
    As poes mentions, you could then reactivate them again using JS if need be.

    I don't normally like linking to W3Schools, but in this case, this page might actually help you somewhat: http://www.w3schools.com/TAGS/tryit...._prop_autoplay

    Off Topic:

    Anyone know if SitePoint has something like this I could link to instead.


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
  •