SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't get mp4 to work on a site

    I am working on adding a video to a web site for a grade school, but it won't play or appear to load. This has likely been covered, but the search didn't find it.

    The original was on YouTube, but the suggested videos started becoming ones not appropriate for young kids. Therefore, it was decided to put the video directly on the site. After a lot of work trying to get a DVD from the publisher, we finally went into YouTube and downloaded it by logging in with the user's ID and downloading from the video list. The result is an mp4 that works on the computer, but not the browser. I tried changing extensions, but my Mac has limited choices for movie editing.

    My coding is below, but I think the problem is with the video. Other than in Sitepoint's HTML5/CSS3 for the Real World book, this is my first video. Any help would be appreciated.

    HTML Code:
    <p><video width="540" height="405" preload="auto" controls poster="assets/images/index/2013-14/index26.jpg">
                    	<source src="assets/images/Sully-Christian-School-Centennial.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
                    </video></p>
    Test page: http://www.sullychristian.org/centennialtest.php

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It plays OK for me in Chrome and Safari for Mac, but not on FF or Opera. You need a couple of formats at least (H.264 and WebM), and you can use the free Miro converter to create various formats, although if the original video quality is not so good, it will be further reduced in this process. http://m.vid.ly/ is also another converter option.

    You can often download the video in various format from YouTube as well ... perhaps something to investigate. All the same, hosting on YouTube is a heck of a lot easier. I don't quite understand why you can't still host them on YouTube.

    Older browsers won't recognise the <video> element, so you'd need a Flash fallback to support them. http://mediaelementjs.com/ can help with all that, or you can check out a bunch of threads that provide fallback code, like this one: http://www.sitepoint.com/forums/show...udio-video-tag
    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."

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    This shows which browsers support what video formats:

    http://en.wikipedia.org/wiki/HTML5_v...rowser_support

    I've had success with this video conversion tool, though the one Ralph mentioned is probably fine too: http://www.freemake.com/free_video_converter/
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of Safari are you running Ralph? I'm on version 6 on Mac and just get a blank box with controls under it, the same with Chrome. Video conversion was my next question, so I can now get that done. The compatibility table will take some further study.

    Thanks for the help, now if I can get it to run in my browsers.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by vmtech View Post
    What version of Safari are you running Ralph?
    Version 6.0.5 (8536.30.1)
    Mounting Loin, 10.8.5
    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."

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a point behind on OS 10.7.5, but that's all. Thanks, working with the Miro Video Converter as I type.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, Safari and Chrome work, but Firefox and Opera don't. The Miro forums say it has trouble with ogv format quality, but not anything about function.

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    ralph.m:
    I don't quite understand why you can't still host them on YouTube.
    I suppose it is because of the "suggested related video's" on the end of the video, which are placed there by YouTube:



    But there is an escape if you embed the video on your site.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by vmtech View Post
    The Miro forums say it has trouble with ogv format quality, but not anything about function.
    Yeah, I wouldn't worry about ogg. MP4 and WebM formats should cover all bases these days, as both FF and Opera are happy with those.

    Quote Originally Posted by Francky View Post
    I suppose it is because of the "suggested related video's" on the end of the video
    Ah yes. I always turn those off when embedding YouTube vids.
    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. #10
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does Firefox need an extra extension that I missed reading somewhere? I have the three video types, not swf yet, but Firefox comes up with "No video with supported format and MIME type found." Opera only shows the controls and won't play anything.

    I did have suggested videos turned off for the embedded movies, but that doesn't do anything on YouTube. As soon as I see a YouTube video on a site, I click to view it on their site so I can watch it bigger and have it on my history if I want to see it again. I don't know how many people do the same, but the site owner wanted it off to be safe.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by vmtech View Post
    Firefox comes up with "No video with supported format and MIME type found"
    That would be because there's no video there:

    http://www.sullychristian.org/assets...entennial.webm

    File not found.

    Same for the ogg version:

    http://www.sullychristian.org/assets...Centennial.ogv

    I did have suggested videos turned off for the embedded movies, but that doesn't do anything on YouTube.
    No, it only works for YT videos embedded on web pages.

    As soon as I see a YouTube video on a site, I click to view it on their site so I can watch it bigger and have it on my history if I want to see it again. I don't know how many people do the same, but the site owner wanted it off to be safe.
    Not quite sure what you are saying here.
    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."

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gave the weekend off for this and am back to trying to get these videos working. Ralph said the bug for him is the video doesn't exist on the server, and I get the same "page not found" error when trying to go directly to the video in the browser. Unfortunately, I've uploaded them a couple times now via FTP with Transmit to the server. The files show as they should on the server in Transmit, but nowhere else. I don't know any reason why videos can't be uploaded via FTP, so any ideas on this one?
    Attached Images Attached Images

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    OK, the next thing to try is to make sure your server recognizes those media types. You can do this by placing the following code in your .htaccess file:

    AddType video/m4v .m4v
    AddType video/ogg .ogv
    AddType video/mp4 .mp4
    AddType video/webm .webm

    If you don't know what that means, have a look in the Transmit folder (right side) and see if there is a file called .htaccess. If so, open it and add the code above. I'm not sure if you can open it via Transmit, but if not, go into your hosting control panel and open it 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."

  14. #14
    Non-Member
    Join Date
    Jun 2012
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works fine on Internet Explorer. I think the issue is you need to use the file type that your server is compatible with. A .mp4 may seem universal but it varies from the user end.

  15. #15
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    @shansan:
    The problem is that the other file types don't appear, though they seem to be uploaded.

    @vmtech:
    Are you sure the .webm and .ogv files are uploaded to the /assets/images/ map (as called in the html)? Maybe Dreamweaver has put them somewhere else, because it aren't images?
    • You can check this with an unbiased FTP-program like FileZilla(client).

  16. #16
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For large files like these, I use Transmit for FTP instead of Dreamweaver, see the attachment a few posts earlier. The mp4 works fine on the browsers that support it, the problem is those that don't. I tried Ralph's solution with the .htaccess file, but I couldn't get anything to find one. I contacted the host and was told the server I'm on is an IIS Windows platform and doesn't use the htaccess file. The host's webmaster is also unfamiliar with webm and ogv file types, so I explained them and am now waiting to see if they will allow them to be added.

    The world of web gets to be a spiderweb of problems that need to be untangled and straightened out some days.

  17. #17
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    So it seems the Windows server is the culprit...
    But can you deliver the files to another stable, with an Apache server? Maybe a free host, just for these files?
    The files are called by the browser, so I think when the domain and path of the "not Microsoft" files are included in the html of your page, the files will be downloaded from the other server to the visitor without problems.

  18. #18
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The host agreed to add the file types as of late yesterday. The page and video are now working on all modern browsers. According to analytics, older browsers are not very common on this site, but getting a solution for those in shortly.

    Thanks for all the help everyone. This volunteer site has made me stretch my experience levels in several ways.

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad you've had some joy! In future, I recommend you steer towards Apache hosting, though.
    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."

  20. #20
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    IA
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I do for all sites I setup hosting on. This one was started before I took control of it and the owner doesn't want to change, at least for now.

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by vmtech View Post
    the owner doesn't want to change
    I feel your pain. After a few bad experiences, I decided not to get involved with anything involving Windows hosting. (Windows hosting may be fine for what it does, but all the tips and tricks etc. that I've learned over the years apply to Apache, and I just can't be bothered messing with an alien system that has a far smaller user base.)
    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."

  22. #22
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this useful to you? http://www.firecoresoft.com/convert-...4-to-webm.html
    if it is your video problem, you can have a try to convert mp4 video to html 5 video.


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
  •