Comments (17)
peaBerberian
commented on July 1, 2024
1
It seems that Safari mobile here choose to not follow the preload: "auto" hint unlike other browsers, so it doesn't preload anything until play is called :/
A solution could be to add some exception (or detection?) when deciding whether to trigger the "LOADED" state.
Interestingly, we already had a work-around just for Safari Mobile, but it seems that they changed something that made it not enough?
We could just make it "LOADED" right away in Safari mobile for directfile contents, once the autoplay situation has been handled, though it will mean that it will be "LOADED" but might buffer once you play, so that's not the same semantic than the usual "LOADED" state.
We could also do a hack like calling play+pause (or maybe a seek?) but I'm wary of the consequences it could have here.
I can make a branch with the fix if you know how to test this.
from rx-player.
peaBerberian
commented on July 1, 2024
1
Maybe we also broke our already-existing work-around because the comment description of it make the exact same observation you had.
So I'll also look at the history there.
from rx-player.
peaBerberian
commented on July 1, 2024
1
I think I get it, before the work-around was only necessary for when the media element has the attribute "playsinline" .
Though here, I guess you don't have "playsinline" but the issue is still here. So it may be a safari mobile change after all
from rx-player.
Florent-Bouisset
commented on July 1, 2024
1
Hello, thanks for you feedback,
I have made a PR to address the issue you mentioned when having autoplay set to true.
BTW:
We also noticed a bug in Safari MacOS. For RxPlayer 3.33.0 this time when autoplay: true hls livestream does not start (LOADED state is not called). To fix it we reverted to 3.32.1 (the last version on which it works properly).
reproduced on Safari 17.3.1 / MacOS 12.7.3
For the issue you had on iOS with autoplay false, do you have the attribute playsinline on the video element?
If you have it, the PR #1406 should fix the issue when having attribute playsinline.
from rx-player.
jakubjereczek
commented on July 1, 2024
1
Sorry for late response, I was quite busy. I checked your fix @Florent-Bouisset and now it works - it is possible to play with autoplay: false.
from rx-player.
jakubjereczek
commented on July 1, 2024
I checked on https://developers.canal-plus.com/rx-player/ (DirectFile, Big Buck Bunny MP4), If there is autoplay: false, the buffering indicator doesn't disapper, but the stream works fine when I press play.
from rx-player.
jakubjereczek
commented on July 1, 2024
Hello, thanks for answer.
Is there anything specific you would like me to check that would help you?
from rx-player.
Florent-Bouisset
commented on July 1, 2024
Hello @jakubjereczek, I reproduced the issue on the version 4.0.0, however I don't have the issue in the version 3.33.0 you mentionned. Can you confirm the version you had a bug with ?
from rx-player.
jakubjereczek
commented on July 1, 2024
Locally on our application I reproduced on 3.33.0/2. But I just checked on https://developers.canal-plus.com/rx-player/ and only 4.0.0 has mentioned issue.
I will try to check if any other initialization settings on our side affect this.
from rx-player.
Florent-Bouisset
commented on July 1, 2024
I have made a PR that fixes the issue for version 4 (at least on the device I tested with).
I can also backport the fix to version 3.32 so you can test it with your application and let us know if it resolves the issue or not.
from rx-player.
jakubjereczek
commented on July 1, 2024
@Florent-Bouisset ok, that would be great
from rx-player.
Florent-Bouisset
commented on July 1, 2024
After further investigation, I realized that the sequence of creating and disposing RxPlayer instance was wrong in our demo.
So we could have at a moment two RxPlayer instances using the same video element (this should not be done).
Maybe your application is doing the same and you have two players using the same video element?
I added a dev to check if the video element is already in used by another instance and that throw an error if it's the case.
const myVideo = document.querySelector("video")
new RxPlayer(videoElement)
const player = new Player({ videoElement: myVideo});
const player2 = new Player({ videoElement: myVideo}); // this throw an error "The video element is already attached to another RxPlayer instance."I created a branch based on v3.32.2 named fix/multiple_player_instance_v3 that include a fix #1393 and the check #1394 , can you try your app with that specific branch? I think you can do that with a npm link.
Let me now if you observe any changes. If you have an error "The video element is already attached to another RxPlayer instance." , you may have to update you application code.
from rx-player.
peaBerberian
commented on July 1, 2024
(Sorry a PR merge closed this issue automatically when it shouldn't have, I re-opened it)
from rx-player.
jakubjereczek
commented on July 1, 2024
I didn't have time to reply, but I'm back. I'll check everything right away.
BTW:
We also noticed a bug in Safari MacOS. For RxPlayer 3.33.0 this time when autoplay: true hls livestream does not start (LOADED state is not called). To fix it we reverted to 3.32.1 (the last version on which it works properly).
reproduced on Safari 17.3.1 / MacOS 12.7.3
from rx-player.
jakubjereczek
commented on July 1, 2024
@Florent-Bouisset I used fix/multiple_player_instance_v3 and created a build to test on my Safari Mobile, but without any differences.
Logs:
(...)
log: "API: current media element state tick" "event" "loadedmetadata" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\nloadedmetadata"
log: "Init: Calculating initial time"
log: "Init: Initial time calculated:" 0
info: "Init: Can begin to play content"
info: "Init: Set initial time" 0
info: "API: Seeking internally" 0
log: "API: current media element state tick" "event" "internal-seeking" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\nseeking"
log: "API: current media element state tick" "event" "seeked" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\nseeked"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
log: "API: current playback timeline:\n\n^0" "\ntimeupdate"
log: "API: current media element state tick" "event" "timeupdate" "position" 0 "seeking" false "internalSeek" null "rebuffering" false "freezing" false "ended" false "paused" true "playbackRate" 1 "readyState" 1
(...)
I didn't receive the The video element is already attached to another RxPlayer instance. error either.
from rx-player.
jakubjereczek
commented on July 1, 2024
Yes, we have playsinline property, I will check #1406.
from rx-player.
jakubjereczek
commented on July 1, 2024
Resolved
from rx-player.
Related Issues (20)
- 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
- Arrêt brutal du player en Replay sur le mycanal sur HOT 4
- PIPELINE_ERROR_INVALID_STATE error when using Playready/Dash stream (mixed encrypted/unecrypted content) HOT 4
- fromFirstPosition does not start from actual first position in live DASH manifest (multi period live with SSAI) HOT 2
- Freezed VOD stream and lot of audio discontinuities on Samsung Tizen 2017 HOT 11
- Pre-fetching DRM licenses for current and future content
- Widevine LD fallback not triggering in RxPlayer HOT 7
- dashif:laurl not parsed after recent changes
- Resolve base url not correct when root MPD base url start with `/` HOT 1
- DRM: Zero filled TENC KID cause a NO_PLAYABLE_REPRESENTATION error HOT 4
- MEDIA_ERR_DECODE errors are being thrown by rxPlayer when starting the stream HOT 8
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.