React-player: play or pause video when visible on viewport

Created on 13 Feb 2019 · 3Comments · Source: cookpete/react-player

I have used react-on-screen npm(which has isVisible functionality, which says if particular section is visible or not). I have done something like whenever "isVisible" is true, set "playing" attribute "true" or else "false". Now problem is when video is buffering on viewport, and we scroll down, so that "isVisible" will be false, and so "playing" must become "false" but video still plays. This problem is only occurred first time when website loads because of buffering, after that, the "isVisible" functionality works fine, means it play or pause video whenever visible on viewport.

Source

denishrana09

Most helpful comment

I am doing this using react-waypoint, it seems to work well.

import React, { useState } from 'react';
import { Waypoint } from 'react-waypoint';

const AutomaticPlayer = function(props) {
  let [shouldPlay, updatePlayState] = useState(false);

  let handleEnterViewport = function() {
    updatePlayState(true);
  }
  let handleExitViewport = function() {
    updatePlayState(false);
  }

  return (
    <Waypoint 
      onEnter={handleEnterViewport}
      onLeave={handleExitViewport}
    >
      <ReactPlayer
        playing={shouldPlay}
        {...props}
      />
    </Waypoint>
  )
}

Note you'll also want to handle user play/pause and update the state using onPlay and onPause

arronhunt on 27 Feb 2019

👍2

All 3 comments

I am doing this using react-waypoint, it seems to work well.

import React, { useState } from 'react';
import { Waypoint } from 'react-waypoint';

const AutomaticPlayer = function(props) {
  let [shouldPlay, updatePlayState] = useState(false);

  let handleEnterViewport = function() {
    updatePlayState(true);
  }
  let handleExitViewport = function() {
    updatePlayState(false);
  }

  return (
    <Waypoint 
      onEnter={handleEnterViewport}
      onLeave={handleExitViewport}
    >
      <ReactPlayer
        playing={shouldPlay}
        {...props}
      />
    </Waypoint>
  )
}

Note you'll also want to handle user play/pause and update the state using onPlay and onPause

arronhunt on 27 Feb 2019

👍2

Good answer from @arronhunt – I gave a similar answer here.

cookpete on 24 Mar 2019

Hi I have a very similar question so I wonder if it can be asked here.

I have a video Carousel and I would like to pause the video while the carousel item is inactive. However I don't want the video starts playing while it is active. But

  const [index, setIndex] = useState(0);
  ...
  {videos.map((video, itemIndex) => (
      <ReactPlayer
        playing={itemIndex === index}
      />
  )}

I guess I need playing={false} (I want to pause the video while the carousel is moving). But it didn't work.

starts playing the video when the carousel is active, which I would like to avoid. So I am not sure what is the best way to deal with this. Thanks for the help