HTML 동영상 재생 안됨 - HTML dong-yeongsang jaesaeng andoem

Question

HTML5 새로운 태그 중 <video>라는 태그가 있습니다. 말그대로 비디오 동영상 파일을 재생시키고자 할 때 사용하는 요소입니다. <video>태그에 대해서 이미 자세하게 다룬 글이 있으므로 잘 모르신다면 아래의 글을 한 번 정독 후 본문을 읽어보시면 많은 이해와 도움이 될 것입니다.

목차 Show

비디오 포맷 호환 목록
자동 재생이 안 된다면?
스크립트를 활용한 자동 재생

HTML5 백그라운드에 무한재생 동영상을 넣자! video 태그 사용법

HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로

rgy0409.tistory.com

위의 본문에서도 나와있지만 정확하게 언급을 하지 않은 부분이 있어서 다시 한 번 개념을 확실히 정리하기위해 이 글을 작성하게 되었습니다. 저도 까먹을 수 있는 부분이기도 하구요.

비디오 포맷 호환 목록

video 태그안에 사용하는 속성 중 autoplay와 loop는 아마도 동영상을 백그라운드에 넣고자 할 때 사용하게 될 것입니다. 그런데 일부 브라우저에서 자동 재생이 안 되는 경우가 있습니다. 동영상 인코딩도 분명 H.264와 AAC 포맷인 MP4임에도 불구하고 말입니다. 아래는 동영상 포맷과 브라우저의 호환성에 대한 표입니다. 참고하시기 바랍니다.

브라우저 종류	MP4	WEBM	OGG
인터넷 익스플로러 (단종)	○	X	X
크롬	○	○	○
파이어폭스	○	○	○
사파리	○	X	X
오페라	○	○	○

익스플로러는 이제 서비스를 중단했기 때문에 다른 브라우저를 중심으로 살펴보시면 될 것 같습니다. 현재까지는 MP4가 모든 브라우저에서 지원이 되는것으로 확인됩니다. 다만 앞서 언급한대로 H.264 + AAC 방식으로 인코딩된 MP4 포맷이어야 합니다. 이점 꼭 유념해 주시기 바랍니다.

자동 재생이 안 된다면?

만약 오토플레이를 설정했음에도 불구하고 자동 재생이 안 된다면 아래와 같이 muted를 사용해 보시기 바랍니다.

<video src="video/cat.mp4" autoplay loop muted></video>

mute라는건 음소거라는 의미입니다. 이것은 크롬과 사파리의 엔진 정책입니다. 동영상의 사운드를 완전히 차단해야 재생이 되도록 설계되었기 때문에 어쩔 수 없는 부분인 것입니다. 아무래도 동영상을 이용한 악용 사례들 때문에 이런 시스템을 적용시키지 않았을까 싶기도 합니다. 이와 관련된 구글 개발자 문서가 아래에 있으니 궁금하시면 참고해 보시기 바랍니다.

https://developer.chrome.com/blog/autoplay/

Autoplay policy in Chrome - Chrome Developers

Learn best practices for good user experiences with the new autoplay policies in Chrome.

developer.chrome.com

스크립트를 활용한 자동 재생

크롬과 사파리 외에 다른 브라우저에서 자동 재생이 되게 하려면 스크립트를 활용한 방법도 있습니다. 아래처럼요.

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

<video src="" id="mov01"></video>

주의 사항은 video 태그에 id값을 부여해서 스크립트와 연결시켜야 한다는 것입니다. 이것만 주의해서 사용하시면 됩니다. 스크립트는 HTML의 <head>에 넣으시고 <video>는 <body>에 사용하시면 됩니다. 끝.

이번에 프로젝트를 위한 간단한 시연준비를 하면서 고생한 부분을 기록, 공유한다.

이번에 시연할 때 AWS를 통해 전달 받은 MediaSource를 웹 페이지에서 보여주어야 했다.

음.. 다른 mp4 파일 과는 다르게 실시간으로 업로드 되는 것을 2,3초 간격으로 받아 영상을 보여주어야 했다.

우리가 선택한 것은 익숙한 기술인 HLS였고, 나는 hls.js를 이용해서 구현했다.

뭐 기존에 다루던 라이브러리였고, 시연이라 데모수준에서 영상을 터트리는데는 큰 이슈는 없었다.

다만.. autoplay에서 애를 먹었다.

문제의 발견

요구사항은 해당 웹페이지에 접속하면 '미디어 소스 로드와 함께 자동으로 재생이 되어야 하며, Video태그에서 제공하는 컨트롤러 UI가 없어야 한다!' 였다.

처음에 ' 이런거야 뭐 video 태그에 autoplay 하나 넣어 주면 됨 ㅋㅋ ' 라고 생각했고 ....사건의 시작이었다.

<video autoplay></video>

참 쉽죠? 하하..

하지만 Chrome에서 문제가 발생했다. 영상이 바로 재생이 되지 않는 이슈 발생!

원인 분석

원인 분석을 위해 여러가지 링크, 블로그, 문서들을 보았다.

먼저 블로그나 다른 문서들을 보면 muted 옵션을 추가로 주면 정상적으로 재생이 된다고 한다!

<video autoplay muted></video>

자 하나 더 늘었다. 과연 정상적으로 동작할까?

결과를 확인해본 재생은 정상적으로 되었다! 단지 음소거가 된 상태로 재생되었을 뿐..

mute를 하지 않고 자동재생 하는 법은 없을까 ?

결론부터 말하면 없다.

여기서 관련 링크 하나 첨부하고 -> 링크

Autoplay Policy Changes | Web | Google Developers

Learn best practices for good user experiences with the new autoplay policies in Chrome, coming April 2018.

