videojs-landscape-fullscreen-2

    11.1.0 • Public • Published

    videojs-landscape-fullscreen

    Fullscreen control:

    • Rotate to landscape to enter Fullscreen
    • Always enter fullscreen in landscape mode even if device is in portrait mode

    Installation

    npm install --save videojs-landscape-fullscreen

    Plugin Options

    Default options

    {
      fullscreen: {
        enterOnRotate: true,         // Enter fullscreen mode on rotating the device in landscape
        alwaysInLandscapeMode: true, // Always enter fullscreen in landscape mode even when device is in portrait mode (works on chromium, firefox, and ie >= 11)
        iOS: true //Whether to use fake fullscreen on iOS (needed for displaying player controls instead of system controls)
      }
    };

    Usage

    To include videojs-landscape-fullscreen on your website or web application, use any of the following methods.

    React

    import React, { Component } from 'react'
    import videojs from 'video.js'
    import 'video.js/dist/video-js.css'
    
    // initialize video.js plugins
    import 'videojs-youtube'
    import 'videojs-landscape-fullscreen'
    
    class Player extends Component {
      componentDidMount() {
        // instantiate Video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
          console.log('onPlayerReady', this)
        })
        
        // configure plugins
        this.player.landscapeFullscreen({
          fullscreen: {
            enterOnRotate: true,
            alwaysInLandscapeMode: true,
            iOS: true
          }
        })
      }
    
      // destroy player on unmount
      componentWillUnmount() {
        if (this.player) {
          this.player.dispose()
        }
      }
    
      // wrap the player in a div with a `data-vjs-player` attribute
      // so videojs won't create additional wrapper in the DOM
      // see https://github.com/videojs/video.js/pull/3856
      render() {
        return (
          <div>
            <div data-vjs-player>
              <video ref={node => (this.videoNode = node)} className="video-js" />
            </div>
          </div>
        )
      }
    }
    
    export default Player
    import React from 'react'
    import Player from '../components/Player'
    
    // Or Use React-Hooks
    export default class Index extends React.Component {
      render() {
        const videoJsOptions = {
          techOrder: ['youtube'],
          autoplay: false,
          controls: true,
          sources: [
            {
              src: 'https://www.youtube.com/watch?v=D8Ymd-OCucs',
              type: 'video/youtube',
            },
          ],
        }
    
        return <Player {...videoJsOptions} />
      }
    }

    <script> Tag

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

    <script src="//path/to/video.min.js"></script>
    <script src="//path/to/videojs-landscape-fullscreen.min.js"></script>
    <script>
      var player = videojs('some-player-id');
    
      player.landscapeFullscreen();
    </script>

    Browserify/CommonJS

    When using with Browserify, install videojs-landscape-fullscreen 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-landscape-fullscreen');
    
    var player = videojs('some-player-id');
    
    player.landscapeFullscreen();

    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-landscape-fullscreen'], function(videojs) {
      var player = videojs('some-player-id');
    
      player.landscapeFullscreen();
    });

    Pull Requests

    Feel free to open pull requests as long as there are no major changes in api surface area.

    Install

    npm i videojs-landscape-fullscreen-2

    DownloadsWeekly Downloads

    8

    Version

    11.1.0

    License

    ISC

    Unpacked Size

    12.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • rtritto