Search code examples
javascriptjquerymethodsvideo.jsdimensions

Videojs width() and height() methods return error

I use Videojs to load a video player in a pop-up. But when I tried to use width() and height(), I get this error :

Chrome : Uncaught TypeError: this.el_.vjs_getProperty is not a function

IE11 : SCRIPT438: L’objet ne gère pas la propriété ou la méthode « vjs_getProperty »

Did I used them wrong ?

My code :

HTML Part

<body>
   <!-- hidden div -->
   <div id="dialog" style="display:none">
      <video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{"techOrder": ["flash", "html5"]}'></video>
   </div>
   <div>
      <span>Category</span>
      <ul>
         <li><a href="#" class="video" id="video_id">Item 1</a></li>
      </ul>
   </div>
</body>

JS Part

$( window ).resize(function() {
    height = $(window).height() / 100 * 90;
    width = $(window).width() / 100 * 90;   
});

$("a.video").button().on("click", function() {
    var id = $(this).prop('id');
    var div_dialog = $('#dialog');

    var player = videojs('player');
    player.src({ type : "rtmp/mp4", src : "rtmp://server.com/vod/&mp4:foo/bar/" + id + ".mp4" });
    player.width( width - 135 );
    player.height( height - 150 );

    // display pop-up
    dialog.dialog("option", "title", $(this).text());
    dialog.dialog("option", "height", height );
    dialog.dialog("option", "width", width );
    dialog.dialog("open");
});

EDIT : Jsfiddle here https://jsfiddle.net/snabow/b37z92g5/ I think there is a problem with jQuery. When I put thoses 4 lines ... :

    var player = videojs('player');
    player.src({ type : "video/mp4", src : "http://vjs.zencdn.net/v/oceans.mp4" });
    player.width( width - 135 );
    player.height( height - 150 );

... Out of the $(function() { ... } , it work.

Solution

  • I finaly found a way to make it work, here is the solution :

    var player = videojs('player', {}, function(){
    // Modification de la source du player
    player.src({ type : "video/mp4", src : "http://vjs.zencdn.net/v/oceans.mp4" });
    // Modification de la taille du player
    player.width(width - 35);
    player.height(height - 50);
});

    I think there was a conflict between videojs and jQuery ont width() and height() methods.