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

``sh
npm install --save videojs-landscape-fullscreen
`

Plugin Options

$3

`js
{
fullscreen: {
enterOnRotate: true, // Enter fullscreen mode on rotating the device in landscape
exitOnRotate: true, // Exit fullscreen mode on rotating the device in portrait
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.

$3

`js
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,
exitOnRotate: 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 (


export default Player
`

`js
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
}
}
`

$3

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.

`html



`

$3

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

`js
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();
`

$3

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

`js
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.