-
Notifications
You must be signed in to change notification settings - Fork 58
Major browsers compatibility test
After fresh install of refinerycms-videojs with autoloading js and css from CDN:
- video playing (webm) works in Opera 12.01 and Chrome 21
- doesn't work in Firefox 14, IE9 (and lower), Safari 5.05
I was not able to play video with autoloading js and css file. I was not able to play video with js in application.js manifest file. I think problem is that manifest file is appended at the end of body.
Solution is add js file to html head:
<%= javascript_include_tag 'videojs' %>
And link css files to application.css manifest After these changes, I was able to play webm video in Firefox 14.
Video playback in IE9 was also broken. Solution is change the video src path from relative to absolute path. Then video playback works, but if you don't use tool like qt-faststart to reorder some meta data in video, video will play from begining only when it is completely downloaded.
Video playback was broken in Safari 5.0.5. Solution is to upgrade to Safari 5.1.7. Video playback was tested and works with Flash v 11.3. All video src path must be relative or absolute path. Don't mix them.
- WebM (VP8) - works
- Mp4 (h.264) - no
- skip to unbuffered position: no
- skip to buffered position: no
- skip after whole video is downloaded: yes
- activate fullscreen: Yes, but stretched out only to browser's page canvas.
- deactivate fullscreen: yes
- WebM - no
- Mp4 - yes
- skip to unbuffered position: yes
- skip to buffered position: yes
- skip after whole video is downloaded: yes
- activate fullscreen: Yes, but playback starts from begining
- deactivate fullscreen: Yes, but playback starts from begining
- WebM - no (maybe with additional plugin installed)
- Mp4 - yes
- skip to unbuffered position: no
- skip to buffered position: yes
- skip after whole video is downloaded: yes
- activate fullscreen: yes
- deactivate fullscreen: yes
- WebM - yes
- Mp4 - no
- skip to unbuffered position: no
- skip to buffered position: no
- skip after whole video is downloaded: no
- activate fullscreen: yes
- deactivate fullscreen: yes
- problems with current and total playback time: "infinity:NaN"
- WebM - yes
- Mp4 - yes
The first source video tag will be used for playback.
- skip to unbuffered position: no
- skip to buffered position: no
- skip after whole video is downloaded: ?
Chrome don't buffer video, when video is paused. It saves your internet data.
- activate fullscreen: yes
- deactivate fullscreen: yes
So, if you want to take use of full browser compatibility, you should do:
- add videojs.js file to head section of html
- add css player files to css manifest
- use absolute path to video sources
- use qt-faststart utility to reorder metadata in h.264 file to be able to play video from begining, when buffering
- don't mix relative with absolute paths in source tags
- use both WebM(VP8) and Mp4(h.264) files
- if you want to prioritize WebM over Mp4 in Chrome, write webm source tag as first
Thanks Matho for this page