hoilzz/TIL
  • README
  • make-module
    • deploy
      • deploy-npm-pkg
        • lerna
        • npm-publish
          • 1-package
          • FAQ
        • babel-in-monorepo
        • rollup-faq
    • lerna
      • lerna
      • lernaFAQ
    • es6 module에서 import export는 정확히 어떻게 동작하는걸까?
    • babel
      • babel
      • babel
      • tour 서비스에서 폴리필 관련 이슈.
    • webpack and rollup
    • package-lock.json
    • rollup
      • rollup
  • old
    • Algorithm
      • 이론
        • README
          • heap
          • tree
            • 최소스패닝트리
            • std-map
            • tree
            • binary-tree
          • queue
            • queue
          • linked-list
          • vector
          • graph
            • DFS
            • BFS
            • graph
            • spanning-tree
            • Dijkstra
            • bellman-ford
            • dijkstra-1504
          • List
          • linear-not-linear
          • priority_queue
          • stack
            • stack2개로-queue만들기
            • Stack
          • disjoint-set
          • hash table
        • algorithm
          • Sorting
            • 삽입 정렬
            • 선택 정렬
            • quick_sort
            • bubbleSort
            • merge_sort
          • greedy
          • kmp-algorithm
          • 다익스트라
          • bellman-ford
          • binary_search
        • math
          • 진법
          • 소수
          • 최대 최소 공약수
          • 소인수 분해
        • string
          • 알파벳 개수
          • JS-8-prototype
      • 수업
        • codeplus
          • basic
            • graph
            • brute-force
            • 플러드 필
            • 5. DP
            • 탐색
          • ch3-1-완전탐색-그냥다해보기
          • ch3-2-완전탐색-큐
          • ch2-2-완전탐색-순열
          • DP
          • ch3-3-완전탐색-재귀호출-비트마스크
          • ch2-1-완전탐색-비트마스크
        • 인프런
          • 1-순환
            • 5. Counting Cells in a Blob
            • powerset(멱집합)
            • 2. 순환적으로 사고하기
            • Recursion 응용 - 미로찾기
            • 1. 순환
            • 1. 순환의 개념과 기본 예제 1
            • 1-혼자풀어본거
            • 3. 순환 알고리즘의 설계
            • 6. recursion 응용
          • 2-DP
            • 가장 긴 공통 부분 문자열 Longest Common Subsequence(LCS)
            • matrix-chain Multiplication
            • 2-3
            • 2-2
            • 2-1
            • 2-Summary
      • 문제풀기
        • old
          • bruteforce
            • ❌1339-단어수학
            • ❌10972-다음순열
            • ❌6603-로또
            • ❌2529-부등호
            • 🔨6679-싱기한-네자리숫자
            • 1748-수 이어쓰기
            • ❌1722-순열의순서
          • README
            • 2193-이친수
            • 1003-피보나치 개수
            • 2579-계단오르기
            • 9461_파도반수열
            • 11053_theLongestIncreasingSequence
            • 2193_이친수
            • 1912-연속합
            • 1699_제곱수의 합
            • 11052-붕어빵
            • 가장_긴_팰린드롬
            • DP복습하기
            • 2579_계단오르기
            • 1149-rgb거리
            • 1463-1로만들기
          • stack
            • 2493-탑
            • 10799-쇠막대기
            • ❌2504-괄호의값
            • 9012-괄호
          • README
            • 1074-Z
            • 1992_쿼드트리
          • 재귀호출-완전탐색
            • ch6.7-최적화
            • ch6.3-보글게임
            • boj-2309
            • ch6~6.5
            • ch6.4-소풍
            • ch6~6.5-문제풀이
            • ch6.1-재귀호출
            • ch6.2-n개의 숫자에서 r개 고르기
          • dfs,bfs
            • ❌숨바꼭질
          • ch5-1
          • ch4-시간복잡도
          • ch1-2
          • ch5
          • BFS, DFS
            • ❌13913-숨바꼭질4
        • new
          • 2-1
            • leet-129-sum-root-to-leaf-numbers
            • 200. number of island
          • 1-4
            • 0125
              • 14500-테트로미노
              • 9095-123더하기
              • 1065-한수
              • 6603-로또
            • 0122
              • 9095-123더하기
              • 2309-일곱난쟁이
            • summary
            • 0121
              • 1759-암호만들기
          • 2-3
            • perfect squares
            • sw-expert-자석
            • 포도주
            • 2667 단지 번호 붙이기
            • 2156 포도주 시식
          • 3-1
            • leet-338-counting-bits
            • leet-139-word-break
          • 3-4
            • 14891
          • 2-2
            • X-leet-394-decode-string
            • 로봇 청소기
            • X-337-house-robber-3
            • 8911 거북이
          • 2-4
            • 쉬운 계단 수
            • 103-Binary Tree Zigzag Level Order Traversal
          • 서비스명-문제번호-문제명
          • 4-3
            • 서비스명-문제번호-문제명
          • 1-5
            • 0130
              • 1012-유기농배추
          • 4-2
            • leet-860-lemonade-change
    • cs
      • network
        • about http
          • README
            • ch4
            • ch3
          • http떠도는 글 정리
            • http1.x의 커넥션 관리
        • 네쉽
          • 4-인터넷계층과 IP
          • 4-3-dhcp
          • faq
          • 4-2-routing
          • 3-transport
          • 6-보안
          • 각-계층-비교요약
        • home server
          • port
          • nat
          • DHCP
          • router
          • ip
          • dynamic-ip-addr
        • 0000
        • CDN
      • database
        • architecture
          • 2-normalization-basic
          • 1-normalization-원자적-데이터
          • 4-table-relation
          • 3-foreign-key
        • fundamental
          • fundamental
      • os
        • faq
        • 7-메모리관리
        • 3-computer-system-동작-원리
        • 5-process-관리
        • 6-CPU-스케줄러
        • 8-가상메모리
        • 4-인터럽트-원리
        • 2-overview
  • React
    • hooks
      • hooks state
      • useEffect vs useLayoutEffect
      • Hook 규칙
      • From Classes to Hooks
      • complete-guide-useEffect
        • useEffect 완벽가이드 3
        • useEffect-완벽가이드-5-2
        • useEffect 완벽가이드
      • useReducer로 useState 구현하는 방법
      • useRef는 hook의 디펜던시로 사용하면 안된다.
      • hooks
      • index를 통해 관리하고 있다. 그래서 조건문이나 loop문 등에 포함되면 순서가 보장되지 않기 떄문에이 작동하는 방식 hook 관련 린트에러가 발생한다.
    • test
      • FE 테스트
      • test-hae-boza zebal
      • 5 Questions Every Unit Test Must Answer
      • Test zebal hae-bo-za
      • Unit Test assertion 다시 생각하기
      • 테스트해보자(2)
    • tips
      • 합성 컴포넌트 with hooks
      • Why do We Write super(props) 요약해보자.
      • 상태 끌어올리기
      • 리덕스 셀렉터 구조화하기
      • when to break up a component into multiple components
      • 리렌더링 퍼포먼스 이슈
      • prop drilling
      • normalize API 매번 볼때마다 헷갈려
    • prop과 state는 왜 immutable일까?
    • bugReport
      • support option to stop propagation of events in render tree
    • virtual DOM
      • Virtual DOM과 DOM의 차이
      • What is Virtual DOM?
    • lib
      • typesafe actions
    • lifeCycle
      • LifeCycle Overview
    • react in runtime
    • handleError
      • Error Boundaries
    • setState 호출은 언제, 그리고 왜 일괄 처리 되는가?
    • reactElement
      • JSX
      • React component, React element, and Instance
    • React.ref
    • 함수형 setState
  • FrontEnd
    • js
      • application-with-js
        • ch4-2-add-context
        • ch3-model
        • ch4-controller
        • ch2-event
        • ch3-5-when-data-loading
        • 5-3-binding
        • ch1-mvc-and-class
      • functional
        • FP-3-map-filter
        • JS-10-객체-ES6
        • FP-4-each
        • 커링
        • JS-9-this
        • FP-2
        • FP-1
        • FP-7-객체
        • JS-8-prototype
        • 다형성
      • es6+
        • [es6]var, let, const
        • promise
        • async-await
        • [es6] arrow func
        • iterator-generator-iterable
      • basic
        • function
        • Location Object
        • global_object_window
        • Concurrency_model_and_event_loop
        • delete-operator
        • Summary
        • 메모리 관리 + 4가지 흔란 메모리 누수 대처법
        • throw-try-catch
        • throw-vs-console-error
        • closure
        • lexical_scope
        • scope chain
        • Hoisting
        • this
        • execution context and scope
        • variable
        • OOP
      • mdn_translation
        • apply()
        • proxy
        • ObjectAssign()
        • comparison
        • setInterval
        • with
        • setTimeout
        • map
        • this
        • bind
        • getting_started_ajax
        • reduceRight
      • test
        • redux unit test
        • Static VS Unit VS Integration Testing for Frontend Apps
        • Why you've been bad about testing
        • 2-use-jest-dom
      • asyncronous
        • 비동기
        • 비동기성
    • ts
      • 타입가드와 차별된 타입
      • Node vs Element
      • typescript debugging 익숙해지기
      • 인덱스타입
      • Typescript 전환 후기
      • UnionType
      • Conditional Types
      • tsconfig
      • TypeScript tips
      • 문자열 시그니처
      • *.d.ts
      • module_resolution
      • Typescript 전환기
    • technique
      • debounce
      • immutable
    • react
      • react다시공부하기
        • Components-and-Props
        • README
          • 11-👍normalizing-state-shape
          • 8-withrouter
          • 20-refactoring-reducers
          • 12-wrapping-dispatch-to-log-action
          • 04-refactoring-entry-point
          • 18-applying-redux-middleware
          • 05-adding-react-router
          • 14-fetching-data-on-route-change
          • 19-👍updating-state-with-fetched-data
          • 6-navigating-with-react-router
          • 16-wrapping-dispatch-to-recognize-promise
          • 10-colocating-selectors-with-reducers
          • 7-filtering-redux-state-with-router-params
          • 17-middleware-chain
          • 15-dispatching-actions-with-fetched-data
          • 02-supplying-the-initial-state
        • Composition VS Inheritance
        • rendering-element
        • uncontrolled-component
        • 성능-최적화
        • UNSAFE-componentWillReceiveProps
        • state-and-lifecycle
        • Thinking-in-react
        • props-state
        • ref
        • v16
          • Portals
        • lifting-state-up
        • context
        • setState-Updater-Factory
        • HOC
          • HOC
      • library
        • redux-thunk
        • redux-saga
          • example
          • 14-cancel-task
          • 15-fork-model
          • cheatSheet
          • 12-yield를-이용한-사가-배열
          • 1-readme
          • 9-non-blocking
          • 13-사가-조합
          • 11-race-multiple-effect
          • 3-helper-function
          • 7-event-abstraction
          • 6-error-handling
          • 5-action-dispatch
          • summary-and-faq
          • 10-병렬태스크-실행
          • 8-action-poooling
          • channel
          • 4-서술적-effect
          • 2-tutorial
        • reselect
      • 번역
        • 공홈
          • usage-with-react
          • Introuducing Hooks
          • Reconcilation
          • Hooks at a Glance
          • using-immutable-data
          • setState(Component API)
          • getting_started
        • React Element
        • Autobinding
        • React Components
        • render
        • context API 효과적으로 사용하기
        • 리액트로 앱 상태 관리 하기
      • redux-faq
        • Organizing State
        • reducer-action-where-should-logic
        • Changes are made with pure function
        • Where should websockets and other persistent connection live?
        • action-creator에서-여러개-dispatch-해야할까
      • tip
        • parameterized-event-handler
        • idiomatic-redux
        • 5tips-redux-in-large-application
        • five-tips-for-redux-in-large-application
      • redux다시공부하기
        • redux-doc
          • 3-7-정규화된-데이터-업데이트
          • 3-5-deep-combineReducer
          • 3-4-combineReducer
          • 3-1-기본-리듀서-구조
          • 2-1-1-advance-action
          • 3-2-리듀서-로직-분리하기
          • api-applyMiddleware
          • 3-3-리듀서-리팩토링하기
          • 상태 정규화
        • 5 tips for working with redux in large application
        • selector
        • core-concepts
        • redux
      • react-redux
        • Store에 접근하기
      • pattern
        • render-prop
      • Why react?
    • markup-css
      • css
        • markup_level_test
        • What_is_float
        • background-size
        • selector
        • html_semantic_elements
        • before_pseudo_element
        • README-dot-md
        • percentage
        • css_box_model
        • 2017-1-20-vertical-align
        • 2017-2-22-z-index
        • transition
        • units_for_expression_len
        • box_sizing
        • css의 7가지 단위
        • inlineAndblock
        • alignCenterViaCss
        • 2017-2-1-margin
        • webkit이란
        • media_query
        • transform
        • Position
        • viewport
      • html
        • HTML5_Stylde_Guide
        • imagesWithMarkup
        • form
        • img
        • data-attributes
        • viewport_meta_tag
        • flex
    • webpack
      • 공홈번역
        • Module
        • module-resolution
        • loader
        • Caching
        • manifest
    • browser
      • 브라우저 렌더링
      • Scroll Event with throttling using raf
      • 쿠키, 세션, 캐시
      • raf
      • cors
      • window.history
      • 쿠키와 인증
    • tests
      • static vs unit vs integration test
      • getting started
    • codespitz-deisgn
      • 1
    • test
      • JS test란
      • redux test
  • devlog
    • 0619
      • Null and Undefined
      • babel-preset-env
      • babel 7.4.0
      • babel-lodaer
      • core-js
      • @babel/runtime
      • babel/polyfill
      • @babel/plugin-transform-runtime
      • babel-faq
      • scroll
    • 0802
      • const는 상수인데, 왜 값이 바뀔 수 있을까?
    • 0822
      • react in runtime
    • 2020
      • 0220
        • union type 탈출하기
        • 동적 text area
      • 0213
        • rel noopener
        • sticky
        • push
        • unknwon
      • 0217
        • portal로-리렌더-줄이면서-느낀거
        • table
        • css width만 가지고 height값과 함꼐 비율대로 늘리기
    • 0730
      • shallow rendering 사용하지 않는 이유
    • 1023
      • DOMContentLoaded, load, unload
    • 0520
      • input with TS
    • 0704
      • as const와 generic으로 타입 추론 하기
      • TS에서 extends
      • saga with pattern
    • 0608
      • State
      • setState-vs-useState
      • React Component가 뭐에요?
      • JSX
      • png, gif, jpg, svg
    • 0524
      • pure component and memo
    • 0521
      • 0521
    • 0523
      • useState vs useReducer
      • temp
    • 0823
      • 어드민 개발하면서 flex 써먹은거 정리
    • 1011
      • js로 2차원 배열 만들기
    • 0522
      • 리마운트를 막아보자!
    • 0829
      • saga에서 모든걸 관리하면 편한데
    • 0516
      • 제너레이터 함수 - Caller와 Callee
      • Saga
    • 0703
      • React Context 효과적으로 사용하기
    • 0905
      • 제곧내
    • 0809
      • intersection observer
    • 0604
      • useRef
    • 0727
      • React - 기본 이론
    • 0616
      • immutablility
    • 0712
      • infer
    • 0705
      • useselector-reselect
    • 0612
      • 오버로딩 vs 오버라이딩
    • 0527
      • super(props) 왜 작성해야 할까?
    • 0613
      • React component, React element, and Instance
      • ios-scroll
    • 0627
      • back button
      • typescript-config
    • 0925
      • 인덱스 시그니처의 key의 특정 스트링만 정하기
    • 0923
      • useRef
    • 0530
      • lib.d.ts
      • Modules
      • Declaration file
    • 0803
      • arrow function in class
    • 0729
      • testing redux
    • 0628
      • Composition on PureComponent
    • 0805
      • IO entry 정보
    • 0529
      • input
    • 1007
      • 인덱스 시그니처의 키값을 제네릭으로 할당하기
    • 0806
      • getBoundingClientRect
    • 0807
      • Imperative vs Declarative API
    • 0620
      • asset management
    • 0927
      • 어떤 상태에 대해 redux state에 둘지 component state로 둘지의 기준은?
  • javascript
    • generator
      • Iteration protocols
    • Curry or Partial Application
    • basic
      • 실행 컨텍스트
      • 프로토타입
      • 함수 표현식과 함수 선언식의 차이
      • OOP 간단 정리
    • closure 알아보기
    • What is a Pure function?
    • arrow-fn-vs-fn
    • hoisting with let-const
    • ES6 In Depth
    • Aync Await blows promise away
  • Web
    • video
      • HLS
      • MediaSource
      • video, track, source
      • HLS
    • intersection-observer
      • intersection observer
    • optimizeRender
      • layout과 reflow를 발생시키는거
  • book-review
    • ruby-object-oriented-design
      • 5
      • ch2-단일-책임-원칙을-따르는-클래스-디자인
      • ch3-의존성-관리하기
      • ch5-오리타입으로-비용줄이기
      • ch4-3-유연한-인터페이스-만들기
      • ch4-2-유연한-인터페이스-만들기
      • ch4-1-유연한-인터페이스-만들기
      • ch-3-의존성-관리하기
    • 읽기좋은코드가
      • 1. 코드는 이해하기 쉬워야 한다.
      • 2. 이름에 정보 담기
      • 3. 오해할 수 없는 이름들
    • core-javascript
      • 1. 데이터 타입
  • redux
    • saga
      • 리덕스 사가 패턴이 정신건강에 도움을 줄 것이다.
      • 사가로 비동기 동작 제어하기
      • 사가 패턴
    • reducer
      • slice reducer 간 데이터 공유하기
      • prerequisite concept
      • Managing Normalized Data
      • split reducer or not
    • selector
      • useSelector-with-reselect
      • 셀렉터 패턴
    • reselect
  • FP
    • 순수 함수
  • developer
  • retrospect
    • 어드민 개편
    • UI는 이따가 생각하자
  • DesignPattern
    • 추상화
