Можно ли добавить видео в фоновом режиме с помощью next. js? - PullRequest
Новая
       11

Можно ли добавить видео в фоновом режиме с помощью next. js?

0 голосов
/ 16 июня 2020

В ответ я бы сделал что-то вроде этого: 

type Props = {
 url: string;
}
export const Video: React.FC<Props> = ({url}) => {

  return (
    <video
      id="background-video"
      loop
      autoPlay
      muted
      style={{
        position: "relative",
        width: "100%",
        height: "15rem",
        left: 0,
        top: 0,
      }}
    >
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
};

, но как мне это сделать дальше. js например, заставить его ждать и получать видео в браузере?

1 Ответ

1 голос
/ 17 июня 2020

Конечно, можешь. Ваша проблема не имеет ничего общего с Next JS

Автовоспроизведение будет запускаться при каждой визуализации вашей страницы.

Если вы хотите отложить видео, вы можете добиться этого, добавив setTmeout, useRef и useEffect

Плюс, вы должны переместить свой стиль на video tag

Обратите внимание: 

import React, { useEffect, useRef } from 'react';

export default () => {
    const videoRef = useRef();

    useEffect(() => {
        setTimeout(()=>{
            videoRef.current.play()
        },5000)
    }, []);

    return (
        <video
            ref={videoRef}
            controls
            width="250"
            loop
            muted
            style={{...}}>
               <source {...{sourceProps}}>
       </video>
      )

}

...