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.
Use npx babel-upgrade --write --install to initiate the upgrade. Then update grunt and rollup.
Decreases minified, gzipped filesize by about 1KB. Decreases build times by a few minutes.
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.
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.
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.