Powered by GitBook
On this page
  • hls.js
  • Compatibility
  • FAQ

Was this helpful?

  1. Web
  2. video

HLS

Previousvideo, track, sourceNextintersection-observer

Last updated 5 years ago

Was this helpful?

Http Live Streaming

HLS는 http 기반

live and on-demand audio and video를 iPhone, iPad, Mac 등에 Http Live Streaming 기술로 보낸다. HLS는 ordinary web server를 이용하여 컨텐츠를 배포할 수 있도록 한다. HLS는 신뢰성과 유무선 연결의 사용 가능한 속도에 맞게 재생을 최적화하여 네트워크 상태에 dynamic하게 적응한다.

클라이언트는 Edge, firefox, 크롬에서 이용가능하다.

HLS는 MPEG-DASH와 비슷하다. 전체 스트림을 일련의 small HTTP-based file 다운로드로 분할하여 작동하는 점에서 비슷하다. 각 다운로드는 잠재적으로 제한되지 않는 전체 전송 스트림의 짧은 조각을 로드한다.

이용 가능한 스트림의 리스트를 M3U playlist를 확장하여 클라이언트에게 보낸다.

표준 HTTP 트랜잭션 기반인 HLS는 표준 HTTP traffic을 통해 proxy server를 순회할 수 있다.

