How do I play a hidden video within a react app?

Steven Lavine — Fri, 13 Sep 2019 13:33:08 +0000

I'm learning React by converting a previous jQuery based web app, over to React. However I have hit a snag. I'm trying to get a hidden video to play after x seconds using react-simple-idle-monitor. The I can get the video frame to play, and if I add the controls attribute the video can be played but I work out how to access the video using react.

I have tried using refs, and accessing the document.getElementById('video').

This is my Screensaver component in Screensaver.js

import React, { Component } from 'react';
type Props = {};

export default class Screensaver extends Component<Props> {
  props: Props;

  render() {
    return (
      <div className="screensaver">
        <video muted loop>
          <source
            src="../assets/video/my-video.mp4"
            type="video/mp4"
          />
        </video>
      </div>
    );
  }
}

Here is my render function in App.js

render() {
    return (
      <IdleMonitor
        activeClassName="appActive"
        idleClassName="appIdle"
        timeout={30000}
        onActive={stopScreensaver}
        onIdle={startScreensaver}
      >
        <div className="panels">
          <Home />
          <Screensaver />
        </div>
      </IdleMonitor>
    );
  }

And here are the functions to start and stop the screensaver in actions/screensaver.js

export function startScreensaver() {
   const videoFile = document.getElementById('screensaver-video');
   videoFile[0].play();
}
export function stopScreensaver() {
  const videoFile = document.getElementById('screensaver-video');
  videoFile[0].pause();
  videoFile[0].currentTime = 0;
}

After the timeout triggers, the video container is shown via CSS but the video does not play.

At the moment I get the error that videoFile[0] is undefined.

DEV Community: Steven Lavine

How do I play a hidden video within a react app?