video/audio autoplay issue

 

 

요구사항

시각장애인 ==> 시각정보 X / 청각정보 O

청각장애인 ==> 시각정보 O / 청각정보 X

 

이슈) Chrome 자동재생 정책

자동재생 정책 요약)

- 음소거 된 자동 재생 항상허용

- 사용자가 클릭, 탭 등 했을때

- 데스크탑에서 사용자 미디어 참여지수가 기준을 초과했을때 (즉, 소리 켜놓고 비디오 재생한 횟수가 적정 횟수 이상일때)

- 모바일에서 사용자가 홈화면에 사이트를 추가했을때

- 상위 프레임은 iframe에 자동재생권한을 위임하여 사운드와 함께 자동재생 허용 가 

* 미디어 참여지수(MEI)란 사이트에서 개인이 미디어 소비 성향을 측정한 것

 

참고자료)

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

Autoplay policy in Chrome - Chrome for Developers

 

해결방향)

1. 오디오 권한을 일단 확인

    // 오디오 API 권한 확인
    var AudioContext;
    var audioContext;

    window.onload = function() {
        navigator.mediaDevices.getUserMedia({ audio: true }).then(() => {
            AudioContext = window.AudioContext || window.webkitAudioContext;
            audioContext = new AudioContext();
        }).catch(e => {
            console.error(`Audio permissions denied: ${e}`);
        });
    }

 

 

2. 비디오 컨트롤 하기

 1) 비디오를 로드한다.

 2) 비디오를 음소거 + 일시정지

 3) 바디에 클릭발생 -> 비디오 플레이 + 음소거 해제 + 볼륨값 주기

    // 비디오 컨트롤
    var video = document.getElementById("myVideo");
    video.src = 'images/video.mp4';
    video.load();
    
    
    video.pause();
    video.muted = true;
      
    document.body.addEventListener("click", function () {
        video.play();
        video.muted = false;
        video.volume = 1;
    });

 

사실 뭐 거창한 건 없다.

사용자의 반응이 있다면 모두 가능해지기 때문에 이벤트발생후 작동되게 한다면 뭐든 가능함

 

 

video ) autoplay + mute / pause + unmute

audio ) autoplay + mute / pause + unmute 

 단) audio 는 소스상으로 수정하면 가능은 한 것 확인

 

 

 

 

 

 

 

자동재생 테스트 페이지>>>>>>>

https://jaunnnngs.github.io/videoAutoPlay/

https://jaunnnngs.github.io/videoAutoPlay/

 

**접근성에 대한 고찰이 필요해보인다.

 

시각장애인 -> 소리자료 필요 + 시각자료X => 오디오 자동재생 + unmute

청각장애인 -> 소리자료X + 시각자료 필요 => 자동재생 + mute

 

ps.구글정책