Video.js checks whether sources are playable and both displays a message to the user and logs an error to the console. In Google's mobile friendly test and related tools, this message and error is triggered because their test browser's video element does not support any video formats. Some Video.js users are concerned about the æsthetics of the rendered preview within the tools and whether this might have an SEO impact.
Adds a suppressNotSupportedError option, defaulting to false. If set to true, if no sources are playable the error is deferred to the first human interaction (click or touchstart) but cleared if a loadstart occurs.
Adds a new PictureInPictureToggle component in the controls bar of the player. It depends on videojs-font 3.2.0 (videojs/font#41) for icons.
Final spec piece from #5824.
On browsers that implement the Unprefixed Fullscreen API, pass a FullscreenOptions dictionary to requestFullscreen.
Add `fullscreenOptions` option with default value of `{navigationUI: 'hide'}` to player.
See https://fullscreen.spec.whatwg.org/#dictdef-fullscreenoptions
Extend keyboard support for the SeekBar, and pass unhandled keydown events from components back to the player.
Switch from raw keycodes to the keycode module.
Using `userActions.hotkeys`, which can either be a function to match the hotkeys plugin, or an object with properties like `fullscreenKey`, see the documentation for more info.
This is currently off by default, we will consider turning it on by default in the future, see #5765.
Fixes#4048, fixes#3022.
The `PlayToggle` has one option `replay` which can show or hide replay icon. This can be set by passing `{replay: false}` as the default behavior replay icon is shown after video end playback.
Example of how to hide a replay icon
```js
let player = videojs('myplayer', {
controlBar: {
playToggle: {
replay: false
}
}
});
```
Fixes#4802
Follow-up for #5471
This makes the breakpoints option and `breakpoints()` method clearer and introduces the responsive option and `responsive()` method, which will turn on the breakpoints.
The return value of `currentBreakpoint()` was simplified to only ever return a string (empty if none).
Also, added convenience methods: `responsive()`, `getBreakpointClass()`, and `currentBreakpointClass()`.
This adds a breakpoints option. By default, this option is false meaning this is an opt-in feature.
When passing true, it will use a default set of breakpoints. Or custom breakpoints can be passed if users do not like our breakpoints (or previously-existing style decisions).
- Add breakpoints option.
- Adds some new (currently unused) classes: vjs-layout-medium, vjs-layout-large, vjs-layout-x-large, and vjs-layout-huge.
- Add updateCurrentBreakpoint and currentBreakpoint methods to the player.
- Update css/components/_adaptive.scss
- Add sandbox/responsive.html.example
Closesvideojs/video.js#4371
Create a new createLogger module for better debugging. Each logger has its own log level and its own createLogger that will nest logs underneath them. `player.log` is also included, which logs the player id as part of the log statement. The history API also got a filter method.
For example:
```js
var log = videojs.log.createLogger('foo');
log('hello');
// > VIDEOJS: foo: hello
```
setSource is useful if you care to be fiddling with the source or doing some work depending on what source is set. However, sometimes, you don't need a setSource and want the middleware to always be selected.
Now, if setSource is missing, it will implicitly be included in the middleware chain.
This PR extends the `autoplay` to the player with a few options that should hopefully make working with browsers that disable unmuted autoplay by default easier.
The current boolean option will match current behavior and any unknown option will be treated as it does now. The new options are the string values `muted`, `play`, and `any`.
- `muted` will mute the element and call `play()` on `loadstart`,
- `play` will call `play()` on `loadstart()`, this is similar to the `autoplay` attribute
- `any` will call `play()` on `loadstart()` but if it fails it will try muting the video and calling `play()` again.
Restore hidden label text for screen readers that describes what the button control does.
Renames the Duration Time language item to Duration.
Deprecate controlText_ property.
Fix a typo in translations-needed.md.
Add a space in the hidden label for live-display, so that it doesn't run together with the visible "LIVE" indication.
Fixes#5135
The option for the player techCanOverridePoster is introduced in this commit. It allows techs to update the post whenever they like. isPosterFromTech_ is introduced as a private player field in order to track when a poster was set by a tech. This allows us to clear the poster whenever the tech is disposed of by the player.
Additionally, attempting to set the same poster more than once will have no effect / no changes will be made, since the poster is the same. This was done in order to stop triggering multiple posterchange events when calling player.poster(aPoster) with techCanOverridePoster set to true.
When a tech is disposed and a poster was set by it, unset the poster.
Pass a `canOverridePoster` option to techs to know whether techCanOverridePoster was set.
Fixes#4910.
When a component is disposed of, without calling ReactDOM.unmountComponentAtNode() on the data-reactroot in the destroyed component, the React.Component and videojs.Component (here EpisodeList and vjsEpisodeList) remain in memory.
The videojs.Component should listen for its dispose event and unmount its React root in the corresponding React.Component.
Using the default example, when disposing the player, a React DOMException was thrown because Video.js removed an element managed by React.
A simple solution is to wrap the player div in a separate div.
Fixes#4935.
Use ResizeObserver when available for better and more performant resizing information, otherwise, fall back to a throttled resize event on an iframe that's the size of the player.
Allows a video.js user to disable this by setting resizeManager: false as an option since the component will not be initialized.
Add a debounce util.
This reverts #4800 (e0ed0b5) because we end up getting two playerresize events with the dimension methods now.
This will allow middleware to interact with calls to play() from the tech. This will require a method of indicating to middleware previously run that a middleware down the chain has terminated or stopped execution.
* Adds middleware mediator method that runs middleware from the player to the tech and a second time back up to the player. This category was created because play is both a setter(changes the playback state) and a getter(gets a native play promise if available). This also has the ability to tell whether a middleware has terminated before reaching the tech.
* Adds a middleware.TERMINATOR sentinel value that is available on the videojs object
* Adds play to the allowedMediators
* Adds paused to the allowedGetters
* Adds a sandbox example of a play mediator middleware
Add the ability to initialize Video.js with an element named video-js. This is because sometimes, seeing the native element is undesirable, plus, it's cool to have our own element.
Can be used just like the video embed.
IE9 is supported but only with dynamic sources as the source element can only be used inside of the video element.
