Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Video "Black Screen" on iPad

I'm building a website that has videos embedded within them. This website needs to cater for iPad users as well but I'm having trouble with the ol' video tag at the moment. I have a video that plays fine in browsers but not on an iPad unfortunately.

I'm just getting a black screen with the iPad, and no error message to speak of.

Here is my code for the video:

<video id="movie" width="790" height="250" controls >
    <source src="anim/intro.ipad.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="anim/intro.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
    var v = document.getElementById("movie");
    v.onclick = function() {
        if (v.paused) {
            v.play();
        } else {
            v.pause();
        }
    };
</script>

The videos were all created following tutorials about HTML5 video. They were all encoded using preferred iPad settings on Miro Video converter.

Just incase this matters (I'm not sure it will) I'm testing the video on an iPad simulator.

No matter what I do, I just can't get the video to play:

on iPad Simulator

like image 587
Dan Hanly Avatar asked Feb 22 '11 11:02

Dan Hanly


People also ask

Why Safari on IOS is not showing my HTML5 video poster?

Double-Click home button to get the task switcher outside of Safari, tap and hold on the safari icon until the kill button shows. Open safari (restarted). At this point, if you load the test page (the one with just one video), the poster will show.

Does Safari support HTML5 video?

Safari supports HTML5. If YouTube video doesn't play, try either disabling or uninstalling extensions like ClickToFlash.

Why video is not playing in HTML5?

If you come across an HTML5 page with the following error message “file not found,” then it means your browser doesn't have the proper video codec installed. For example, if you are using Google Chrome and you come across an HTML5 MP4 video, then you may get an error message because you don't have an MP4 codec.


2 Answers

Are you sure you got the encoding right?
Try this to test it:

<video src="anim/intro.ipad.mp4" controls>  
      Your browser does not support the video element.  
</video>  
like image 172
gnur Avatar answered Oct 24 '22 07:10

gnur


is your .htaccess file serving up the particular video files correctly?

Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers

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

Reference: Video for Everybody

Also, are you modifying the video element by using positioning? I've found that this creates this black video screen too.

like image 35
Petrogad Avatar answered Oct 24 '22 08:10

Petrogad