jgubman / videojs-theater-mode

Adds a "theater-mode" class to a passed in DOM element so apps can define theater mode in their local CSS

videojs-theater-mode

Button that adds a configurable class to a configured DOM element that can be used to put your video into "theater mode"

Installation

npm install --save videojs-theater-mode

Usage

To include videojs-theater-mode on your website or web application, use any of the following methods. After pushing the button, the options.className will be toggled on whatever DOM element you defined in options.elementToToggle. Also, the player will fire the 'theaterMode' trigger and you can respond to the theaterModeIsOn: true/false object any way you'd like.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-theater-mode.min.js"></script>
<script>
  var player = videojs('my-video');

  player.theaterMode({ elementToToggle: 'page', className: 'theater-mode' });

  player.on('theaterMode', function(elm, data) {
    if (data.theaterModeIsOn) {
      // do something
    } else {
      // do something else
    }
  });
</script>

Browserify/CommonJS

When using with Browserify, install videojs-theater-mode via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-theater-mode');

var player = videojs('my-video');

player.theaterMode({ elementToToggle: 'page' });

player.on('theaterMode', function(elm, data) {
  if (data.theaterModeIsOn) {
    // do something
  } else {
    // do something else
  }
});

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-theater-mode'], function(videojs) {
  var player = videojs('my-video');
  player.theaterMode({ elementToToggle: 'page' });

  player.on('theaterMode', function(elm, data) {
    if (data.theaterModeIsOn) {
      // do something
    } else {
      // do something else
    }
  });

});

License

MIT. Copyright (c) Jon <[email protected]>

videojs-theater-mode's Issues

Remove button effect on hover

Hi @jgubman

Please, would you have some tips on how to remove that 'shining' effect when hovering the theater mode button? I tried tweaking some of the css and the main plugin code, but the shining is still there.

Thanks

Change Button Placement

How do you change the tab order or button placement?

I tried this without success: var toggle =

player.controlBar.addChild('theaterModeToggle', options, 4);

Didn't work.

It is placing the button close to progress bar and far from the fullscreen button, which I'd like it to sit right in front of.

How can I move it or tell it to go before the fullscreen button?

Not Working

I have this on my page:

<script src="/videojs/videojs.theaterMode.js"></script>

The script is being called correctly.

player.theaterMode({ elementToToggle: 'page', className: 'theater-mode' });

player.on('theaterMode', function(elm, data) {
if (data.theaterModeIsOn) {
// do something
} else {
// do something else
}
});

That seems okay. But the button is blank, and when I click it I see the class changing properly. But absolutely nothing is happening on the page.

Am I missing something?

https://www.traileraddict.com/util/test-videojs5.html

Cheers
Ryan

VideoJS 6.4 support

Is there any intention to launch a new version supporting VideoJS 6.4 anytime soon? I've tried to use it but isn't working.

videojs v4

works with v4?