code

비디오 자동 재생이 작동하지 않음 - 수정 프로그램 찾기

starcafe 2023. 2. 27. 23:26
반응형

비디오 자동 재생이 작동하지 않음 - 수정 프로그램 찾기

리액트에 배경화면이 있어요자동 재생을 원합니다.자동 재생이 동작하지 않는다.

시도했습니다.

  1. 자동 재생
  2. 자동 재생
  3. autoPlay="자동 재생"

제가 특히 이상하게 생각하는 것은 가끔 효과가 있다는 것입니다.하지만 그러면 멈출 거야

여기 지금 있는 그대로의 코드가 있습니다.

<video loop autoPlay>
       <source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>

여기 컴포넌트의 전체 섹션이 있습니다.트랜지션을 사용하고 있습니다만, 지난 주 시점에서는 영향이 없었습니다.

<div className="video-background">
    <Transition in={true} timeout={1000} appear={true}>
        {(state) => (
          <div id="banner" className="video-foreground" style={{ 
                            ...transitionStyles[state]
                        }}>
                        <video loop autoPlay>
                            <source src={require('../../videos/background.mp4')} type="video/mp4" />
                        </video>
          </div>
        )}
     </Transition>
  </div>

음, 내 경우는 음소거 특성을 추가했어.

이것을 시험해 보세요.

<video ... autoPlay muted />

Chrome 66은 음소거 속성이 없는 모든 비디오의 자동 재생을 중지합니다.

내 경우, 리액트의 비디오는 대문자를 사용하지 않았기 때문에 재생되지 않았다.autoplay.그래야 한다.autoPlay.

이것을 시험해 보세요(동작합니다). autoPlay={true}

해라<video loop muted autoPlay controls = ''> ... </video>

컨트롤을 배치하면 비디오를 재생할 수 있고, 다음으로 컨트롤 = '을 배치하면 컨트롤에서 버튼을 제거하고 자동 재생이 다시 작동한다고 합니다.

useRef를 사용했더니 동영상을 재생하지 않는 문제가 해결되었습니다.

const vidRef=useRef();

useEffect(() => { vidRef.current.play(); },[]);

<video
  src="/videos.mp4"
  ref={ vidRef }
  muted
  autoPlay
  loop 
/>

음소거 및 제어 기능을 사용한 자동 재생 작업

     <video controls  muted  autoPlay > 
              <source type="video/webm" src=".../.webm" />
     </video>

음.. 이거 드셔보세요.

autoplay=""

이것처럼.

<video autoplay="">
       <source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>

이 문제에 직면하고 있는 경우는, 이것을 사용해 주세요.100%로 동작합니다.

<video
          src="/videos/ab.mp4"
          controls
          muted
          autoPlay={"autoplay"}
          preLoad="auto"
          loop
        > something</video>

이 코드를 통해 해결 방법을 얻을 수 있습니다.

<video
  src="/videos.mp4"
  controls
  muted
  autoPlay={"autoplay"}
  preLoad="auto"
  loop 
 > </video>

비디오 본문에 무언가를 추가하는 것은 내 경우에 효과가 있다.

<video
   src="/assets/videos/presentation.mp4"
   muted
   autoPlay
   loop >
      My brand like image alt
</video>

당신이 가지고 있는 순서도 다르다고 생각해요.자동 재생 루프 음소거 컨트롤을 사용했는데 이 컨트롤이 있는 컴퓨터에서만 비디오가 작동했습니다.음소거 autoPlay를 실행한 후 비디오는 모바일뿐만 아니라 자체 재생됩니다!

import video from 'src/../../video'
    
<video muted autoPlay loop>
      <source src={video} />    
</video>

동영상이 음소거될 때만 작동하므로 추가해 주세요.muted기여하다

<div>
    <video src="/assets/loading.mp4" loop autoPlay muted className="h-[300px] w-auto" ></video>            
</div>

해라allow="autoplay"

언급URL : https://stackoverflow.com/questions/50259734/video-autoplay-not-working-trying-to-find-a-fix

반응형