iPhone 사파리에서 해당 페이지 요청

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />
  </head>
  <body>
    </p>
<video poster="/images/IMG_0080.JPG" src="media/stream.m3u8" controls autoplay></video>
  </body>
</html>
poster는 미리보기로 보여줄 정지 영상입니다.

사파리에서 비디오를 클릭하게 되면  media/stream.m3u8 파일을 요청

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=96000
media/stream-96k.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=256000
media/stream-256k.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=800000
media/stream-800k.m3u8

적적한 대역폭의 파일이 선택되어  해당 m3u8파일이 요청

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
/media/sample-00001.ts
#EXTINF:10,
/media/sample-00002.ts
#EXT-X-ENDLIST

각 ts 파일 다운로드 하며 이 동영상 파일을 재생합니다.

만드는 방법은

ffmpeg으로 해당 동영상 파일을 ts파일로 만듭니다.

#ffmpeg -i IMG_0078.MOV -f mpegts -acodec libmp3lame -ar 48000 -ab 64k -s 320x240 -vcodec libx264 -b 256k -flags +loop -cmp +chroma -subq 5 -trellis 1 -refs 1 -coder 0 -me_range 16  -sc_threshold 40 -i_qfactor 0.71 -bt 200k -maxrate 256k -bufsize 256k -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -aspect 320:240   test.ts

segementer로 ts파일을 10초 단위로 자릅니다. 스트리밍시 적합하도록 파일로 자르며 m3u8파일을 생성합니다.

# segmenter test.ts 10 sample stream.m3u8 /media/

m3u8파일을 적절하게 구성합니다.
저작자 표시 비영리 동일 조건 변경 허락
신고


티스토리 툴바