video 태그 autoplay 재생이 안될때 (Chrome / Safari)

Safari, Chrome 브라우저에서

<video id=“vid” muted="muted"> 태그를 이용해서

비디오를 자동 재생 (autoplay="autoplay")을 지정해도 안될 때

 

html5의 새로운 태그 <video>

 

해결방법: Javascript을 이용해서 자동 재생을 실행해주면 됩니다. 

(주의: </video> 태그 이후에 script를 추가해 주셔야 합니다.)

<script>
    document.getElementById('vid').play();
</script>

 

브라우저에서 <video>태그의 객체가 생성 후,

Javascritp를 통해서, 해당 비디오 소스를 재생(play)합니다.

 

 

음소거를 해줘야 자동 재생이 가능합니다.

Chrome 경우 음소거 muted="muted"를 넣어줘야만 자동 재생됩니다.

<video autoplay="autoplay" muted="muted">
...
</video>

 

사파리와 크롬의 브라운저 엔진 자체의 정책에서

기본적으로 음소거를 진행하지 않으면,

비디오를 자동 재생(play) 제한이 있기에, 음소거 요소를 추가해 줘야 합니다.

 

참고: https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser

 

 

 

[ Full Example 소스 ]

<video id="vid" 
	width="320" height="240" 
	autoplay="autoplay" loop="loop" 
	muted="muted" controls
	poster="https://www.w3schools.com/images/w3schools_green.jpg">
	<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
	<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
	Your browser does not support the video tag.
</video>


<script>
    document.getElementById('vid').play();
</script>

 

Attribute	Value	Description
width, height	pixels 사이즈	화면의 사이즈
autoplay	autoplay	자동 재생 값이지만, 자동실행이 안될때가 많음
loop	loop	동영상의 반복 실행명령
muted	muted	소리 끔
controls	controls	동영상 컨트롤러(Play, Pause, Full Size등)

 

 

추가로,

Javascript를 이용한 Muted를 끄기(소리 켜기)

<script>
  document.getElementById("vid").muted = ture;// 소리 끄기
  
  //## (주의점)Muted Play중에 Muted을 없애면, 실행이 멈춥니다. #####
  document.getElementById("vid").muted = false;// 소리 켜기 
</script>

 

Note: 사용자 인터랙션이 이루어지지 않은 탭에서 오디오가 포함된 미디어를 프로그램적으로 수행하면 일반적으로 차단됩니다. 차단 조건은 브라우저별로 몇 개 더 추가될 수 있습니다. 

 

 

 

 

 

자동 재생 가능 여부

일반적으로 아래 조건 중 하나라도 해당된다면 자동 재생이 가능하다고 볼 수 있습니다

• 음소거이거나 오디오 볼륨이 0
• 사용자가 사이트와 상호작용 함 (클릭, 터치, 키 누름 등.)
• 화이트리스트에 등록된 사이트; 브라우저가 판단하기에 사용자가 해당 사이트에서 미디어를 자주 재생하거나 수동으로 화이트 리스트에 사이트를 등록한 경우를 포함합니다.
• 자동 재생 정책이 허용으로 지정되어 <iframe>와 document에서 자동 재생을 지원하는 경우

(참고: https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide)

 

 

 

 

video 태그에서 mp4 비디오 파일이 재생되지 않는 또 다른 케이스 

mp4 파일의 비디오 코덱의 문제로 재생되지 않을 때도 있습니다.

2017.06.09 - [Web/WEB기본] - [html5] html5의 video 태그에 mp4 파일이 재생이 안될때

[html5] html5의 video 태그에 mp4 파일이 재생이 안될때