add autoplay logic for embedded player (#5399)
Add autoplay logic when player is embedded. Adds new `autoplay` prop to `VideoJs` component for specifying autoplay value.
This commit is contained in:
parent
d04b0f09ba
commit
4cf9a455bc
2 changed files with 18 additions and 8 deletions
|
@ -45,6 +45,7 @@ type Props = {
|
|||
onPlayerReady: Player => void,
|
||||
isAudio: boolean,
|
||||
startMuted: boolean,
|
||||
autoplay: boolean,
|
||||
toggleVideoTheaterMode: () => void,
|
||||
};
|
||||
|
||||
|
@ -157,20 +158,31 @@ class LbryVolumeBarClass extends videojs.getComponent(VIDEOJS_VOLUME_BAR_CLASS)
|
|||
properties for this component should be kept to ONLY those that if changed should REQUIRE an entirely new videojs element
|
||||
*/
|
||||
export default React.memo<Props>(function VideoJs(props: Props) {
|
||||
const { startMuted, source, sourceType, poster, isAudio, onPlayerReady, toggleVideoTheaterMode } = props;
|
||||
const {
|
||||
autoplay,
|
||||
startMuted,
|
||||
source,
|
||||
sourceType,
|
||||
poster,
|
||||
isAudio,
|
||||
onPlayerReady,
|
||||
toggleVideoTheaterMode,
|
||||
} = props;
|
||||
|
||||
const [reload, setReload] = useState('initial');
|
||||
|
||||
let player: ?Player;
|
||||
const containerRef = useRef();
|
||||
const videoJsOptions = {
|
||||
...VIDEO_JS_OPTIONS,
|
||||
autoplay: autoplay,
|
||||
muted: startMuted,
|
||||
sources: [
|
||||
{
|
||||
src: source,
|
||||
type: sourceType,
|
||||
},
|
||||
],
|
||||
autoplay: true,
|
||||
poster: poster, // thumb looks bad in app, and if autoplay, flashing poster is annoying
|
||||
plugins: {
|
||||
eventTracking: true,
|
||||
|
@ -178,8 +190,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
|||
},
|
||||
};
|
||||
|
||||
videoJsOptions.muted = startMuted;
|
||||
|
||||
const tapToUnmuteRef = useRef();
|
||||
const tapToRetryRef = useRef();
|
||||
|
||||
|
|
|
@ -15,6 +15,7 @@ import LoadingScreen from 'component/common/loading-screen';
|
|||
import { addTheaterModeButton } from './internal/theater-mode';
|
||||
|
||||
const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
|
||||
const PLAY_TIMEOUT_LIMIT = 2000;
|
||||
|
||||
type Props = {
|
||||
position: number,
|
||||
|
@ -149,9 +150,7 @@ function VideoViewer(props: Props) {
|
|||
// https://blog.videojs.com/autoplay-best-practices-with-video-js/#Programmatic-Autoplay-and-Success-Failure-Detection
|
||||
if (shouldPlay) {
|
||||
const playPromise = player.play();
|
||||
const timeoutPromise = new Promise((resolve, reject) => {
|
||||
setTimeout(() => reject(PLAY_TIMEOUT_ERROR), 2000);
|
||||
});
|
||||
const timeoutPromise = new Promise((resolve, reject) => setTimeout(() => reject(PLAY_TIMEOUT_ERROR), PLAY_TIMEOUT_LIMIT));
|
||||
|
||||
Promise.race([playPromise, timeoutPromise]).catch(error => {
|
||||
if (PLAY_TIMEOUT_ERROR) {
|
||||
|
@ -221,11 +220,12 @@ function VideoViewer(props: Props) {
|
|||
<VideoJs
|
||||
source={source}
|
||||
isAudio={isAudio}
|
||||
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : null}
|
||||
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
|
||||
sourceType={forcePlayer ? 'video/mp4' : contentType}
|
||||
onPlayerReady={onPlayerReady}
|
||||
startMuted={autoplayIfEmbedded}
|
||||
toggleVideoTheaterMode={toggleVideoTheaterMode}
|
||||
autoplay={!embedded || autoplayIfEmbedded}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue