[Javascript] IOS 대응을 위한 webm <-> mp4 변환 스크립트

HTML

// 비디오 디폴트 값은 webm이여야함.
<video src="~~~.webm" muted="" loop="" playsinline="" paused></video>

 

Javascript

var utils = {
checkOS: (os) => {
return new RegExp(os, 'i').test(navigator.userAgent);
},
};

$(function () {
// 페이지 로드시 실행
adjustVideoSources();

// 비디오 태그 재생
const videoElements = document.querySelectorAll('video');
videoElements.forEach((videoElement) => {
if (videoElement.paused) {
videoElement.play();
}
});

});

// 아이폰,아이패드, 매킨토시로 접속 시 HTML안에 모든 비디오 태그 확장자 mp4 로 변경
function adjustVideoSources() {
var videoElements = document.querySelectorAll('video');

// 기기가 iPad, iPhone 또는 Mac인 경우에만 실행
if (utils.checkOS('iPhone') || utils.checkOS('Macintosh') || utils.checkOS('iPad')) {
// 모든 비디오 태그의 소스를 디폴트 webm에서 mp4로 변경
for (var i = 0; i < videoElements.length; i++) {
console.log(videoElements.length);
videoElements[i].src = videoElements[i].src.replace('.webm', '.mp4');
}
}
}