developers.google.com

구글에서 2018년에 Autoplay Policy를 재정의 했다.

SNS 및 여러 포스팅이 활발해 짐에 따라 용량이 큰 동영상 재생등이 사용자가 원치않는 리소스를 가져간다고 판단하여 브라우저에서 막아버렸다.

단, Autoplay를 하고 싶다면 muted를 하여 사용자가 컨텐츠를 사용하는데 지장없도록 제약하였다. 이것이 크롬에서 Autoplay가 되지 않는 이유이다.

물론 이것은 크롬브라우저만의 정책이기 때문에 익스플로러나 사파리 같은 다른 브라우저에서는 정상적으로 Autoplay가 된다.

시도

개발자라면 OS나 브라우저에서 막은 정책들을 우회하는 법을 연구해야한다.................엌ㅋㅋㅋ

물론 상황에 따라 사용하기 위함이고.. 무조건 정책을 어기려고 하는건 아니니..

우선 고객사가 Autoplay가 되길 바라기 때문에 여러가지 시도를 해보았다.

[ 첫 번째 시도 ]

<접근 방법>

Video 태그에 autoplay를 빼서 페이지에 접근하자마자 재생이 안되도록 한다.
페이지가 열리면 video 태그의 재생상태를 확인한다.
재생상태가 paused ( 당연히 paused 겠지... ) 면 1초뒤에 재생을 하도록 한다.

<기대 결과>

- Video 로딩 후 1초뒤에 재생.

<코드>

<!-- 본문 -->

<video id="video"></video>




<script>

$(function(){
	// video 태그 선택
    var video = document.getElementById("video");
    
    // video 태그의 재생상태가 paused면
    if(video.paused){
        // 1초뒤에 재생
        setTimeout(function(){
            video.play();
        }
    }, 1000);
}
</script>

<결과>

- 실패 ㅠ

- 재생되지 않음.

[ 두번째 시도 ]

<접근 방법>

muted가 된 상태로 autoplay 를 넣어 재생 시킨다
페이지에 접속 후 1초뒤에 muted 해제하기

<기대 결과>

- 페이지에 접속하면 autoplay, muted 속성으로 음소거된 상태로 자동재생됨.

- 1초뒤에 muted가 해제되면서 정상적으로 영상이 나오지 않을까?

<코드>

<!-- 본문 -->

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




<script>

$(function(){
	// video 태그 선택
    var video = document.getElementById("video");
    
    // 1초 뒤에 muted 해제
    setTimeout(function(){
        video.muted = false;
        }
    }, 1000);
}
</script>

<결과>

- 실패 ㅠ

- muted = false값이 정상적으로 처리 되지 않음... 에러남 ㅠㅠ

여기서 잠깐

우선 접근 자체를 제일 처음에만 autoplay가 되지 않게 하면 되지 않을까? 해서 접근한 것이었는데... 틀렸다..

구글은 똑똑했고, 프로그램이 자동으로가 아닌 '사용자가 원해서' 영상을 시청할 수 있도록 사용자 액션이 필요했다.

위에 링크에도 설명되어 있지만 영상 재생에 있어 사용자가 '원한다' 라는 액션이 있어야 한다. 그게 재생버튼을 누르는 것이든 mute버튼을 누르는 것이든...

자 그럼 다시..

그래서 세번째 시도를 해보았다.

사용자가 마치 클릭한거 처럼! 해볼까 ?

[ 세번째 시도 ]

<접근 방법>

페이지에 접속 했을 때 1초뒤에 onclick 이벤트를 trigger를 통해서 발생시킨다!!

<기대 결과>

- onclick 이벤트를 통해 실행시켰으니 되겠지? ㅋㅋㅋ후후

<코드>

<!-- 본문 -->

<video id="video" onclick="playVideo();"></video>


<script>

$(function(){
	// video 태그 선택
    $("#video").trigger("click");
}

function playVideo(){
    var video = document.getElementById("video");
    video.play();
}
</script>

<결과>

- 실패 ㅠ

- trigger로 처리 해도 사용자가 직접 누른것으로 인지 하지 못하는 것 같다... ( 정확하게 모르겠음..ㅠㅠ )

결론..

결국에는 '시청하기' 버튼을 눌러서 재생 하도록 개발을 하긴 했지만 아직도 의문이다.. 정말 방법이 없는 것인가..?

혹시 이글을 보고 해결법 아시는 분은 댓글로 남겨주시면 아주 감사하겠습니다 ㅠㅠ

html 동영상 자동재생

HTML 동영상 재생 안됨 - HTML dong-yeongsang jaesaeng andoem

비디오 포맷 호환 목록

자동 재생이 안 된다면?

스크립트를 활용한 자동 재생

관련 게시물

Oracle 개행문자 넣기 - oracle gaehaengmunja neohgi

CSS disabled 효과 - CSS disabled hyogwa

광고하는

최근 소식

한국 가상 전화번호 만들기 - hangug gasang jeonhwabeonho mandeulgi

이케아 매트리스 방수커버 - ikea maeteuliseu bangsukeobeo

안드로이드 아이폰 벨소리 다운 - andeuloideu aipon belsoli daun

2옥 라 디시 - 2og la disi

디저트페어 2022 - dijeoteupeeo 2022

카카오톡 pc 페이스톡 카메라 오류 - kakaotog pc peiseutog kamela olyu

아스트로니어 테더 설치 - aseuteulonieo tedeo seolchi

우크라이나 우회 지원 - ukeulaina uhoe jiwon

스페이스마린 식사 - seupeiseumalin sigsa

낫또 이소 플라본 - nastto iso peullabon

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의