Don't call tech.paused() in the requestVideoFrameCallback fallback if the tech is not ready. I've seen this is an issue in the Flash tech, as its methods are set up after the swf loads. Yes, Flash, it's 2022, but in theory another tech could be impacted if it's also async.
Use the timeupdate event as well as the rvfc and raf callbacks to check cues. This is a bit overkill for "usual" playback but avoids edge cases. If the more preceise callback trigger first the cue will update but the timeupdate event should catch any that were missed, notwithstanding that timeupdate was always somewhat unpredictable.
Fixes#7910 (audio in video els and Samsung being weird) and fixes#7902 (no updates off screen).
Safari's requestVideoFrameCallback is (intentionally?) broken when DRM is playing, so in that case use the fallback with requestAnimationFrame instead.
Add a new `displayNegative` option on the remaining time display to not show a negative sign in front of the time.
The default value is true to maintain current behavior.
Closes#7565
In #7337, a lot of code was updated to no longer user innerHTML, but we
accidentally caused an issue with Audio Description (AD) tracks where
the track title was included twice. Once before and once after the AD
icon.
This is because we were calling `super.createEl()` but MenuItem created
a specific element and didn't just pass things the arguments along.
Instead, we should use `Dom.createEl()` directly.
Fixes#7556
This is a follow-up to #7514. But turns out, that we still had a timing
issue around when we were doing the check and when the volume control
was created.
Instead, we should make `featuresVolumeControl` not be a lazy property,
so, that we do that check as early as possible. Also, we should
default this property to `false` in this case, so, that we assume we
can't until we confirm we can.
Additionally, added a null check for Html5, to be extra defensive since
the timeout isn't tied to a player.
We were always setting `scrubbing(true)` on mouse down. This means, that
we'd use `fastSeek` even when seeking while clicking, rather than only
when scrubbing.
The main fix involves knowing in `handleMouseMove` whether we were
called directly as a `mousemove` handler or whether it was called from
`handleMouseDown`. This means that when `handleMouseMove` is called via
`handleMouseDown` we can skip setting `scrubbing(true)` and only do it
when we are scrubbing directly.
On latest iOS, we are seeing times when the volume feature detection is
showing that we are able to change the volume, though, that is not the
case. Instead, on iOS, when we detect that we can control the volume, we
set a short timer to retest and reset the featuresVolumeControl property.
Fixes#7040
Audio Tracks are supposed to allow multiple tracks at the same time.
Safari 15 has added, at least partial support for this.
In #7163, we stopped turning other tracks of manually since we already
were doing so in the AudioTrackList. However, this only worked for
non-native AudioTracks. Before Safari 15, Safari automatically turned
off the other tracks for us so things continued to work.
With this change, when native audio tracks are used, we will turn off
the other tracks, partially reverting #7163.
We currently do not have any tests or are set up for writing tests for
these proxy tracks. Adding such tests will take too long for not a lot
of benefit, unfortunately.
Fixes#7494.
We try and enable the liveui on canplay, however, we only do it the first time after the LiveTracker is enabled. This means that if you change sources, we may not catch that the liveui should be enabled. This is particularly important for browsers where native playback is used, like Safari, as the metadata may not be available until canplay.
This is a follow-up from #7114 which enabled listening to canplay but didn't account for switching videos in the same player.
Pass `false` as `userAction.click` to disable the default click-to-play behavior. Alternatively, pass in a function, to enable custom behavior.
Fixes#7123.
Some live streams with a 30s live window can actually fluctuate between below and above the 30s threshold we have. Instead, we should have a slightly lower default to have those streams get the liveui.
If multiple `mouseenter` events fire on the controlBar before a `mouseleave` event occurs, the cached inactivityTimeout value will get overwitten with a 0. This prevents the control bar from being hidden when the inactivity timeout is reached because the hide call is skipped when inactivityTimeout <= 0.
The circumstances around multiple `mouseenter` events firing before a `mouseleave` event are when a menubutton on the toolbar has its `update()` method called: the menu popup is disposed but a `mouseleave` event isn't fired for it.
Fixes#7313
Flash is not really a thing anymore.
Prevent some weird behaviour when pressing left click outside the player, move the custor inside the player and release the button
If we've ended, there's no point in having the loading spinner. In
addition, there are cases where we get a waiting event immediately
before ended, and this works around that.
Fixesvideojs/http-streaming#1156
Mapping the promise returned from the helpers to the executor's resolve, and reject
methods. We also need to catch the error in the promise chain that's
created inside exitFullscreenHelper_.
Fixes#7298.
One thing to note is that this won't affect the play toggle from changing to the replay button on ended because it only listens to the ended event. Otherwise, this works fine.
Previously, when autoplay was set to any or muted, we would accidentally swallow the autoplay rejection when we reset the muted state back to what it was. Instead, we want to re-throw the error.
To get it working, we also had to update our tests to try/catch in our fake promise.
iPhone's native fullscreen isn't always desirable as you can't overlay controls or anything else. Adds an option to prefer "full window" mode over the video el's fullscreen.
If the preferFullWindow option is set to true, on a browser that does not support the proper fullscreen API but does support fullscreen on the video element (i.e. iPhone), then requestFullscreenHelper_() should call enterFullWindow() instead of fullscreen on the tech.
This PR adds a new option to treat autoplay: true the same as autoplay: 'play'. In general we want video.js to handle as much of the autoplay logic itself as possible, since the browser's treatment of the video element's autoplay attribute is less predictable. For now the default option value is false, but it may be made the default behavior in a future major version.
Fluid mode's automatic detection is nice, but there can be a layout jump once the video dimensions are known. We have the vjs-16-9 and vjs-9-16 classes already, but square and portrait are also common now.
Adds a new playbackRates() method that takes an Array of numbers
representing the rates that are wanted to show up in the playback rates
menu. When new rates are given, a playbackrateschange event will trigger, which
will be used by the PlaybackRatesMenuButton to update itself.
An empty array will hide the menu. No value will return the currently
set playback rates. Other values will be ignored.
Fixes#7198
Some JavaScript environments don't implement setTimeout, which causes Video.js to fail on require. Instead, move our Dom.isReal() check earlier to before we call setTimeout.
Menus with one item are hidden if they have a title, because adding the title increments the hide threshold, but the title is not counted as an item. e.g. the chapters menu if there is a single chapter.
Add a `retryOnError` option. When set, during source selection, if a source fails to load, we will retry the next item in the sources list. In the future, we may enable this by default.
A source that fails during playback will *not* trigger this behavior.
Fixes#1805.
When preloadTextTracks option is set to false, it still preloads the default text track. This leads to duplicate tracks once the mode changes to showing and the track is loaded a second time. This includes the default text track in the behavior defined by the preloadTextTracks option.
Fixes#7019
On native playback engines, like Safari, for some streams, seekable and
currentTime won't have correct values until video data has started
loading. Previously, we only tried to turn toggle tracking on
durationchange, now we also do it on canplay.
This is a followup to #7034 which helped prevent the live tracker from
showing up in some cases.
Adds a debug build to video.js that does the following:
- Exposes DomData on video.js. DomData our internal event tracking object and should be empty on player dispose.
- Set log level to debug by default.
The progress control is updated inside of requestAnimationFrames (rAFs). Normally, this is fine. However, when a tab is hidden, rAFs are generally not triggered. So, what happens is that we get a cached rAF from the last time the tab was active. When we come back to be active, we update again, but because we already have a named rAF, we don't clear it out and instead that one gets triggered. This isn't an issue if the video is still playing, because in a second, another rAF will be triggered which will update things. However, if the video has ended, we won't get any more updated and the progress bar will still be in the old position.
Instead, when the document becomes hidden, we should clear out both the SeekBar#update and the Slider#update rAFs. Doing just one, unfortunately, isn't enough. In addition, we also only re-enable the interval if we aren't ended or paused and ignore the update method if the tab is hidden.
Fixes#7086
Since we switched to using adding up offsets to calculate the pointer position relative to the current element, we've had some issues, particularly on iOS, where a translated parent would cause us to miscalculate the position. This is currently a quickfix for the issue, and I'd like to spend some time to figure out a better solution that hopefully won't require us to iterate through the DOM and add up the transform matrix.
On iPads, if the player is inside a floating div, when fullscreen, we'll have an incorrect offset value. Instead, we should stop counting our offsets once we get to our fullscreen element (i.e. the player) because in fullscreen it's outside the regular flow, and we don't actually want to add offset the float gives us inline.
Follow up from #6982. We previously threw an error, but we've seen it
happen unexpectedly. Instead, we should log an error.
We will still throw an error if the event is undefined or null.
Here, if we have a `log` object on the current object, we should use it,
otherwise, we use a default `log` object.
Using Video.js's .bind still makes us attach prototype methods as
handlers. Then when one is removed, all handlers are removed.
Instead, use arrow methods to make these methods unique.
Fixes#7013.
Fixes an issue in native Safari and Android HLS playback where liveCurrentTime returns Infinity (as we don't have a seekableEnd or seekableEnd is actually Infinity). Which causes the new live ui to show up when we don't really have a live window.
Instead of returning Infinity when liveCurrentTime is Infinity, return 0. So that everything knows that we do not have a seekable window of live playback.
The video dimensions aren't necessarily known at loadedmetadata particularly with native playback on iOS. In fluid mode, the player defaults to 16:9 and does not update once the dimensions are known.
- Updates player styles on resize events.
- Fixes arguments passed to addEventedCallback so the callbacks are executed.
Fixes#6939
This needs to be cast before exporting so users
can confidently pass it into their videojs config
and not worry about videojs internals doing strict
equality checks against true/false.
Co-authored-by: Kevin Kipp <kkipp@cloudflare.com>
Allows the editing of a track's label after its creation. Menu buttons will listen for the labelchange event and update their content accordingly.
This is technically divergent from the spec, which says it's readonly, but it can be useful for Video.js users.
Co-authored-by: Claudia Hinkle <chinkle@chinkle-mn1.linkedin.biz>
Skipping the tabIndex property on created elements due to #6145
optimizations blocks them from receiving keyboard events, due to not
being focusable; for example this breaks closing ModalDialog elements by
pressing Escape.
Fix this by always setting tabIndex, as the element may return the same
value even though the property has not been explicitly set.
Fixes#6870
For whatever reason, when the font size for text tracks is changed in
the text track settings dialog, we set a bottom of 2px on the cue.
This was added as part of the initial vtt work for Video.js in
4e5c28cc56 (diff-8169d53aa7eee6cab5f85b6641ef3117R176).
However, this doesn't seem to be doing anything right now and having it
means that when font-size is changed, multiple cues end up with a button
value of 2px causing them to overlap and obscure each other.
This works fine if the cues are positioned away from each other,
however, if multiple cues are positioned by default and a large font
size is used, while they will now stay on their lines, they may
partially obscure each other. This does not fix that issue and may
require modification (addition of overrides) to vtt.js to properly
support.
From my understand, in the changes #5773, the Y position of all the
boxes is already calculated and accounted for in the offsetY value we
get. However, because the HTML coordinate system has Y=0 at the top,
when we do offsetY/boxH, we get a position relative to the top of the
element. However, we expect that position relative to the "start" of the
slider, or the bottom of it. Therefore, we want to get the inverse
value, which is '1 - clamp(offsetY/boxH)'.
Fixes#6863
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.
As part of #6588, we started using the crossOrigin method. However, it's
possible that a tech doesn't support this. Notably, the Flash tech. We
should instead have an abstract method on Tech that returns nothing so
we don't fail on those browsers.
Following https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats
and https://hpr.dogphilosophy.net/test/index.php . These are formats that are supported
on some (most?) browsers.
Tested with a patched version of seafile. The flac and wav files correctly plays on
chromium on my Linux laptop and the caf file plays on my iPad.
(Chromium appears to play the caf file just fine but claim to not support it.)
Of course not all browsers support these but according to #5982 and my test result
I assume the browser detection is implemented somewhere else already.
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 Fullscreen API is unsupported in iOS, so self.fsApi_.fullscreenerror and self.fsApi_.fullscreenchange are undefined, which was breaking the player after entering fullscreen by removing all bound player events.
Fixes#6707, fixes#6684, fixes#6645.
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>
This loosens the regex used for Edge. Still detects legacy Edge but now
also detects the new Edge.
IS_CHROME still returns true for Edgium but I think that it's worth
keeping that as the behavior should be pretty close. If there is a need
to differentiate, can check IS_EDGE and also whether IS_EDGE &&
IS_CHROME is present. Combining with IS_WINDOWS could also be useful as
some capabilities of Edge are only available in Windows.
We had to turn off strict mode (#4551) in Video.js due to a change in vtt.js. That has now been fixed in videojs/vtt.js#40 and released as part of 0.15.2 which will be available via #6333.
Fixesvideojs/vtt.js#15
Any programmatic call to focus when playing back DRMed content on IE/Edge causes the video element to turn black. Instead, don't call focus() in those cases.
Fixes#6270.
iPadOS defaults to desktop mode unless Safari is opened in split screen mode. The only way to detect it is to assume that Safari with Touch enabled is iPad. This is good enough until and if a better way to detect it is made available.
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.
Reimplementation of https://github.com/videojs/video.js/pull/2192
on current code. Seems to work but has not been carefully tested,
especially on conditions such as slow networks and complex tracks.
For https://github.com/videojs/video.js/issues/5252
A `preloadTextTracks` tech option is added, set to true by default,
to keep current behavior intact. Alternate behavior can be enabled
by setting this to false.
This delays loading of the VTT cue files until they are selected.
For sites like Wikipedia that tend to have large numbers of
crowdsourced subtitles and can show many files together on one
page, this saves a lot of unnecessary network transfer and API
hits.
Does mean there may be dropped cues while switching to a track
that requires on-demand loading.
Example usage:
videojs(element, {
html5: {
preloadTextTracks: false
}
};
On iOS, when disconnecting the headphones, we may receive a stalled or suspend event. In those case, we may actually still have buffer available for us to play through rather than actually having stalled or suspended. In those cases, we should pause the player to prevent playback issues.
This will prevent a null exception when a video.js is implemented in a 'display:none' iframe on Firefox (<62).
This is a fix in continuation of the PR #3664 regarding a bug in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=548397
PR #5083 introduces a fix to #5624, an issue with click events when
Polymer's tap gesture is being used. However, this causes an issue where
`player.on('click')` no longer triggers from the play toggle. Thus, we
revert the change. In addition, looking at Polymer 2 and 3, they
recommend against using the tap gesture.
Fixes#6092
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.
