Uploaded video is black

  1. I am able to upload videos from my iphone5 to my self-hosted WP blog, however, the videos show no video. They are black. The audio works, but there is no video. How do we fix this? This is frustrating to say the least.

  2. Got any examples? Which browser are you viewing the video in?

  3. Yup.. go here:

    tried it in chrome, safari and ie

  4. I see a birthday party :) But I'm on a Mac. Are you running the latest version of Quicktime?

  5. I can't see anything. I have 2 iphones - an iphone 5, and iphone 4, and ipad 2 and a PC laptop. I can't see video on any of my devices. The version of QT i'm running is the latest (I believe) 7.7.3. On my Apple devices, I can't even play the files. It just shows a play symbol with a line through it.

  6. Yeah, I see a line through the play button on my iPad mini as well. I'm guessing only certain browsers will play that type of codec.

    Does it work any better if you go to the app settings and change the video setting to HTML 4?

  7. Ok, I uploaded the same video after changing to HTML 4. I can the first frame of the video, but it isn't playing and there aren't any controls on the video to start, stop, pause, etc.

  8. so that's it? any plans to make this app any better? Any thoughts/ideas/suggestions?

  9. I created a ticket for this, but I think we're limited to what the browsers do with the video after the app uploads it.

  10. understood, however, I can't get it to work with HTML 5 on IE, Firefox or Chrome. What browsers can it work with?

  11. It looks like it must be something about your hosting. I uploaded the same video to my test blog and works fine:

  12. weird! any thoughts? is there a setting I should be looking at on the back end and/or within WP?

  13. Are you using mod_security? It looks like an apache thing, not even WordPress.

    When clients request a specific part of the file, the server ignores that and just sends the full file. Some browsers can deal with that, but apparently Safari can't

  14. Can you try renaming the file to end in .mp4 instead of .mov? Not sure if that'll help but I can't think of anything else right now

  15. RE: mod_security

    How do I do this? Also, do I open the site up to other security issues?

  16. Renaming the file didn't help. However, I did learn something new tonight. Upon right-clicking the video, then selecting open video in new tab I can see it perfectly in my browser as a quicktime video. For some reason, by default in the post I can't see it.

  17. One more thing - after uploading and creating the video post from my iphone, i went into the post to edit it to see how the code is entered. this is how it shows:

    <video src="" controls="controls" width="640" height="360">Your browser does not support the video tag</video>

    I don't think the site knows how to deal with the video src tag. I stripped it out for Test 3 and just made a link and left it in for Test 4.

    any thoughts?

  18. Maybe you can contact your hosting provider and ask them if there's anything in your server configuration that's making apache ignore partial content requests. You can reference this thread for details

  19. i'll do that and update the forum

  20. The host isn't much help. They suggested that I configure .htaccess to associate file types. any thoughts/suggests?

  21. Your server already recognises the file as a video file, so I don't think that's it

    koke@andy ~  $ curl -sI | grep Content-Type
    Content-Type: video/quicktime
  22. BTW, where is your blog hosted?

  23. godaddy

  24. I'm having the same problem. After I upload a video using the Wordpress iOS app (3.3.1), it inserts a video tag like the following into the post:

    <video src="http://.../" controls="controls" width="360" height="640">Your browser does not support the video tag</video>

    When I display the blog post in Chrome 24 on Windows 7, I see a blank area where the video should play. The control bar is visible at the bottom of the video, and the progress bar moves when I click play, and I even hear the audio - but the video area is blank. I see the same thing in Opera 12, except it doesn't play at all. In Firefox 18, I see a gray area where the video should be, no control bar, and the message "Video format or MIME type is not supported". In IE 9, I see a black area with a red X in it, and no control bar.

    In Safari 5 for Windows, however, it works.

    I tried copying the video tag to an html file on a separate web server, and I get the same results - so I don't think it's a server issue. Here's the page, if you want to try it:

    And the video tag:

    <video src="" controls="controls" width="360" height="640">Your browser does not support the video tag</video>

    The .mov file is an 8-second video I shot with my iPhone 5. I didn't do any editing to it, and just uploaded it from the phone to the Wordpress blog using the Wordpress iOS app.

    I noticed that in an earlier post in this thread, a bug was created for this, but the bug was then later changed to "trivial" priority with a comment saying it's a server-side issue. I don't think it's a server-side issue, but maybe someone can copy the file to their own server and try it.

    When I go to the following page and try the first three videos, Chrome has the same problem with the mp4 file, but it plays the .webm and .ogv files ok.

    This seems like a problem related to browsers and codecs, but since I can't do anything about the video being recorded or the browsers that people will view it in, the only solution I see is to change what's uploaded by the Wordpress iOS app. Maybe it can convert it to another format (or formats), upload all of them, and include src attributes to all of them in the video tag? Or maybe a plugin can be created for Wordpress itself? Not sure what the best solution is...

    Any ideas? Thanks!

  25. In the case of that ticket, it was a server side problem. I uploaded the exact same video to my server and worked perfectly.

    The server was not handling partial content requests properly, and browsers got confused about that.

    Try copying/downloading the video to your computer, and drag the file to the browser window. If it plays, it's your server. If it doesn't play, it might be the browser or the codecs (but since you say it plays ok in safari, I'd say it's the browser)

    Sadly, video on the web is still tricky. That's why we have videopress, and people use youtube/vimeo for their video hosting. They take care of all the server and codec problems for you

    iOS supports (a few) other codecs, but I think the best one is still H.264. For any other codec, the app would have to transcode the video (probably very slow, since I think H.264 is hardware optimized on iPhone), and the resulting file would be larger, requiring a slower upload. And you'd probably end up with the same problem anyway.

  26. Hi Jorge, thanks for the reply.

    Just because the file plays when dragged into the browser doesn't mean it's necessarily a server problem. There are lots of reasons why it could still be a browser problem, including the fact that the browser might not support the html that's used to play it. In fact, if I create an html link pointing directly to the .mov file, Chrome plays it fine. It just doesn't play it when it's in a video tag. Or at least, it doesn't play it with a video tag when it's in mp4 format -- it plays .webm and .ogv files fine.

    I'm not sure that's really a fair test though. When I drag the file in, or when I link directly to the .mov file, the video is displayed inside Chrome using the QuickTime plug-in. Right-clicking in the video produces a popup menu with options like "About QuickTime plug-in".

    But when it tries to play it with the video tag, it's completely different. Right-clicking in the blank video space brings up a Chrome menu with options like "Play, Mute, Loop, and Show Controls".

    That's probably not really the issue here though, so my apologies for nit-picking.

    Anyway, I agree that video on the web is tricky. But right now the iOS Wordpress app is really only supporting uploaded video in one browser, and that in itself seems worthy of a bug report to encourage more investigation into possible solutions.

    This problem seems to be a combination of the browser, the type of video being played, and the html tags being used. Since the Wordpress app is running on iOS, which only produces video one way, we can't (easily) change the video on the device, but maybe something can be done on the server side, after the video has been uploaded. Or maybe something can be changed with the html tags produced.

    We web developers work around problems like this all the time, so it just seems like we should encourage people to look into improving the current situation with the app. I'm surprised more people aren't complaining about it -- but maybe that's a testament to the number of people using Safari.

  27. Right, I was probably too extreme there.

    Like I said, in previous cases uploading the same video to a different server worked. But the problem is we haven't figured out exactly what breaks it. I know in that case it was related to the web server not handling partial requests correctly, but I don't know what setting triggered that behaviour.

    If I send you some credentials for a test blog, are you willing to upload that video there and see if it shows ok on your browser? Is your email at correct?

  28. Sure, I'd be glad to. And yes, that email address is correct.


  29. OK, you should have got an email with the username/password

  30. Yep, thanks. I created a new post "Test video upload" and uploaded the same video to it. But it appears the same way as my test -- it doesn't display in Chrome, IE, or Firefox -- only Safari works.

Topic Closed

This topic has been closed to new replies.

About this Topic