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.
It's possible that ResizeManager will trigger its debounce handler but
then get disposed before the handler runs. This can cause tests to fail,
so, instead, we should cancel the debounce when ResizeManager is
disposed.
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()`.
Because we add Touch Activity in the parent class and those don't actually get removed in Resize Manager we leak on every dispose. Calling super.dispose() cleans them up because we remove our list of handlers via a call to DomData.removeData
Fixes#5339
It's possible for us to get a blob url for sourceset, but when we do, we
shouldn't update the source caches with that information.
blob urls can arise when playback is done via Media Source Extension (MSE) such as m3u8 sources with @videojs/http-streaming (VHS).
Angular CLI, and potentially other projects, may use the "pure_getters" compression option of uglify which will end up removing the getter line we use for side-effects to update the active cues. This update makes sure that the line doesn't get removed.
Fixes#5131
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.
If the source is not loaded, `player.play();` returns `undefined` on Firefox and Edge, which causes exception.
With this fix, player will not make exception and the fallback (`player.play()` execution after loading video) will be enabled.
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.
Currently, if longer captions labels are used the SubsCaps menu gets all messed up in IE11/Edge. This occurs due to the menu size is not adjusted correctly not taking into consideration the CC icon. This, as a result, causes the captions items not to fit in the menu and because they end up too wide and the menu has overflow: auto style, the horizontal scrollbars show up and cause the menu not to render correctly. Therefore, don't position the caption label absolutely.
Fix#4758.
Instead of calling preventDefault() on touchstart in Chrome, set touch-action: none style on progress control to prevent unintended scrolling.
Fixes#4650.
Change most menu items to an ARIA role of "menuitemradio" when only one item can be selected (i.e. in the Captions, Subtitles, Descriptions, Chapters, Audio Tracks, and Rate menus).
Fixes#5136
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
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
There doesn't seem to be any point in indicating the Control Bar as a separate object - it's all just part of the video player. Perhaps in the future, if there's content which isn't part of the control bar that needs to be clearly distinguishable from the control bar, then it would make sense, but right now you don't interact with the control bar and it doesn't convey any concept of grouping.
Fixes#5134
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.
Makes it easier to extend the seekbar and change the default event handlers. If you extend the seekbar component you can choose to override setEventHandlers_ or keep it default. If you do override setEventHandlers_ and call super() in the constructor, you get your own event handlers + the functionality provided by Slider.
There is no need to listen for user activity until a play is requested on the player and it just adds an extra timer for a player that hasn't started playing yet. Instead, just wait till the first `play` event.
Closes#5076.
SourceHandlers that use MSE have a problem: if they push a segment into a SourceBuffer and then seek close to the end, playback will stall and/or there will be a massive downswitch in quality. The general approach to fixing this that was discussed on slack was by setting the playback rate of the player to zero, buffering all that was required, and then restoring the previous playback rate. In my implementation, I've done this in the source handler (see: videojs/videojs-contrib-hls#1374).
From the video.js perspective, it should ensure that the UI reflects the buffering status and that the player API behaves like you'd expect -- that is to say, that it will fire seeking immediately after a call to currentTime, and it will fire seeked, canplay, canplaythrough, and playing when everything is buffered.
In Chrome/Firefox/Safari appending a <source> element when the media element has no source, causes what we think of as a `sourceset`. These changes make our code actual fire that event.
This was found due to the work done in #4660. Basically we reload the video element twice on every source with preload set to auto. This can potentially cause the same data to be downloaded twice.
This PR is to add HLS playback support built into video.js for 7.0 via videojs-http-streaming (shorthand VHS). VHS is the next major version of videojs-contrib-hls that removes HLS Flash playback and includes some experimental DASH support (hence the rename). The purpose is to improve the out-of-the-box experience for video.js and allow cross browser HLS compatibility.
The proposed changes are to have the standard video.js browser and module scripts contain VHS and provide an alternate video.js browser script that does not contain VHS.
A video.js/core export is provided for importing without VHS.
If .load() is called, we don't know what the new source will be because of the asynchronous nature of the resource selection algorithm. However, we can know if the src attribute is set on the video element because that's what will be chosen. So, set the src property on the event object to be the src attribute or be the empty string. This matches how currentSrc works where it is an empty string when no source is set. So, when sourceset is triggered and src is "" in the event object, it means that the source is changing.
In addition, we're going to be releasing sourceset as an experimental feature so we could improve the API and make changes in minor releases.
This reverts commit 6fe7a9a.
The PR #4804, which fixes#4720, causes a regression #5005. When testing for the regression, the original issue is no longer reproducible so the fix should be backed out. If someone is still using the old version of chrome and seeing the behavior of #4720, they can continue using the versions of Video.js that contain the fixed made in #4804: 6.5.2, 6.6x, 6.7.x.
Fixes#5005.
If CSS Grid is available, the Captions Settings Dialog will use it for the layout to begin making it more responsive.
It will fallback to the current layout method if CSS Grid isn't available.
Add setFormatTime for Video.js to allow users to change the time format. Example usage:
```js
videojs.setFormatTime((seconds, guide) => `${seconds}, ${guide}`));
```
Add resetFormatTime to reset the time format to the default.
Fixes#2931
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.
Trigger a sourceset event whenever the source is set in the Html5 tech, including initial source. We override the video element's src and setAttribute methods so that we can trigger the sourceset event when people change the src with both the video element and our API methods.
The event object for sourceset will contain the src string that was provided at the time the sourceset was triggered. This is mostly important if a source is being set while a tech is changing.
A Tech has a featuresSourceset option that it can set to for sourceset handling. It can then call the helper triggerSourceset(src) to trigger the sourceset.
If a user disabled the text track setting component, trying to play emulated captions would crash. Add a null check before applying the text track settings.
Fixes#4964.
This is a first in a few changes related to #4902. This just adds a text alternative to the loading spinner. In future PRs, we would make it alert to screen readers and potentially have a generic alerting mechanism.
Scrubbing inside the seekbar paused the player properly but scrubbing inside the progress control outside the seekbar, the player never paused. This meant that when you scrubbed, if you kept the mouse down but lingered for a moment, the player would continue playing until the mouse moved again.
This fixes it so that the seekbar mousedown and mouseup handlers are called when the progress control mousedown and mouseup handlers are triggered.
Middleware factories currently get run each time a source is set. Because middleware are assocated with a player, the factories should only run once per player.
This PR fixes it so that we associate a middleware instance with a middleware factory per player.
Each time a player is disposed, we will clear the cache of the middleware instances for that player.
Fixes#4677.
These changes address an issue where screen readers may repeatedly and redundantly read TextTrackMenuItem's control text on every texttrackchange event in some browsers.
The source of the problem is in the handleTracksChange() method of TextTrackMenuItem and its subclass OffTextTrackMenuItem, in which this.selected(true/false) gets called even if the selected state has not changed since its previous invocation.
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
Chrome has started pausing autoplaying video elements when they are
moved in the DOM. Here we need to make sure that if the video started
autoplaying, after we move the element in the DOM we call play again.
Fixes#4720.
If the HTML element doesn't have a lang attribute, Edge throws an exception when calling closest.getAttribute because tag.closest('[lang]') returns an empty object (which will be coerced to true) instead of null.
Uses the new Dom.isSingleLeftClick method to do the check we were doing previously.
Also, refactor the player.handleTechClick_() method to follow the new style of code.
Fixes#4689
If the player is paused, when we seek, the time displays don't update. So, we trigger a timeupdate manually to let components know that the time has updated.
The core goal here is to make sure the following works in light of some middleware process that makes setting the source more async than next tick:
```js
player.src('...');
player.ready(() => player.play());
```
In fact, given this change, we should even be able to do:
```js
player.src('...');
player.play();
```
Unlike #4665, which would have clarified/changed the meaning of "ready", it remains a reflection of the tech's state and we make better use of the ability to queue things on that state and on the middleware `setSource` process.
Previously, any mouse button interaction with the bars would cause a reaction but that's unexpected for right and middle mouse clicks. This PR makes it so right and middle mouse clicks are ignored for dragging and clicking.
A we retained a lot of references to DOM elements in various components. Here we clear it up. Also, make sure that we remove unused listeners as they can retain objects as well.
Update evented mixin to null out the eventBusEl_ after the component is disposed.
Add a feature for components, to tell it not to auto-initialize the evented mixin.
Re-enable the tests that were removed in #4640.
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.
Right now the durationchange event is throttled with the other two events, timeupdate and loadedmetadata. This means that only one of those events will trigger an update if they all occur within 25ms of each other.
This functionality makes sense for timeupdate or loadedmetadata as those should not indicate a time update (even though they often do).
For durationchange however it will always indicate a change in the duration, and we want to always update the display when it happens. Here is a scenario of how we could show duration incorrectly right now:
User is playing a video that has a postroll ad at the end. After the postroll ad their will be a timeupdate, and then a durationchange to signify that we are back in content. Then ended will fire, and no more events will happen.
The player will still show the duration of the ad, as the durationchange was eaten by the timeupdate that happened at nearly the same time.
Also, fix a potential issue where if the page was translated using google translate, the time displays stopped updating.
The aria-labelledby attribute on the fontPercent, edgeStyle, and
fontFamily select options inlcudes an extra space since there is
no ledgendId variable being set on the createElFont_() method. This
fix adds a check to see if the legendId value is set or not inside
the createElSelect_() method. This should keep the extra space
from appearing on the select tags created by the createElFont_()
method.
Fixes#4688
Add `enable` and `disable` methods to the progress control. This disabled things like the mouse time display and the progress control continues updating for current time and loading but the user will not be able to interact with the control anymore.
If Object.prototype was modified to have extra properties, the `off` method crashed because `data.handlers` would've been removed before getting to the extra property.
Also, this fixes an issue where if a falsey value was passed to off, the events system would remove all the events, i.e. `player.off('')`. Instead, we make sure that only if it is called as `player.off()` will they be removed.
When setting the source, we were calling `play` if `autoplay` was set. We shouldn't do that and instead we should rely on the browser or tech (like Flash) to handle it properly.
Make boolean attributes like muted set the property video.muted = {{boolean}} and the attribute video.setAttribute('muted', 'muted') when changing the value.
Also, in html5's createEl, we were setting/updating attributes for various properties but we were only setting the attributes and not also the properties but also autoplay was happening first rather than last which caused autoplay to fail because muted and playsinline weren't necessary set by that time.
Fix#4351.
In 6.0, we changed the way that Menu Buttons were being created by
wrapping an actual button with a menu sibling in a container. The
playback rate menu also had a rate value display. In 6.x, this rate
value display ended up coming on top of the button itself and capturing
it's clicks. So, we want to remove pointer-events from the rate-value
display and resize the actual button to be the size of the control.
We added a feature so that remote text tracks can auto-removed when a source changes. However, in 6.x we changed the source behavior to be asynchronous meaning that some text tracks were accidentally being removed when they weren't supposed to be.
For example:
```js
var player = videojs('my-player');
player.src({src: 'video.mp4', type: 'video/mp4'});
// set second arg to false so that they get auto-removed on source change
player.addRemoteTextTrack({kind: 'captions', src: 'text.vtt', srclang: 'en'}, false);
```
Now when the player loads, this captions track is actually missing because it was removed.
Instead of adding auto-removal tracks immediately to the list, wait until we've selected a source before adding them in.
Fixes#4403 and #4315.
player.duration() currently returns 0 if the duration is not known, when it should return NaN. The problem is that if NaN is passed to player.duration() as an argument, we set the duration to 0. If player.cache_.duration was set to NaN by other means, player.duration() would still return 0.
Modify the player duration() method so that it will 1.) set the cached duration to NaN if it is passed in as an argument, and 2.) return the proper value when called without an argument.
When picture-in-picture mode is entered on Safari, `webkitbeginfullscreen` is triggered which results in a proxied `fullscreenchange` event and adding the fullscreen class to the player. That causes the tech element to collapse to zero height so that the "this video is playing in picture in picture" placeholder is not visible.
On `webkitbeginfullscreen` check whether the presentation mode is `picture-in-picture` before proxying `fullscreenchange` event.
These are a few performance improvements.
* Use textContent instead of innerHTML for text content.
* Construct TextTrackSettings content with HTML strings where possible because it's a bit faster than manual DOM construction.
* Do minimal DOM updates to time controls. This reduces our timeupdate footprint from ~2-2.5ms to ~1ms!
Video.js players can accept a number of standard <video> element options (autoplay, muted, loop, etc), but not currently playsinline, which is now part of the [HTML spec](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-video-playsinline). We should add it to the list of <video> attributes that can be provided to the player as options.
On Safari and iOS, we use native text tracks, so, during text track
button creation, textTracks() is populated. However, `this.kinds_` isn't
necessarily set and ends up throwing.
Instead, we want to move the fallback for `this.kinds_` from the
constructor and right above the usage of `this.kinds_`.
Prevent ClickableComponents re-adding event listeners each time enabled() is called.
* Keeps track of enabled state (this.enabled_)
* enable() doesn't do anything if the component is enabled, so the event handlers are not re-added
Fixes#4312
This adds a beforepluginsetup event as well as beforepluginsetup:$name and pluginsetup:$name events.
The drive behind this is improving the ability for people to make cross-plugin dependencies in a more robust manner.
Android Chrome now supports playbackRate properly, so removes the blacklist added in #3246 for newer Chrome versions.
Adds `browser.CHROME_VERSION` as a necessary evil.
No longer blacklists for Chrome 58+ -- this could possibly be fixed since 52, but 58 is all I've been able to test on and most users should keep Chrome up to date.
In the new middleware work, the way that new sources were loaded was refactored. We also recently made techs and components work either TitleCased or camelcased. There was one comparison that didn't do the proper check and cause the tech to be reloaded, even if the two techs were the same.
This allows default tracks or tracks with a `mode`of `showing` to be seen
when they are added (as we would expect). Rather than only being seen
after the first `modechange` event (aka a selection from the menu). This is done by watching for `loadstart` on Player.
Currently, the behavior of time tooltips is inconsistent across iOS and Android devices so we want to hide the tooltips on mobile devices for the time being.
The issue is that in Flash, Flash.embed wraps the object element in a div but that object element is what is referenced by this.el(), so, parentNode isn't null but we aren't actually in the DOM. Instead, just check to see whether the tech element is in the DOM or not via node.contains().
This fixes a logging in the console regarding timetooltips which don't exist. Also, makes sure not to focus the menu button when the captions settings menu item is clicked since the caption settings is getting focused instead. In addition, it makes sure the legend text in the track settings is the foreground color.
In addition, the track buttons need to update on the ready event because when the tech loads, it could run with support native captions, so, it needs to know whether to include the captions settings menu.
And all tracks should always be included in player.textTracks() and not just player.remoteTextTracks().
Implement a `hideThreshold` property that defaults to 1 so
descendants can override it if necessary. Right now the only
descendant that will override will be `CaptionsButton` because
video.js adds a "captions settings" for emulated text tracks.
Move the CC icon in the SubsCapsMenuItem into an icon-placeholder span. Also, include that information for the screen reader.
In addition, only apply default sizing to icon-placeholder if they're direct descendants of a vjs-control.
In #4034, we changed the way that menu buttons work slightly by introduction a wrapper element with a separate wrapper css builder. However, this broke, at least the playback-rate menu.
This PR adds a buildWrapperCSSClass to each of our menu buttons.
Previously timeupdate would fire before the video was playing, and the tech was not ready. This caused issues when preload was set to auto, because cuechange would fire before the video was even started for cues with a startTime of 0.
Wait for tech to be ready before watching for timeupdate
update unit tests to use TechFaker
Add a unit test to verify that we wait for Tech to be ready.
Update videojs-vtt.js and don't auto-export its versions of VTTCue globally.
When our TextTrack object is given a cue, if it's a native cue, wrap it in our emulated vttjs.VTTCue.
Fixes#4093.
It allows you to use string as an key for the language files but have a default value that's different. In this case, we have a key of progress bar timing: currentTime={1} duration={2} which is used so that we have a descriptive key to what is happening. The default value matches that default value in en.json: {1} of {2}. The reason for the default value is so that the translation uses {1} of {2} for the actual localization without requiring en.json to be included in videojs by default.
Fix#4024.
This fixes a lot of the issues from #2746 by making the dialog inherit from our actual ModalDialog which now has tab focus trapping.
The Captions Settings dialog has some accessibility issues:
- Field labels and fields are not explicitly associated
- Keyboard focus does not move into the dialog when it is opened
- Keyboard focus is not trapped inside the dialog while it is open
- Keyboard focus does not return to the control which opened the dialog when it is closed
- The extent (top and bottom) of the dialog is not indicated to screen readers
- The dialog cannot be closed with the Esc key
- The meaning of '---' in the select fields is not clear
- The control to close the dialog is labeled "Done" rather than "Close"
- The purpose of the "Defaults" button may not be obvious, and its effect may not be apparent to screen reader users
- Focus highlighting (outline) on the Default and Done buttons is *very* hard to see
- Pressing the Done button doesn’t seem to have the same effect as pressing the Close (x) button; does it trigger the same focus movement
- This requirement to move it back to the triggering element is tricky, since clicking on that item in the CC menu dismisses the CC menu. I need to think about this a little more - either the menu should open again, or the focus should go to the main CC Menu Button
- The focus outline on the whole dialog goes too far to the left (all the way to the edge of the video window, not just to the edge of the dialog)
Fixes#2746.
Currently, the ARIA value of VolumeBar tracks the value of volume. It should instead track the position of the slider on VolumeBar, which tracks volume except when the player is muted, in which case it's 0.
Fixes#4064.
If the modal dialog was opened and the focus was preset inside the
player, move the focus to the modal dialog.
When the modal dialog is closed, move the focus back to the previously
active element.
When focus is inside the dialog, trap tab focus. This was inspired by https://github.com/gdkraus/accessible-modal-dialog and ally.js.
Fix the structure of elements in menus so that actionable elements are not children of actionable elements, as required by ARIA.
Remove unnecessary aria-labels on menus.
If the control bar and playtoggle exist, focus the playtoggle after
triggering play via the keyboard from the Big Play Button.
If the control bar isn't available, then focus the player element.
If play() returns a promise, wait until it resolves to focus,
otherwise, use a setTimeout.
Fixes#2729
Prevents a title attribute from being applied to MenuItems.
MenuItem indicates to ClickableComponent that the control is not just an icon, so it shouldn't have a title attribute.
Fixes#3699
* Fixes#3986
* update `techOptions` to look for `TitleCase`/`camelCase` user tech options
* remove deprecated usage of Tech as Component
* add a unit test to verify that registerTech works
* change defaultTech_ to defaultTechOrder_
If a user changed the volume to zero either via the mouse or keyboard, clicking unmute will now restore the volume back to this last position. Previously, the mute and volume values were completely not linked.
Fixes#3909.
If the time tooltips try to update when the player isn't in the DOM,
they error out because the bounding rects for the player will not be available.
This does a null check and exists early.
If you try to delegate an to an EventTarget from an evented component, you'll end up failing because it didn't think that an EventTarget object worked. But it should and does. This adds a check for it in the isEvented function.
Middleware registration now only accept a factory method which takes a player reference and returns some object that represents the middleware with the various methods on it.
Also, add a use to register a middleware for all types.
Advanced plugins introduced the concept of mixins and added two: evented and stateful.
This provides Components with the benefits of the stateful mixin
Advanced plugins introduced the concept of mixins and added two: evented and stateful.
This refactors Component to use the evented mixin, granting it event broadcast/handling capabilities.
Add middleware support. Middleware can function as go-between between the player and the tech. For example, it can modify the duration that the tech returns to the player. In addition, middleware allow for supporting custom video sources and types.
Currently, middleware can only intercept timeline methods like duration, currentTime, and setCurrentTime.
For example,
```js
videojs.use('video/foo', {
setSource(src, next) {
next(null, {
src: 'http://example.com/video.mp4',
type: 'video/mp4'
});
}
});
```
Will allow you to set a source with type `video/foo` which will play back `video.mp4`.
This makes setting the source asynchronous, which aligns it with the spec a bit more. Methods like play can still be called synchronously on the player after setting the source and the player will play once the source has loaded.
`sourceOrder` option was removed as well and it will now always use source ordering.
BREAKING CHANGE: setting the source is now asynchronous. `sourceOrder` option removed and made the default.
Internally uses the VolumeControl and MuteToggle components to create the VolumePanel component. Acts like the old VolumeMenuButton but does not have the screen reader issues of the older version.
BREAKING CHANGE: remove VolumeMenuButton, introduce a new default volume control: VolumePanel.
Switch to `keepTooltipsInside` by default and simplify DOM structure around the time tooltips and progress control.
BREAKING CHANGE: removal of `keepTooltipsInside` option.
* Switch to es3 preset for babel so that it runs last. Plugins run before presets and presets run in reverse order. Also, we ran into a weird bug in babel that causes `default` not to be quoted in some cases (https://github.com/babel/babel/issues/4799) which we've worked around here.
* Restore the es-shims for tests and the ie8 fallback script.
* Do a null-check around `Player.players`.
* use more round fractions (like 0.5 and 1) to avoid rounding issues.
Remove method chaining from videojs. This helps keep the methods consistent especially since play() now returns a Promise in some cases. Also, it can add some performance benefits.
BREAKING CHANGE: player methods no longer return a player instance when called. Fixes#3704.
Return the native Promise from `play()` if it exists. `undefined` is returned otherwise.
This comes in as part of the greater effort to remove method chaining.
BREAKING CHANGE: `play()` no longer returns the player object but instead the native Promise or nothing.
Restore all outlines on components that are focusable to increase accessibility of these components.
BREAKING CHANGE: restoring the outlines changes the skin slightly and potentially break users. Fixes#3200.
Prevent techs (and others) from being registered via registerComponent.
* `registerComponent` now throws if given an object that is not a subclass of Component (or Component itself).
* `registerComponent` now throws if given a non-empty string as its name argument.
BREAKING CHANGE: registerComponent now throws if no name or not a component is passed in.
`Player#tech` can now be called without passing an object into it. It no longer requires passing an object into it, so, current code will not break.
If nothing is passed in, a warning will be logged about knowing what you're doing. If anything is passed in, the warning is silenced.
This is both a change as well as a bug fix. We tried to have better awareness of when the underlying video element changed underneath us so we can dispose of the source handler but that broke some use cases of MSE. Given that we weren't able to fix it in a reasonable non-breaking and non-invasive solution, we're taking it out.
BREAKING CHANGE: remove the double loadstart handlers that dispose the tech/source handlers if a secondary loadstart event is heard.
Add a log levels and history api: `videojs.log.level()` and `videojs.log.history()`.
`.level()` will return the current level and you can also set it to be one of: `all`, `error`, `off`, or `warn`.
`.history()` will return a list of all things logged since videojs loaded. It can be disabled via `videojs.log.history.disable()` (and re-enabled with `enable()`) as well as cleared with `videojs.log.history.clear()`.
This has been deprecated throughout 5.0 and being removed. To include a child, you must use an object or false to exclude it. true will no longer be supported.
BREAKING CHANGE: remove ability to add children with options as a boolean.
This removes the Component.extend() method entirely, which has been deprecated since 5.0. Additionally, it removes the deprecated support for an init method in videojs.extend().
BREAKING CHANGE: remove deprecated features.
We previously hid the poster image when controls were disabled because
the poster image had a click handler on it. However, this meant that in
the case of Flash, which doesn't have a native poster image ability, we
lost the poster.
Fixes#1625.
This helps with debugging to know what a component's name is.
We try to look up the tech's name via the constructor's name property,
otherwise, we set it to 'Unknown Tech'. Can be overridden by setting
`this.name_` after calling `super()` in the constructor.
Fixes#1786.
Previously, seek bar's mousedown handler would first seek the video,
then pause it. This can trigger a bug in Chrome 55 where seeking
backwards and then immediately pausing can break the video player.
Instead, call the super handler last so that we pause the video before
we start seeking.
Fixes#3839. This reverts commit e92db4f407 (#3886)
For elements which parent doesn't have `hasAttribute` it needs do another check to prevent erroring out. One case of this is when video.js is created inside a documentFragment, the parent node won't have a `hasAttribute` method.
Using aliasify and require, we can generate the dist/video.js and dist/alt/video.novtt.js files each with and without vttjs while having the require-able version of video.js available to require vttjs and have it work with bundlers like browserify and webpack.
Introduce the Dom.isReal() function, which makes an educated assumption about the "realness" of the document object.
Wrap code here and there with checks against Dom.isReal() as well as other defensive code.
Fixes#3869.
If using nativeControlsForTouch, skip the emitTapEvents listeners from
being setup. This avoids taps being taken away from native video
elements and stopping controls being displayed.
In chrome 55, something changed which introduced a bug in videojs where
if you seeked back, it wouldn't work. This is because we always paused
the video in the mousedown handler.
Instead, we should create a timer for pausing that is cleared in the
mouseup handler or in the mouse move handler. This is so that if someone
is seeking by clicking and waiting the video pauses. As soon as we start
moving and we get a mousemove event, we can know that it's safe to pause
as well.
Fixes#3839.
If the videojs embed code (a video element) is wrapped in a div with the
'data-vjs-player' attribute on it, that element will be used for the
player div and a new one will not be created. In addition, on browsers
like iOS that don't support moving the media element inside the DOM, we
will not need to clone the element and we could continue to re-use the
same video element give to us in the embed code.
This could also be extended in the future to change our embed code to a
div-only approach if we so choose.
Chrome has a bug where if you add a remote text track and try to use it programmatically, you won't get any cues displayed. So, just switch to always emulated mode.
Also, add IS_SAFARI and IS_ANY_SAFARI to the browsers.
