Hier nun eine simple Implementierung des HTML5 Video-Tags mit Flash Fallback. Mehr Infos unter https://videojs.com/.
Damit das Video auch auf dem iPad läuft müss auf die richtigen Einstellungen beim Encoden geachtet werden:
- H.264 Baseline Profile Level 3.0
- Auflösung unter 640 x 480 und Frameraten bis 30 Frames/Sec
- keine B Frames
- Bitraten bis 900kb
<!DOCTYPE html >
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="/scripts/video-js/video-js.css" rel="stylesheet" type="text/css" />
<!-- video.js must be in the html document head for older IEs to work. -->
<script src="/scripts/video-js/video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "/scripts/video-js/video-js.swf";
</script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360" poster="/media/video/sammy.png" data-setup="{}">
<source src="/media/video/sammy.mp4" type="video/mp4" />
<source src="/media/video/sammy.webm" type="video/webm" />
<source src="/media/video/sammy.ogv" type="video/ogg" />
<track kind="captions" src="/scripts/video-js/sammy.de.vtt" srclang="de" label="Deutsch" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
</body>
</html>