PHP언어 웹개발 서버관리 DB관련 모바일 Mac세상
카테고리 없음2019. 4. 12. 01:13

Safari나 Chrome에서

<video id=“vid” muted="muted"> 태그를 이용해서 비디오를 자동 재생 (autoplay="autoplay")을 지정해도 안될 때

Javascript을 이용해서 자동 재생을 해주면 됩니다. 

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

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

 

 

 

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

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

 

참고: 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등)

 

 

추가로, Muted를 끄기(소리 켜기)에 대한 Javascript

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

 

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

 

 

자동 재생 가능 여부

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

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

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

방문시 위의 하트모양의 "♡ 공감"을 눌러주시면 감사하겠습니다.
(로그인하지 않으셔도 가능)
Posted by saltdoll

댓글을 달아 주세요

  1. 잘 보고 갑니다~~

    2020.07.08 15:54 [ ADDR : EDIT/ DEL : REPLY ]