HTML5-대용량 .mp4 파일을 스트리밍하는 방법은 무엇입니까?

HTML5-대용량 .mp4 파일을 스트리밍하는 방법은 무엇입니까?

---

20MB의 .mp4 비디오를로드하는 매우 기본적인 html5 페이지를 설정하려고합니다. 브라우저는 비디오의 첫 부분을 재생하고 나머지 부분을 스트리밍하는 것보다 전체를 다운로드해야하는 것으로 보입니다.

이 게시물 은 내가 검색하는 동안 찾은 가장 가까운 것입니다 ... 나는 핸드 브레이크와 데이터 고 라운드를 모두 시도했지만 차이가없는 것 같았습니다.

이 작업을 수행하는 방법 또는 가능하다면 어떤 아이디어가 있습니까?

사용중인 코드는 다음과 같습니다.

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

---

1. moov(메타 데이터)가 mdat(오디오 / 비디오 데이터) 앞에 있는지 확인합니다 . 이를 "빠른 시작"또는 "웹 최적화"라고도합니다. 예를 들어 Handbrake에는 "Web Optimized"확인란 이 있고 ffmpeg 및 avconv 에는 출력 옵션이 -movflags faststart있습니다.
2. 웹 서버가 올바른 콘텐츠 유형 (비디오 / mp4)을보고하는지 확인하십시오.
3. 웹 서버가 바이트 범위 요청을 처리하도록 구성되어 있는지 확인하십시오 .
4. 웹 서버가 mp4 파일의 압축 위에 gzip 또는 deflate 압축을 적용하고 있지 않은지 확인하십시오.

curl -I http://yoursite/video.mp4브라우저 ( Chrome , Firefox ) 의 개발자 도구를 사용 하거나 사용하여 웹 서버에서 보내는 헤더를 확인할 수 있습니다 ( 캐시 된 경우 페이지를 새로 고침). HTTP 응답 헤더에는 Content-Type : video / mp4 및 Accept-Ranges : bytes 가 포함되어야하며 Content-Encoding :은 없어야 합니다.

---

다음은 바이트 범위 (부분 요청)가있는 비디오 파일을 제공 할 C # (MVC)에서 Web API 컨트롤러를 만드는 데 사용한 솔루션입니다. 부분 요청을 사용하면 브라우저가 전체 비디오를 다운로드하는 대신 재생하는 데 필요한만큼만 비디오를 다운로드 할 수 있습니다. 이것은 훨씬 더 효율적입니다.

이것은 최신 버전에서만 작동합니다.

var stream = new FileStream(videoFilename, FileMode.Open, FileAccess.Read , FileShare.Read);

var mediaType = MediaTypeHeaderValue.Parse($"video/{videoFormat}");

if (Request.Headers.Range != null)
{
    try
    {
        var partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
        partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, mediaType);

        return partialResponse;
    }
    catch (InvalidByteRangeException invalidByteRangeException)
    {
        return Request.CreateErrorResponse(invalidByteRangeException);
    }
}
else
{
    // If it is not a range request we just send the whole thing as normal
    var fullResponse = Request.CreateResponse(HttpStatusCode.OK);

    fullResponse.Content = new StreamContent(stream);
    fullResponse.Content.Headers.ContentType = mediaType;

    return fullResponse;
}

참고 URL : https://stackoverflow.com/questions/10328401/html5-how-to-stream-large-mp4-files