Comments (2)
Hi @beaufortfrancois and thanks for reaching out for this browser update!
The feature looks nicer than the current API as we now will be able to also integrate subtitles and even some of the application's UI in the window.
Though I checked and didn't see support for other browsers than Chrome (the spec seems to be an "Unofficial Proposal Draft" and its Chrome Platform Status page indicates "no signal" and even some reticences from other vendors). Is there incoming updates to the API to reach a consensus? I would prefer a browser-independent solution.
Also, I think that in a RxPlayer context, it will be the role of the application (who integrates the RxPlayer) to actually rely on such API so it can decide what to put in it.
However, the RxPlayer might want to detect when a pip window containing the video element is displayed for two reasons:
-
the
throttleVideoBitrateWhenHidden
option throttles the video bitrate when the video is not visible for more than a minute. Normally, we use the page visibility APIs for this, but the Picture-In-Picture modes now forces us to be a little more clever.For that one, I guess we have to check when a PiP window containing the media element is loaded or unloaded. From what I understand, I can check on the
documentPictureInPicture
's"enter"
event that a PiP window has been enabled and then I can check that the media element is inside of it.
However, for the closing part, I'm not sure, does the correspondingPictureInPictureWindow
's"unload"
event catches all cases of the PiP window being closed?
Also there's the condition where we need to check that the media element is added removed from a still-active PiP window (such as the PiP window is still active, but the media element is back to the regularWindow
's DOM, or the other way around) where I'm unsure of what the most practical way would be. -
similar, the
limitVideoWidth
option restricts the video quality according to the video element's width. Here it's not the size of the PiP window that is to interest to us, but of the video element.
Here the main interrogation is: if we keep the old reference to the video element before it was inserted in aPictureInPictureWindow
, do we still get updates from aResizeObserver
? Do theclientWidth
andclientHeight
attributes are updated accordingly to its dimensions inside thePictureInPictureWindow
?
from rx-player.
Hi @beaufortfrancois and thanks for reaching out for this browser update!
The feature looks nicer than the current API as we now will be able to also integrate subtitles and even some of the application's UI in the window.
Exactly! 🥳
Though I checked and didn't see support for other browsers than Chrome (the spec seems to be an "Unofficial Proposal Draft" and its Chrome Platform Status page indicates "no signal" and even some reticences from other vendors). Is there incoming updates to the API to reach a consensus? I would prefer a browser-independent solution.
The Chrome team is the one proposing this API based on feedback we’ve received from the Picture-in-Picture API for <video>
. It will follow the usual path for standardization. As you saw, we’ve started engaging with Firefox and Apple folks respectively at mozilla/standards-positions#670 and WebKit/standards-positions#41 and from where I stand, we’re still discussing and will hopefully reach consensus. The origin trial is actually part of these efforts as web developers feedback is key there.
Also, I think that in a RxPlayer context, it will be the role of the application (who integrates the RxPlayer) to actually rely on such API so it can decide what to put in it.
However, the RxPlayer might want to detect when a pip window containing the video element is displayed for two reasons:
- the
throttleVideoBitrateWhenHidden
option throttles the video bitrate when the video is not visible for more than a minute. Normally, we use the page visibility APIs for this, but the Picture-In-Picture modes now forces us to be a little more clever.
For that one, I guess we have to check when a PiP window containing the media element is loaded or unloaded. From what I understand, I can check on thedocumentPictureInPicture
's"enter"
event that a PiP window has been enabled and then I can check that the media element is inside of it.
Yes. You can also check at any time whether documentPictureInPicture.window
is null.
However, for the closing part, I'm not sure, does the corresponding
PictureInPictureWindow
's"unload"
event catches all cases of the PiP window being closed?
Yes.
Also there's the condition where we need to check that the media element is added removed from a still-active PiP window (such as the PiP window is still active, but the media element is back to the regular
Window
's DOM, or the other way around) where I'm unsure of what the most practical way would be.
Would MutationObserver
work for you?
- similar, the
limitVideoWidth
option restricts the video quality according to the video element's width. Here it's not the size of the PiP window that is to interest to us, but of the video element.
Is it safe to assume the video size covers 100% of the PiP window size?
Here the main interrogation is: if we keep the old reference to the video element before it was inserted in a
PictureInPictureWindow
, do we still get updates from aResizeObserver
?
Do theclientWidth
andclientHeight
attributes are updated accordingly to its dimensions inside thePictureInPictureWindow
?
I’ve just tried it and I still get updates from a ResizeObserver
observing the video before and entering PiP. clientWidth
and clientHeight
are updated properly as well.
const resizeObserver = new ResizeObserver((entries) => {
console.log(`New size: ${entries[0].target.clientWidth}x${entries[0].target.clientHeight}`);
});
resizeObserver.observe(document.querySelector('video'));
from rx-player.
Related Issues (20)
- Inconsistency in v4.0.0-beta.0 release note example for DASH `endNumber` attribute handling HOT 1
- INCOMPATIBLE_KEYSYSTEMS error using DASH/Widevine on Panasonic 2019 HOT 16
- Expose text adaptation's role HOT 4
- Support in-manifest LAURL for ClearKey HOT 4
- Streams media error on Edge HOT 4
- Segment GCed multiple times in a row warnings using DASH/PlayReady on Vestel MB211 HOT 6
- DISCONTINUITY_ENCOUNTERED errors after consecutive audio track switches, for DASH live content, result in an endless loop HOT 2
- KEY_GENERATE_REQUEST_ERROR - The initDataType parameter is empty (observed on Tizen 2017) HOT 7
- Video playback issues on Android Mobile in Chrome HOT 9
- Check Dolby Atmos and Dolby Vision in current stream HOT 3
- Unable to play some streams in Edge browser on RxPlayer v3.30.0 HOT 11
- Streams freeze on first frame with audio only playback on Edge browser (and probably Chrome) HOT 6
- Safari 17 brings MSE to iOS HOT 10
- Some DASH/Widevine streams are looping on a Vestel MB130 HOT 3
- First playback of PlayReady content fails on EDGE browsers HOT 3
- PIPELINE_ERROR_DECODE error observed in Edge browser when zapping live channels HOT 2
- Safari 17.1 issue with playback DRM content HOT 3
- playing MKV VOD with multi Audio track HOT 7
- Infinity loading state on Safari Mobile when autoplay is false HOT 17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rx-player.