스마트폰 브라우저는 자동으로 동영상을 재생할 수 없습니다

현재 브라우저에서 애니메이션 자동 재생하기 (mp4)
"muted"속성을 반드시 추가해야 합니다.

<video autoplay muted playsinline src="video.mp4"></video>

브라우저 측면에서 [autoplay] 속성이 있는 애니메이션을 자동으로 재생하려면
소리가 나면 UX에서는 안 될 것 같아요.
확실히 사이트를 열면 갑자기 소리가 나면 싫다.
그래서'muted'를 붙이지 않고 소리를 내지 않도록 설정하면 자동으로 재생되지 않습니다.
참조:https://webliker.info/52510/#toc_8
그래서 React에 설치하고 싶을 때 "muted라고 썼는데 자동으로 재생이 안 돼요?"그래서
힘계(잠시 이동)로 필기를 해결했기 때문이다.

ISSU

오래전부터 올라왔지만 왜 아직 해결되지 않았을까...
나더러 해결하라고 할지도 모르지만 일단 거기에 두세요...

재현

도대체 무티드가 없는지 확인해 볼게요.
codesandbox
https://codesandbox.io/s/nostalgic-currying-7q2vp
이번에 우리는 현장에서 비디오 라벨을 쓰는 모드와react-video 두 가지 라이브러리를 사용했다.

import React from "react";
import ReactDOM from "react-dom";
import { Player } from "video-react";

import "./styles.css";

function App() {
  return (
    <div className="App">
      テスト動画
      <div>
        <video
          autoPlay
          loop
          muted
          playsInline
          width="400px"
          height="200px"
          src="test.mp4"
        />
      </div>
      <Player
        autoPlay
        loop
        muted
        playsInline
        width="400px"
        height="200px"
        src="test.mp4"
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

검사기에서 요소를 보면 역시 아무것도...
비디오 레이블

react-video

라이브러리의 의미...

동력 시스템 해결

결론부터 말하자면, 나는 dangerously Set Inner HTML로 억지로 쓸 것이다.
사실 위의 issu에도 있지만 누군가가 나에게 창고를 만들어 주었다.
github
https://github.com/DylanVann/react-video-tag
저는 이거 참고해서 랩으로 포장한 거예요.
이거 먼저 해볼게요.
codesandbox
https://codesandbox.io/s/jovial-meninsky-zz782

import React from "react";
import ReactDOM from "react-dom";
import { VideoTag } from "react-video-tag";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <VideoTag src="test.mp4" muted autoPlay playsInline loop />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

비록 매우 억지스럽지만, 확실히'muted'가 있다.

총결산

좀 부자연스러운 방법이지만
어쨌든 mp4를 자동으로 틀고 싶어요.이런 상황에서는 해결할 수 있다.
다만 이 해결 방법 자체가 상당히 좋지 않다
다른 좋은 방법이 있으면 알려주세요...
빨리 고쳐졌으면 좋겠어요.