HTML5VIDEO FORAY: use videojs to get three different formats (mpg, ogg, webm) playing in all browsers
added on May 30, 2012 | permalink
Use videojs to get three different formats (mpg, ogg, webm) playing in all browsers
- getting at: http://videojs.com/
- built page:
<html>
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="videos/test.mp4" type='video/mp4'>
</video>
</body>
</html>
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="videos/test.mp4" type='video/mp4'>
</video>
</body>
</html>
- converting .mp4 to .ogg
- ffmpeg -i test.mp4 test.ogg
- http://ffmpeg.org/trac/ffmpeg/wiki/FilteringGuide
- or try this: ffmpeg -i test.mp4 -vf scale=512:-1 test.wmv
- browser compatibility: 70%
- chrome: plays well
- opera: plays well
- safari: plays well
- firefox:
- as file://.. if webm on top, plays well
- as localhost://...if webm on top,
plays without sound if ogg is on top
- IE9: plays but no CSS3 rounded corners, overlay bar is not correct
- NEXT: put in jquery and buttons to expand and retract size, also perhaps help screen with slide over effect