This uses offsetX and offsetY on the MouseEvents which helps account for transforms on the player. Unfortunately, this isn't available on TouchEvents, so, while this helps desktop devices with using a mouse, it doesn't help mobile devices using touch.
Fixes#6726, fixes#1102.
When `debug(true)` is called, it will fire a `debugon` event that plugins and components can then use to do extra logging or anything else that's helpful to for debugging. It will also set the log level to debug.
When `debug(false)` is called, it will fire a `debugoff` event that plugins and components can then use to stop doing extra logging or helpful debugging. It will reset the log level to whatever it was previously.
Co-authored-by: ipadilla4 <ipadilla@brightcove.com>
The requestPictureInPicture API and button currently assume thta if the browser supports the PIP API, the tech supports it. This results in a broken button with certain techs, such as youtube or HTML5 with an audio el.
Checks if disablePictureInPicture is exactly false. If true it's disabled and if undefined the tech does not support it.
Fixes#6398.
The fix in #6297 doesn't work where the child to insert before is an element rather than a component, e.g. the video element.
Check if the child to insert before is an element, as well as checking if it has an el_
In the cases where the player isn't ready, or we are in the middle of changing sources, we will wait for `canplay` and then seek to the provided time without requiring Video.js users to handle this themselves.
Co-authored-by: Marco Garay <mgaray@brightcove.com>
It seems we have never triggered change events on remoteTextTrack when we were using native text tracks. This was a problem for VHS, which exclusively uses text tracks.
This makes it so we do trigger the event. Main issue with this change is that it creates a potential for a false positive where a change event was triggered from a non-remote text track but the remoteTextTrack list still received a change event. This issue is mitigated by best practices of looping through the list looking for the modes that you care about.
Co-authored-by: Kevin Kipp <kevin.kipp@gmail.com>
Co-authored-by: Kyle Boutette <kyleveB@gmail.com>
When a player is created without an id on the embed code, Video.js automatically assigns it one based on an auto-incrementing number (a.k.a. a GUID). For the longest time, this has happened to result in the default id of the first player being vjs_video_3.
It was never intended for users to rely on this value being consistent, but users do strange and inadvisable things.
PR #6103 had an unintended side effect in that it changed the default id to vjs_video_2, which we worry could affect some users of Video.js.
The WICG spec calls out only two events, enterpictureinpicture and
leavepictureinpicture. We should try and only use those.
If pictureinpicturechange is still necessary, it can be re-added at a
later date.
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
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.
```
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
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 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.
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.
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.
`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
- 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.
Disable running tests in Firefox on Travis for regular PRs as it wasn't the case previously and is broken for some reason. We'll follow up in the future in #5626.
Update .travis.yml based on their latest infrastructure and new npm caching method.
Silence logging of sourceset test sources.
Closes#5616
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.
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
```
If Promise is available or if Promise is polyfilled, then we'll return a new Promise from `play()` that will get fulfilled with the value returned from the `play()` method. This means that on IE11, this promise will get resolved when we call `play()` even if play doesn't succeed. We will have a follow-on PR to polyfill this behavior and resolve or reject the promise for browsers like IE11 that don't return a promise from `play()`.
Trigger the change event on the next tick. This means that multiple changes to a track's mode will only result in a single change event on its associated TextTrackList rather than 3 events as it may be currently.
Fixes#5159
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.
Our setTimeout and requestAnimationFrame methods added dispose handlers so that they get cancelled if the component is disposed before they get a chance to run. However, we were only clearing out these dispose handlers if we cleared the timeout or the rAF manually. Instead make sure that we remove the dispose handler when it is no longer needed.
Fixes#5199.
Currently, VideoJS combines volume control with muted support, and these actions aren't actually the same. Muting/unmuting volume work independently from the volume control. For example, iOS doesn't support controlling volume programmatically but allows muting/unmuting volume.
This change will display the volume control panel and mute toggle button if the tech supports muting volume. The volume slider will continue to be hidden if the platform doesn't allow programmatically control volume. If neither muting nor control volume is supported, volume panel will not be displayed.
Fixes#4478.
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.
When providing the TextTrackDisplay component with track settings overrides, currently colour codes with only three digits are supported. This updates it so that 6 digit hex codes are also accepted.
the bug is that objects using the new-ish evented mixin cannot listen to the window object, preventing things like:
```
component.on(window, 'scroll', throttledListener);
```
This fixes that so anything that's a native EventTarget works.
The changes to source caching in #5156 introduced a regression where the source options were no longer available to plugins. This PR makes sure the cached source object retains any source options passed along.
When having a video-js embed with a class attribute, as part of the
changes to remove old IE support (#5041), we overwrote our addition of
the video-js class when it was missing. Instead, we want to make sure
that we don't override the class names again since they are already set
up correctly.
Fixesvideojs/http-streaming#100
Move the aria-live attribute to the control text element within buttons, rather than on the whole button, so it is not affected by the change of the title attribute, only by the change of the control text.
It seems like having aria-live on the button itself means that JAWS and NVDA announce the button both when the button text changes and when the title attribute changes. NVDA speaks the new label more times because it announces the button text as the label and the title as the description, so it says, for example, "pause button pause". JAWS doesn't appear to do this, so it doesn't repeat it as many times.
Partially addresses #5023
* We now trigger `sourceset` any time a `<source>` element is appended to a mediaEl with no source.
* `load` should always fire a `sourceset`
* `sourceset` should always be the absolute url.
