공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

[ HTML5 VIDEO ] HLS 예제 테스트 스트림

serpiko 2018. 3. 9. 10:09

   Free & Public HLS Example Test Streams



테스트용 HLS .m3u8 스트림


HTTP Live Streaming 은 Apple에서 구현한 HTTP 기반 프로토콜이다.


MPEG-DASH와 같은 공개 표준이 아니므로 일반 커뮤니티에서 생성할 수 있는 많은 컨텐츠와 리소스가 없다.


그러나 아래의 Bitmovin 에서 스트림목록은 자막 + 다중 언어 옵션기능이 포함된 인코딩으로 테스트 스트림 URL 을 제공한다.


  • https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8
  • https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8
  • https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8
  • http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8
  • http://www.streambox.fr/playlists/test_001/stream.m3u8

참고로 https://videojs.github.io/videojs-contrib-hls/ 에서 제공하는

https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8  [ 30분 ] 스트리밍 주소도 있다.


   System Explorer로 사용량 모니터링

사용량 모니터링를 위해서 System Explorer 프로그램을 사용하였으며, 테스트 코드는 아래와 같다.

<?php

ob_end_clean();
date_default_timezone_set('Asia/Seoul');


/**********************************************************************************
*
* @유저 설정 상수 ( 브라우저 판별이 되고 난 후 연결될 디렉토리명, 영상주소 )
*
***********************************************************************************/
$pathPrefix = ".";
define("_VIDEOSRC", "");
?>


<!DOCTYPE html>
<html lang='ko'>
<head>

    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- cache -->
    <meta http-equiv="Cache-Control" content="no-store">
    <meta http-equiv="Pragma" content="no-cache">
    
    <!--<meta http-equiv="refresh" content="43200"> --> <!-- 12hours 43200 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    
    <!-- common css -->
    <link href="common/css/bootstrap.min.css" rel="stylesheet">

    <title>videojs</title>
</head>

<body>
    
    <!-- form -->
    <form  name='frm' id='frm' method='post' action='./index.php' target='_self'>
        <input type='hidden' name='Act' value='1' />
        <input type='hidden' name='moveType' value='' />
        <input type='hidden' name='movePage' value='' />
        <input type='hidden' name='ie' value='' />
        <input type='hidden' name='videosrc' value='' />
        <input type='hidden' name='debug' value='0' />
    </form>

    <!-- common js -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="common/js/bootstrap.min.js"></script>



<link href="video-js.css" rel="stylesheet"> 
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<script src="ie10-viewport-bug-workaround.js"></script>
<script src="video.js"></script> 
<script src="<videojs-flash.js"></script>
<script src="videojs-contrib-hls.js"></script>

<!-- width='696' height='392'  -->
<video id='example-video' width='696' height='392' class="video-js vjs-default-skin vjs-big-play-centered vjs-show-big-play-button-on-pause" controls autoplay preload="none" data-setup='{"techorder" : ["flash", "html5"], "loop" : "true"}' loop>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL"> 

</video>
<script>
var player = videojs('example-video');
player.play();
</script>

</body>
</html>


저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

어떤 엘리먼트를 사용해서 웹을 만들어야 하나  (0) 2018.02.19
박스모델의 생성 : HTML에서 js까지  (0) 2014.11.03
SVG, HTML5, jQuery UI 데모페이지  (0) 2014.03.12
박스모델의 위치계산  (0) 2014.01.22
테이블샘플  (0) 2014.01.16
댓글