728x90
반응형
- HTML(Hyper Text Markup Language)는 웹 문서를 만들 때 사용하는 프로그래밍 언어
- HTML5 : 마크업 랭귀지(HTML)의 문법적(syntactic) 버전뿐만 아니라 새로운 DOM API 스펙을 포함하는 것
웹 표준 동영상 플레이어
- Flash Player가 공식적으로 중단되면서 HTML5 플레이어는 새로운 산업표준이 되었다.
- <video> 및 <audio>요소의 기능을 강화하여 추가 플러그인을 사용하지 않고도 웹페이지 또는 애플리케이션에서 직접 콘텐츠를 스트리밍할 수 있다.
- 브라우저 자체에서 지원되는 기능이기 때문에 별도의 외부 라이브러리나 플러그인이 필요하지 않다.
- 사용이 간편하며, 가볍고 특별한 설정이나 스타일링이 필요없다.
1. VideoJS
- https://videojs.com/
- HTML5 표준 동영상 플레이어를 기반의 비디오 플레이어 프레임워크 중 하나로 오픈 소스이다.
- 가장 사용자가 많은 Video Player Open Source (40만 사이트 이상)
- 활발한 PR다수의 플러그인
- js간 의존성이 높고 모듈화 됨(API 제공)
- 다양한 테마와 스킨 제공 & 플러그인 시스템을 지원하여 다양한 확장 기능 추가 가능하여 커스터마이징이 용이 함.
- Apache License
Video.js - Make your player yours
The world's most popular open source HTML5 player framework
videojs.com
npm install --save-dev video.js
<head>
<link href="https://vjs.zencdn.net/8.9.0/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/8.9.0/video.min.js"></script>
</body>
2. JW Player
웹에서 동영상을 재생하는 데 전문화된 상용 플레이어
- 다양한 동영상 광고 형식을 지원합니다.
- 실시간으로 동영상을 스트리밍하는 기능을 지원
- 클라우드 호스팅을 통해 동영상을 관리하고 스트리밍할 수 있습니다.
- 다양한 플랫폼에서 동작
- 라이브 스트리밍, 광고 플레이어, 스킨, 통계 등 다양한 기능을 제공
<head>
<link href="https://vjs.zencdn.net/8.9.0/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/8.9.0/video.min.js"></script>
</body>
3. Kaltura HTML5 Video Player
4. Flowplayer
5. Wistia
728x90
반응형
'frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] px, em vs rem 이해하기 (0) | 2024.05.30 |
|---|---|
| [CSS] CSS, SCSS, SASS (0) | 2024.01.23 |
| [CSS] 브라우저 스타일 처리 - Reset CSS와 Normalize CSS를 사용한 크로스 브라우징 (0) | 2024.01.12 |
| [CSS] hover style 효과 삭제하기 (0) | 2024.01.02 |
| [CSS] 레이아웃을 배치 (lex, grid, gap) (1) | 2023.12.18 |
