카테고리 없음

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

saltdoll 2019. 4. 12. 01:13
반응형

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 파일이 재생이 안될때

html5의 태그에 mp4 파일이 재생이 안될 때가 있습니다. 이유는 간단하다, 코덱이 다르기 때문입니다. video태그의 공식적인 지원 비디오 코덱은 MP4 H.264이고, 오디오는 AAC or MP3입니다. 간혹 MPEG-4코

blog.edit.kr

 

 

 

 

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)