HLS(Http Live Streaming) 웹에서 플레이 하는 방법
웹에서 스트리밍 방식의 동영상을 재생하는 방법에는
RTSP (Real-Time Streaming Protocol),
RTP(Real-Time Transport Protocol),
RTMP( Real-Time Messaging Protocol),
HLS(Http Live Streaming) 방식 등이 있다.
(참고로 RTSP는 1초, HLS는 10초 정도의 delay가 존재한다.)
HLS를 제외하고는 현재 HTML5에서 지원은 하지 않기 때문에
가장 간단한 방법인 HLS로 웹에 동영상을 표출하는 방법을 알아보자.
HTML5에서 제공하는 <video> 태그를 사용하여 HLS 동영상을 출력할 것이다.
이를 위해서는 video.min.js 와 videojs-contrib-hls.js, videojs-contrib-hls.min.js가 필요하다.
해당 파일들을 받아 페이지에 추가한다.
예)<script type="text/javascript" src="<c:url value='/resource/js/video.min.js'/>"></script>
HLS Play.zip<--문제가 된다면 삭제하겠습니다.-->
간단하게 body태그 내에 video 태그를 넣는다.
<body>
...
<video id="hlsPlayEx" class="cctvBox">
<source src="HLS주소(예:http://......m3u8)" type="application/x-mpegURL">
</video>
...
</body>
-- script
<script type="text/javascript">
var player = videojs('hlsPlayEx');
player.play();
</script>
이렇게만 해주면 HLS 방식의 동영상을 웹에서 출력할 수 있다.
Link : RTSP(Real Time Streaming Protocol) 웹에서 플레이 하는 방법
'Programing > Streaming' 카테고리의 다른 글
| javascript VXG Media Player RTSP protocol paly in Chrome, 크롬에서 rtsp play (0) | 2018.12.26 |
|---|---|
| RTMP / RTSP 모바일 출력 이슈. (0) | 2017.06.12 |
| javascript 웹에서 RTMP 출력 상용 Flash Flowplayer 사용. (4) | 2017.04.18 |
| HLS(Http Live Streaming) 웹에서 플레이 하는 방법(FlowPlayer 사용) (1) | 2016.12.23 |
| RTSP(Real Time Streaming Protocol) 웹에서 플레이 하는 방법 vlc player 활용 (2) | 2016.08.16 |
댓글