리액트 오토플레이 솔루션

안녕하세요, DEV 커뮤니티입니다!

오늘 나는 반응 앱의 비디오 요소로 어려움을 겪고 있었습니다. 백그라운드에서 반복 재생되는 웹사이트에 동영상을 삽입하려고 했습니다.

이렇게 하려면 다음과 같이 비디오 태그에 autoPlay , loop 및 muted 속성을 추가해야 합니다.

// App.jsx //

import mutedVideo from './media/muted_vid.mp4'
import './App.css';

function App() {
  return (
    <div className="App">
      {/* VIDEO */}
      <video autoPlay muted loop>
        <source src={mutedVideo} />
      </video>
      {/* // VIDEO */}
    </div>
  );
}

export default App;

소스 코드 번들링 중에 어떤 이유로 React가 계속 무시muted 속성을 유지합니다. 따라서 프로덕션의 최종 결과는 다음과 같습니다.


한동안 Stack Overflow를 조사하고 찾아본 결과, 몇 년 동안 여전히 해결되지 않은 React의 일반적인 문제라는 것을 알게 되었습니다!

또한 이 버그를 극복하기 위한 해결 방법을 찾았습니다. 해결책은 나만의 구성 요소Video를 만드는 것입니다.

// components/Video.jsx //
export default class Video extends Component {
  state = {
    html: "",
  };
  componentDidMount() {
    const src = this.props.src;
    const html = `
        <video autoPlay muted loop>
            <source src=${src} />
        </video>
      `;
    this.setState({ html });
  }
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.state.html }}></div>;
  }
}

이 구성 요소는 비디오의 탁세src를 소품으로 사용하고 직접 주입된<div> 태그와 해당 속성이 있는<video>을 반환합니다.

다음은 새 동영상 구성요소가 포함된 앱 코드입니다.

// App.jsx //

import mutedVideo from "./media/muted_vid.mp4";
import Video from "./components/Video";
import "./App.css";

function App() {
  return (
    <div className="App">
      {/* VIDEO */}
      <Video src={mutedVideo} />
      {/* //VIDEO */}
    </div>
  );
}

export default App;

이제 이것은 생산 출력에서 ​​예상했던 결과를 얻었습니다.



효과로 동영상을 백그라운드에서 쉽게 재생할 수 있습니다.

중요 사항! dangerouslySetInnerHTML는 아무 이유 없이 "위험"하다고 불리지 않습니다. 이 특별한 경우에 사용하는 것이 안전하더라도 다른 많은 경우에 실제로 무엇을 하고 있는지 알지 못하는 한 사용해서는 안 됩니다 :). Here은 이 속성에 대한 자세한 문서입니다.

그런 문제를 다루게 되었습니까? 의견 섹션에서 이야기를 공유하십시오.

즐거운 코딩하세요!

날 따라와