SitePoint Sponsor

User Tag List

Page 2 of 5 FirstFirst 12345 LastLast
Results 26 to 50 of 125
  1. #26
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I actually meant to remove autoplay from the code before posting here. The reason I had the autoplay attribute in there was because on one website it was suggested as a fix for the video not playing in IE9. But it didn't help in this case, so I meant to remove it.

    It's better not to have it there, in my opinion. I often suffer what poes described—opening a few tabs and suddenly thee are multiple sounds screeching at me because some videos in those tabs started to play. When someone visits your page, you don't know that they want to watch the video (or even download it—they may be on a mobile). You really should leave the choice up to them.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  2. #27
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by jeffocal
    How would I shut of the autoplay on the script given to us earlier by
    ralph
    For later reference... in the following line of code:
    <video controls="controls" poster="http://www.theimagineershome.com/blog/video/10_what_is_time/what_is_time.jpg" width="320" height="240" autoplay>

    autoplay here is a shortened form of autoplay="autoplay" (in the above code, controls="controls" can also be shortened to just controls).
    They are boolean attributes. When it exists in the code, it means it is true. You can remove it entirely, which means it's false. I'm not sure if you can do autoplay="false" or controls="false" though. Would have to ask. In the JS that Pullo posted, that's actually setting the value of false so it works, but I dunno if in markup it still really makes it false...

    http://www.w3.org/html/wg/drafts/htm...media-autoplay

    By the way, that link says the following:
    Quote Originally Posted by w3c
    Note: Authors are urged to use the autoplay attribute rather than using script to trigger automatic playback, as this allows the user to override the automatic playback when it is not desired, e.g. when using a screen reader. Authors are also encouraged to consider not using the automatic playback behavior at all, and instead to let the user agent wait for the user to start playback explicitly.
    The first part of that really, really, really gets under my skin. They recommend the same for autofocus. Guess what? Browser vendors haven't gotten off their duffs yet. Users can turn off Javascript, but they cannot turn off most of these new HTML5 features. The above is not true. It is hoped that some day in the future, the above will be true. Like, when I get my moving sidewalks and my flying car and my robot maid.

  3. #28
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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
    We added the lines

    AddType video/ogg .ogg
    AddType video/mp4 .mp4
    AddType video/webm .webm

    to our htacess file on the root directory however we are still getting the invalid source error in IE 9 & 10 Please visit http://www.theimagineershome.com/blog/?p=10 to see the error.

    Jeff

  4. #29
    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.

  5. #30
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    Ralph

    We added the following lines to our htacess file as you suggested. However we are still seeing the error code invalid source when we try to play them in IE 10 & 9 running on windows 8
    Type video/ogg .ogg
    AddType video/mp4 .mp4
    AddType video/webm .webm
    Please go to << http://www.theimagineershome.com/blog/?p=10 >> to see what we are seeing

    A very frustrated Jeff

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

    We added the video tag as you suggested (Please see below) however we are still receiving the error code invalid source in IE 10 & 9 in windows 8 Please visit << http://www.theimagineershome.com/blog/?p=10 >> to see how it is performing

    <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." />
    </video></object>

  7. #32
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Hey Jeff,

    So, the good news is, I got it working!
    It seems to have been a codec issue, as was suggested by @xhtmlcoder ; in post 29.

    But before we get too excited, please check that it works for you.
    Here's a link, where, using IE 9 or 10, you can see your video still showing the original error, alongside my version of the same video (hopefully) playing nicely.

    To achieve this I used HandBrake to convert your version of the video from the "MPEG-4 Video" codec to the "H.264/MPEG-4 AVC" codec.
    After that it played just fine.

    The settings I used are detailed here.
    Look under the section "Encoding H.264 Video with HandBrake"
    (I also had to rename the file from .m4v to .mp4)

    So, I hope that helps somewhat.

  8. #33
    SitePoint Enthusiast
    Join Date
    Jan 2013
    Posts
    57
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for pullo for taking the time to post a working copy of our video and yes it does help a great deal

    However I download handbake as you suggested used it to convert the file to H.264 and reloaded it to our server but we are still receiving the error invalid source. You mentioned that you had to change the file extension. The file I uploaded has the extension mp4. (7_darkmatter.mp4) Is that correct and if not what should it be.
    Jeff

  9. #34
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Well done, Pullo. My next suggestion was going to be to check the encoding ... but I wasn't sure what to suggest in terms of changing it.

    @jeffocal: If you use the code you already have, just switch this at the end:

    Code:
    </video></object>
    to this:

    Code:
    </object></video>
    When I said Yes to cutting the code above, I didn't notice that the closing <video> tag was in there.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

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

    I made the change

    Jeff

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

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

    Could you please post the script you used to upload the video because the one I have been using does not seems to be working the way it should.

  12. #37
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Hi Jeff

    Quote Originally Posted by jeffocal View Post
    Could you please post the script you used to upload the video because the one I have been using does not seems to be working the way it should.
    Sure thing.
    I think it's easiest if I detail the steps I took from start to finish, so here goes:
    • Using IE10 I downloaded the video from your servers. To do this I opened the URL http://www.theimagineershome.com/blo...darkmatter.mp4 directly in the browser and IE asked me if I wanted to open or to download the file. I chose download.
    • I then opened the mp4 file using a freeware program called GSpot (unfortunate name, I know). It is a portable file (i.e. requires no installation) and is available here.
    • GSpot told me that the mp4 file was encoded using the "MPEG-4 Video" codec (as well as a bunch of other information).
    • I then closed GSpot, and opened the video in the latest version of HandBrake (available here).
    • In HandBrake, from the presets on the right hand side, I selected "iPhone & iPod Touch"
    • I also put checks in the "web-optimized" check box and the "Keep Aspect Ratio" check box.
    • I then changed to the video tab and selected "Avg Bitrate (kbps)" to be "1500" and put a tick by "2-Pass Encoding"
    • I then pressed the "Start" button at the top of the window and the program converted the file into "7 Darkmatter-1.m4v"
    • Once the conversion was complete, I renamed the file to "7 Darkmatter-1.mp4"
    • Just to be on the safe side, I then re-check the codec using GSpot and ensured it was now "H.264/MPEG-4 AVC". (It was).
    • I then embedded the video with the following code in a web page, uploaded it to my server for good measure, and ensured I could view it using IE10.
    • For the upload I used FileZilla with its standard settings.
    HTML Code:
    <video controls="controls" poster="http://www.theimagineershome.com/blog/video/7_darkmatter/darkmatter.jpg" width="320" height="240">
      <source src="darkMatter.mp4" type='video/mp4'/>
    </video>
    Hopefully this will help you identify any potential areas of difficulty you are having.

  13. #38
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You could just save Pullo's version and upload it to your site.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #39
    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

  15. #40
    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.

  16. #41
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 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.

  17. #42
    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

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

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

  20. #45
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 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.

  21. #46
    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

  22. #47
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 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.

  23. #48
    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)
    Maybe; VLC media player, might be of some use. I am also wondering if the 'codec' value wants adding for example: type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' . Ideally though a demo page should be created with just the VIDEO element covering the MP4 file, as I am assuming this is the only file of concern with relation to MSIE, again it may depend upon what mulimedia codecs are installed on your OS for successful video playback.

  24. #49
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 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?)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  25. #50
    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
  •