0

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): enter image description here But this (the correct one) on Chrome (33.0.1750.146): enter image description here

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)

Charles
  • 48,924
  • 13
  • 96
  • 136
Damien Pirsy
  • 24,544
  • 6
  • 65
  • 77
  • I know that [Firefow relies on OS-supplied codecs to play patent-encumbered formats](http://stackoverflow.com/a/12203792/710446) like mp3 (and possibly mp4, then?), so FF on Ubuntu has different codecs from FF on Windows. Chrome, on the other hand, uses its own browser-supplied codecs. – apsillers Apr 10 '14 at 15:03
  • Do you have a link to where we could see the issue live? It looks like a display aspect ratio (DAR) problem ... – Arnaud Leyder Apr 10 '14 at 15:12
  • Unfortunately no, I don't have online examples. Are you saying it's due to the video encoding? But why it displays wrong so randomly? – Damien Pirsy Apr 10 '14 at 15:16
  • Please try set the width instead of `width="100%"` to `width="352px"` for test? – nstungcom Apr 10 '14 at 15:33
  • Same issue. The outer container (the black background) is resized, but the video still plays in the wrong proportions. – Damien Pirsy Apr 10 '14 at 15:38
  • it could be a file format issue but to be sure we need to have access to the mp4 source. Can you print a mediainfo of the file? – Arnaud Leyder Apr 10 '14 at 18:08

0 Answers0