I'm using the video.js jQuery plugin (http://videojs.com/) to play an mp4 video (I've also tried mediaelement.js and JWplayer, same issue). I cannot change the video format nor provide an alternative one.
The video specs are:
- Dimensions: 352 x 568
- Encoding: H.264
- Framerate: 25 fps
- Bitrate: 266 kbps
The code I'm using:
<video id="video_lezione" class="video-js vjs-default-skin" controls preload="none" width="100%" height="500px" data-setup="{}">
<source src="{{asset('documents/' ~ lezione.video)}}" type='video/mp4' />
</video>
<script src="{{asset('assets/js/video.js')}}"></script>
<script>
videojs.options.flash.swf = "{{asset('assets/js/video-js.swf')}}";
</script>
The problem is the video is rendered really unconsistently across browsers and OS. For example, I'm on Ubuntu 12.04 and see this on my FF (27.0.1):
But this (the correct one) on Chrome (33.0.1750.146):
On my other machine (Windows 7) the video plays fine in FF (same version!). Moreover, the same issue presents on a FF (v. 26) on a Mac (Maverick 10.9.2) while not on another (FF v. 27, Maverick 10.8.5 - the video plays well). On safari, the problem is still different, the video is shown at the framed at the center of the black background.
Seems like it depends on something else than the browser or the OS themselves, but I don't even know where to look for solutions.
If the website won't play well on a user screen, what can I tell them? Do they need to download some plugins, is it due to flashplayer, or something else? I browsed the bugs reported for videoJs but I saw nothing regarding this, and it's a difficult google search too (maybe I can't find the right terms)