hls.js

hls.js는 HTTP Live Streaming을 구현한 JS 라이브러리다.

play를 위해 와 에 의존한다.

MPEG-2 전송 스트림을 ISO BMFF (MP4) Fragments로 변환하여 동작한다. 이 변환과정은 가능하다면 Web worker를 사용하여 동작한다.

hls.js는 플레이어가 필요없다. HTML 표준 <video> element에서 동작한다.

Compatibility

hls.js는 video/mp4 입력으로 MediaSource 확장(MSE)을 지원하는 브라우저와 호환된다.

미디어소스 API는 다음 에서 확인하자.

현재 지원 범위는

  • 안드 크롬 34+

  • 사파리 Mac 8+ (beta)

iOS Safari "Mobile"은 MediaSource API를 지원하지 않는다. plain video tag source URL을 통해 사파리 브라우저는 내장 HLS 가진다. 그래서 플랫폼이 MediaSource나 native HLS 지원을 하지 않는다면, HLS로 플레이할 수 없다.

FAQ

  • native HLS를 지원하면 hls.js 사용할 필요가 없다.

    • 예컨대 hls를 만든 애플..

  • native HLS를 지원하지 않을 경우에 hls.js를 통하여 동영상을 로드하자.

    -

  • m3u8은 왜 video tag에서 재생되지 않을까?

    • video tag가 지원하지 않는 확장자여서

html5
mediaSource extension
링크