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:
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.
Safari supports HTML5. If YouTube video doesn't play, try either disabling or uninstalling extensions like ClickToFlash.
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.
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With