Comments (3)
We added a "warning"
event in the v3.6.0
that should trigger in case of a "NotAllowedError" when the browser blocks autoplay.
In that case, the "warning"
event contains a "MEDIA_ERROR"
with the code: "MEDIA_ERR_BLOCKED_AUTOPLAY"
.
Warnings/errors and how to handle them is documented here.
Basically, you will have to do something allong the line of:
player.addEventListener("warning", (warning) => {
if (warning.code === "MEDIA_ERR_BLOCKED_AUTOPLAY") {
// show UI to start the stream manually
}
});
from rx-player.
Hello,
We were working on it!
For just the rejection of play part, I see two things that would work:
- Emit the fact that we couldn't autoPlay as a warning and let the UI react to it
We already have a warning event which communicates about various errors when they are not fatal (they do not stop playback).
We could add a specific "AUTOPLAY_NOT_ALLOWED"
error in the rx-player, which will be sent via the warning
event when this case arise.
Then, the task of managing that particular case will be on the UI side, having something like:
player.addEventListener("warning", function handleWarnings(error) {
if (error.code === "AUTOPLAY_NOT_ALLOWED") {
displayAutoPlayNotAllowedPopUp();
}
});
- Provoke the auto-play feature directly on the UI
This solution can already work today.
The rx-player usually goes through several states when starting a content in autoPlay mode, in this order:
LOADING -> LOADED -> PLAYING
- The rx-player has the
PLAYING
state whenloadVideo
is called - it goes through its
LOADED
state when the"canplay"
event is received from the media element - just after that, the
play
method is called, - the player changes to the
PLAYING
state once the"play"
event is received from the media element.
Based on that, you can manage the autoPlay feature yourself just by:
- setting
autoPlay
tofalse
(or not setting it) inloadVideo
- wait for the playerStateChange event with the payload
LOADED
- call and manage the
play
call yourself
Here we would have in the UI:
player.addEventListener("playerStateChange", function handleStateChanges(state) {
if (state === "LOADED") {
// try to auto-play
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
if (error.name === "NotAllowedError") {
displayAutoPlayNotAllowedPopUp();
}
});
}
}
});
The first point is being implemented right now, the second one has the advantage of already being available.
Then again, we seem to have another issue for Safari:
From the very few tests we could do on it (it is kind of hard for us to do for dumb reasons -> we mostly work on computers dual booting linux + windows), it seems that this browser also blocks the canplay
and the loadeddata
event.
We will continue our tests, but if this is true, it means that it will be difficult for us to send the LOADED
event like we do for other browsers.
It also means that both of the solution exposed higher in this post will not work right now for Safari.
In that case, we will have to rely on another method to switch to the LOADED
state (from the size of the current buffer, the ready state etc.).
EDIT: added precision about what a "fatal" error means
from rx-player.
Thank you for the update.
Currently got this temporal fix for autoPlay
, which works on iOS and Android.
Create rx-player with
const rxPlayer = createModule(VIDEO_PLAYER, { videoElement: videoEl });
rxPlayer.dispatch(MUTE);
rxPlayer.dispatch(LOAD, {
url: action.video.url,
transport: action.video.containerType,
autoPlay: state.autoPlay,
startAt: {
position: action.position,
},
});
I had to sligthly alter MUTE/UNMUTE functions
MUTE: () => {
const videoEl = player.getVideoElement(); <-- Get current video element
videoEl.muted=true; <-- add muted to video element
player.mute();
},
UNMUTE: () => {
const videoEl = player.getVideoElement();
videoEl.muted=false;
player.unMute();
},
In React.render()
video tag is as following:
{ this.props.autoPlay ?
<video
playsInline
autoPlay <-- requried for mobile to autoPlay
/> : <video
playsInline
/> }
The autoPlay
attribute won't be diabled by autoplay="false"
the atribute itself should be removed. Here is more info on autoPlay attribute.
NOTE: In my code base MUTE
and UNMUTE
did not work without muted
attribute in video tag on both Android and iOS. I have not had time to test in rx-player's demo code base.
P.S. Gladly would help with testing, my dev setup is OS and got iOS test devices.
from rx-player.
Related Issues (20)
- 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
- 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 3
- 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
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.