모바일 브라우저가 WebM 비디오를 지원하지 않는 경우의 대체 이미지

Question

모바일 브라우저를 사용하는 WebM 비디오가 있습니다. 이 브라우저의 WebM을 지원하지 않는 때, 나는 이미지를 보여주고 싶은 :

<video 
    src={video} 
    autoPlay> 
    <img src={poster} /> 
</video> 

을하지만 iOS의 모바일 사파리/크롬/파이어 폭스 브라우저에서, 그것은 검은 배경 아이콘을 재생할 수 없습니다 보여줍니다. 예상대로 이미지를 보여주기 위해 대체되지 않습니다.

그리고 나는 또한 video 태그에 poster 속성을 추가하려고 :

<video 
    poster={poster} 
    src={video} 
    autoPlay> 
    <img src={poster} /> 
</video> 

그리고이 :

<video 
    loop 
    autoPlay> 
    <source src={video} type="video/webm" /> 
    <img src={poster} style={{ width: '100%', height: '100%' }} /> 
</video> 

그것은 작동하지 않습니다, 중.

브라우저에서 WebM을 지원하지 않으면 누구나 이미지를 표시하는 방법에 대한 단서가 있습니다.

Answer 1

@Kaiido으로 말하면, 그것은 미디어를 지원하는 태그가 아니며 대부분의 모바일 브라우저는 src가 재설정 될 때 포스터를 다시 배치하지 않습니다.

그래서 이미지를 직접 바꿔야합니다.

내 스택으로 반작용 사용

가 여기 내 솔루션입니다 :

class App extends PureComponent { 
    state = { 
    isSupportWebM: true, 
    } 

    componentDidMount(){ 
    const videoElement = document.querySelector('.video'); 
    videoElement.addEventListener('error',() => { 
     this.setState({ 
     isSupportWebM: false, 
     }); 
    }); 
    } 

    componentWillUnmount(){ 
    // remove the listener 
    } 

    render(){ 
    const { 
     isSupportWebM, 
    } = this.state; 
    return (
     <div> 
     { 
      isSupportWebM 
      ? <video src={...}></video> 
      : <img src={...} /> 
     } 
     </div> 
    ) 
    } 
} 

의