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.
This splits up the `update` method into two methods: `update` and `write`. The new write method is only responsible for updating the text content of the tooltips. This is useful if you wan't to be able to override the behavior in some way but still wanted all the behavior in `update` and not take a double dom modification hit.
This allows the user to display multiple tracks when
`allowMultipleShowingTracks` is passed to the `TextTrackDisplay`.
Currently, multiple tracks must be shown programmatically and cannot be
done via the subtitles menus.
In addition, this adds two new classes to cue elements:
`vjs-text-track-cue` and `vjs-text-track-cue-${track.language}`. This
allows easier targetting with CSS.
Example usage:
```js
var player = videojs('example-video', {
textTrackDisplay: {
allowMultipleShowingTracks: true
}
});
```
Fixes#5798.
The play button stops working when recent versions of Google's Polymer is in use on the page because of the way Polymer synthesizes 'tap' events on non-touch devices. The Polymer tap code thinks the click event was ignored unless the DOM event's stopPropagation method is
called.
In chrome 70 the small play/pause control doesn't work with Polymer 1.x Gestures tap is used on document. Demo of issue: https://codepen.io/mscalora/pen/mQzQmpFixes#5624.
This is a rebased and updated PR of #5841.
We wanted to use the sass package as that's what the docs recommend. We also wanted to disable source maps that CDN-linked code won't try to download it.
Fixes#5841, fixes#5826.
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
This new events function allows you to listen to a list of events and know that only one handler will ever be called for the group. With just one event, it'll function similarly to `.one`.
Examples:
Single event
```
const player = videojs('some-player-id');
player.any('a', (e) => console.log(e.type + ' triggered');
player.trigger('a');
// logs 'a triggered'
player.trigger('a');
// logs nothing as the listener has been removed.
```
Multiple Events
```
const player = videojs('some-player-id');
player.any(['a', 'b', 'c', 'd'], (e) => console.log(e.type + ' triggered');
player.trigger('d');
// logs 'd triggered'
player.trigger('a');
player.trigger('b');
player.trigger('c');
player.trigger('d');
// all triggers above log nothing as the listener is removed after the first 'd' trigger.
```
Following #5824, this PR adds support for some Picture-in-Picture methods described in the spec and article. It also makes sure that we can listen to the enterpictureinpicture and leavepictureinpicture events on the player.
This player behavior is very useful for accessibility because the user can cancel the action by clicking outside the button area. It is recommended by the WCAG 2.1 "2.5.2 Pointer Cancellation" spec.
The fullscreen API now returns a promise. If the player is inside an
iframe that doesn't allow fullscreen, the promise will reject and cause
an error to be logged. Instead, we should silence this promise.
Fixes#5918
Allow middleware to handle volume setter and getter. This supports things like ducking the playback volume programmatically, without affecting the player's UI volume control.
Calling video.load while the video is trying to play (that is between play and playing event) throws an error. Instead, just wait for playback to happen before resetting.
Fixes#5875
Disable the live tracker on IE11 when the document is hidden to fix the slow down and eventual crashing of web pages on IE11.
After #5879 was completed, we noticed that live streams still have an issue. This is because the live tracker we have also uses setInterval. Unfortunately, just disabling setInterval in the live tracker was not enough. Instead, we decided the best course of action is to just disable the live tracker altogether.
1. We were not always able to clean up `resize` on the `ResizeManager`, as the iframe
contentWindow can disappear before dispose
2. Native Tracks on Safari do not have an `off` so we have to deal with
event listeners manually
Fixes#5878
The seek bar updates on a 30ms interval to have a nice, smooth transition as time ticks forward. Unfortunately, IE11 has some performance issues with interval when the document is hidden. This doesn't appear to be an issue when using setTimeout but using a setTimeout was causing the play progress to appear very jerky in comparison.
Instead, we should just not update the play progress when the document is hidden. Besides solving the issue in IE11, it makes sense to do as no one could be seeing the progress bar. In addition, update() is now a no-op if the seek-bar element isn't visible.
Fixes#5575
Issue #5831 made the not-in-DOM warning work with elements from other
documents. This works in modern browsers but IE11 doesn't include a
contains method on the document. Instead, we should check to see if the
body contains the element.
The resetProgressBar_ method was calling 'updateContent' on the durationDisplay and remainingTimeDisplay controls without checking to make sure they exist
Fixes#5838
In Safari, if we call play early and we are going to be waiting till
loadstart, it's possible this will take too long for the user activition
flag to still be available. In this case, we should call load() on the
player to prime the video element so for when loadstart happens.
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 ResizeManager's iframe element is able to be focused via tabbing, which results in a bad user experience for users that rely on a screen reader to navigate the video and its sibling elements. The fix is to set the tabIndex to "-1", and the aria-hidden property to true for good measure.
This reverts the previous fix (2bc90a1)
and also simplifies handling. Seems like this works a lot better while
also ensuring that the vjs-fullscreen class is still on the player.
Fixes#5685, fixes#5745
A child component may have been assigned to another
parent before assigning that child component to the
new parent via "addChild" method. In this case, the
original parent should remove the child then it can
be safely added back to the new parent. This commit
will keep the parent's "children_" and its DOM
element's child nodes in the consistent state.
This was done to make the behavior on Android with HLS live streams better but the it's opening us up to too many potential issues, like a user not being able to properly disable the control bar, that we should just back it out.
Before the fullscreen API was un-prefixed, we listened to triggered a
`fullscreenchange` event on the player manually. This worked fine
because a prefixed `fullscreenchange` event was triggered on the player
element itself. But when it was unprefixed, we ended up with two events
now, the unprefixed event and the one we triggered.
Instead, we should listen the event the browser supports and re-trigger
it as the unprefixed event as necessary.
We also make sure that the handler gets calls when the document level
fullscreenchange handler gets called so that it is cancelled properly.
Fixes#5685.
`loadMedia` accepts a MediaObject and an optional ready handler. It'll reset the player -- including text tracks, poster, and source -- before setting the new provided media, which include sources, poster, text tracks.
`getMedia` will return either the provided media object or the currently set values for sources, text tracks, and poster.
Fixes#4342
Listen to 'mouseenter' and 'mouseleave' events when triggered in the control-bar and temporarily sets inactivity timeout to zero before restoring it.
Closes#5258
To make the seek-to-live component more accessible, we hide the text that says "LIVE" from screen readers and make it be purely for sighted users. Then set the control text to be either "Seek to live, currently playing live" or "Seek to live, currently behind live" to indicate what this control does and be informative around whether we are at edge or not. Then use aria-disabled on control if we are at edge.
- Update the Control Text in the load-progress-bar during loading, remove unnecessary Control Text from the play-progress-bar, and hide the time-tooltip feature from Assistive Technology using ARIA.
- Add a span around the vjs-control-text-loaded-percentage in load-progress-bar, and use that for the text to update.
- Hide the time-tooltip feature from Assistive Technology using ARIA
Fixes#5251
The desired behavior when navigating any of the TimeDisplay components (current time, duration, remaining time) with the arrow keys with a screen reader is for the singular parent div to receive focus, and the reader should announce the text of each child span in order, ex. "Current Time 0:17" and "Duration 1:10". This is how it works when using JAWS. However, with VoiceOver each individual child span element receives focus and the contents are announced separately.
According to the ARIA spec (see [here](https://www.w3.org/TR/html-aam-1.0/#details-id-124) and [example 8](https://www.w3.org/TR/wai-aria-1.1/#presentation)), there is no implicit role for span elements, so the contents should be exposed but the elements themselves should be invisible to screen readers. In other words, <span> Sample Content </span> should be the same as <span role="presentation"> Sample Content </span>. But this is not the case with VoiceOver. As far as I can tell, the desired behavior is only achieved with VoiceOver if each child span is explicitly made presentational, either by assigning each of them the presentation role, or by assigning the parent div a role that makes its children presentational (although there doesn't seem to be a role whose semantics fit the purpose of that div)
The first ARIA doc link above shows the Mac OS X Accessibility Protocol mapping for span elements is to the group role. I don't know enough about accessibility API mapping to confidently draw conclusions about root cause, but this seems like a possible explanation.
Changes:
* add role="presentation" to each of the two span elements inside TimeDisplay divs
* add aria-hidden="true to the TimeDivider (tangential improvement)
* fix inaccurate description of the TimeDisplay component (tangential improvement)
- Make sure that we seek to live playback on the first timeupdate
- Do not report that we are not live before playback has started (a timeupdate has been seen)
- Prevent negative seekable increments
- We can seek past the seekable value in the video element, so we use that to seek to live, rather than waiting for a seekable end change.
When liveui is enabled, allow seeking during the live window, add button that allows you to seek to the live edge and that indicates whether you are at the live edge or not.
This is a follow-up to this fix in VHS, after which default in-manifest subtitles were still not being correctly enabled. The reason is because Video.js's text track preselection logic was running before the media groups were set up in VHS.
Text track preselection should happen on `loadedmetadata` instead of `loadstart`. According to the HTML spec, text track data is available on `loadedmetadata`, so we should be waiting until then to make preselection decisions.
When responsive mode is set, make the caption settings dialog be more responsive to the size of the player.
Make whitespace and sizing a bit more consistent across elements.
This allows the duration NaN or 0 to update the duration display.
This also resets the duration display when a new media item is loaded with `preload` set to 'none'.
Fixes#5347
When preselecting a new track based on user preference, make sure that the language is actually set and that the track we're testing is either a captions or a subtitles track.
Fixes#5553
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
Sometimes the vjs-waiting class is removed prematurely after the player gets into a waiting state. This removes the graphic waiting spinner while the player is still waiting. Instead, we should make sure that the currentTime has updated before removing the spinner.
Instead of checking for blob urls in the generic updateSourceCaches method, check for blob urls inside of handleTechSourceset before updating the source cache.
Fixes#5504.
Add support for focus-visible so that mouse-users don't need to see focus outlines but keyboard and Screen Reader users still do. It includes both the standard selector and the selector intended to work with the polyfill: https://github.com/WICG/focus-visible.
The polyfill is *not* included in Video.js and must be included on the page separately.
Fixes#5474.
Move the ResizeManager behind the video element with negative z-index and remove visibility: hidden. This fixes issue where right click event wasn't triggered on the correct element and resize was not happening on firefox.
The default button type is "submit" which triggers a form submit. Thus
if videojs is embedded in a form element the button triggers a form
submit.
This is the same problem with same solution as discussed in https://github.com/videojs/video.js/issues/2470
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
Like fluid mode, you can enable it with the class or by calling the fill
method. Calling fill() will turn off fluid mode and calling fluid() will
turn off fill mode.
Fluid mode takes precedence over fill mode.
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
```
On mobile devices, when changing orientation, or if the player gets resized, the captions won't update to reflect the new orientation or player size. However, they do get updated the next time they are redrawn. Instead, we should redraw the captions whenever `orientationchange` and `playerresize` get triggered.
