Flutter에서 local asset html을 쓰고, 해당 html에서 video 태그에 local asset 영상을 출력해야 하는 경우 ios에서 이슈가 생길 때

ios asset의 비디오 파일을 가져오면 200으로 가져오고, 206으로 가져오지는 못한다고 한다(blob)

local html의 video 태그는 200 응답이 아닌 206 응답이 필요하다고 한다(blob)

그래서 모든 video 태그에 적혀있는 주소를 blob화 해서 우선 불러온 후, 이를 video tag에서 쓰는 구조로 사용할 수 있다

관련 스택오버플로우 : https://stackoverflow.com/questions/54004280/converting-mp4-link-to-blob-in-javascript/54004600#54004600

 

if(navigator.platform && /iPad|iPhone|iPod|Mac/.test(navigator.platform)){
    window.addEventListener("load", streamVideoBlobs);
 }

function streamVideoBlobs(){
    var allVideos = document.getElementsByTagName("video");
    for(var i = 0, max = allVideos.length; i < max; i++)
    {
        iOSVideoConvert(allVideos[i]);
    }
}

async function iOSVideoConvert(video){
    let blob = await fetch(video.src).then(r => r.blob());
    var videoUrl=createObjectURL(blob);
    video.src = videoUrl;
}

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}