모바일에서 영상 재생 안될 때

개요

• 해당 영역이 mobile 환경에서 재생이 안된다는 이슈 발생 (IOS - safari, chrome 에서 확인)

개선 방향

• video tab 에 option 추가

  <video
    className={styles.video}
    muted="muted"
    autoPlay={true}
    loop
    preload="auto"
    playsinline="true" // 모바일에서 페이지 첫 진입 시 전체화면으로 안넘어가게 해주는 옵션 & 모바일에서 재생 가능하게 해줌.
  
    <source
      type="video/mp4"
      src="https://wizschool-etc.s3.ap-northeast-2.amazonaws.com/creator_video_1086_700.mp4"
    />
  </video>

• playsinline=”true” 와 source type=”video/mp4” 추가

https://velog.io/@huhyj97/html-video-태그-모바일-전체화면-이슈feat.아이폰 (참고)