What's the proper way to include multiple video.js plugins?

Question

I'd like to use two video.js plugins at the same time - videojs-resolutions ( https://github.com/vidcaster/video-js-resolutions) and videojs-watermark (https://github.com/xbgmsharp/videojs-watermark).

I can get one or the other working just fine, but if I try to use them together, whichever one is listed second in my source fails to work. For example, here are the initialization examples for those two plugins:

<script type="text/javascript">
         vjs('foo', {
            plugins: {
               resolutions: true
            }
         });
    </script>
<script>
      var player = videojs('foo');

      player.watermark({
         file: '/foo.png',
         xpos: 100,
         ypos: 100,
         xrepeat: 0,
         opacity: 0.5,
         }
      );
    </script>

I suspect the problem is that I'm using the wrong technique for initializing multiple plugins, and the second init is overwriting my original video object. I cannot for the life of me find any docs on this use case, although there are plenty of examples of how to register/setup a single plugin.

If you have an example of how to use multiple video.js plugins, I'd greatly appreciate seeing it.

Thanks -

Answer 1

Try

vjs('foo', {
  plugins: {
    resolutions: true,
    watermark: {
        file: '/foo.png',
        xpos: 100,
        ypos: 100,
        xrepeat: 0,
        opacity: 0.5,
    }
  }
});