고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
HTML 문서가 로딩된 후에 배경음악이 자동으로 재생되게 하는 경우가 있습니다만, 2018년 1월부터 구글이 크롬브라우저에서 음악이나 영상이 자동재생 되지 않게하는 정책을 시행하게되면서 문제가 발생했습니다
예전에는 audio 태그의 autoplay 옵션을 true로 하면 자동재생이 되었지만, 최신 크롬브라우저에서는 더 이상 자동재생되지 않습니다.
이렇게 된 이유는, 무분별한 광고때문이라고 합니다. 무작위 광고와 자동재생 미디어 때문에 사용자환경이 안좋아 지게 되기 때문이라고 하는데요, 저의 경우는 온라인 학습(LMS)관련 프로젝트를 진행하고 있는데, 자동재생이 되지 않아서 각 차시별로 매번 클릭을 해야만 재생이 되는 문제가 있었습니다.
자동재생이 되는 경우는 다음과 같은 경우로 제한되고 말았습니다.
1. 일시중지(mute)된 상태의 동영상이나 음성
2. 사용자가 자주 재생하는 동영상이나 음성
3. 사용자가 웹사이트 화면을 클릭한 경우
4. 모바일 웹사이트를 홈에 추가한 경우
5. 상단 프레임은 자동 재생 권한 을 iframe에 위임 하여 소리가있는 자동 재생을 허용 할 수 있습니다.
위 제한사항의 5번항목을 이용하여 아래와같이 코딩을 하니 크롬 최신버전에서도 자동재생이 되었습니다. iframe 에 있는 silence.mp3 는 아무런 소리도 나지 않는 음악파일 입니다. mymusic.mp3 가 실재로 자동재생되는 음악파일입니다.
<html>
<head></head>
<body>
<iframe src="../silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="audio" autoplay>
<source src="../mymusic.mp3">
</audio>
</body>
</html>
아직, 테스트를 많이 해보지는 않았지만 몇가지 PC환경에서 테스트한 결과 정상적으로 동작을 했습니다. 참고로 silence.mp3 파일은 첨부파일로 첨부합니다.
참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.
각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요
https://cafe.naver.com/ingsuccess
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| 브라우저 높이 구하기, explorer, chrome,safari 등 웹사이트 높이 (0) | 2019.11.12 |
|---|---|
| PHP 에서 HTML 특수문자 확인하거나 출력하기, URL encoding (0) | 2019.08.06 |
| html canvas 내용을 동영상으로 / 캔버스 내용을 동영상으로 / 캔버스 애니메이션을 동영상으로 변환, 저장, 스트리밍 (1) | 2019.07.06 |
| 웹표준 HTML 마크업/ 웹사이트 정보 표시하기/ 사이트설명 (0) | 2019.07.05 |
| html5 canvas 이미지 합성/ 이미지 겹치기 source-over source-atop 동해둘리의 실전 프로젝트 html canvas 시리즈 #2 (1) | 2019.07.02 |
댓글 영역