반응형
반응형으로 사이즈가 조절되는 HLS Player 입니다.
소스
<!DOCTYPE html>
<html lang="ko" >
<head>
<meta charset="UTF-8">
<title>HLS Player</title>
<style>
.myvideo{
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
#video{
position: absolute;
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<div class="myvideo">
<video autoplay playsinline controls id="video" controls></video>
</div>
<script>
var video = document.getElementById('video');
var source = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
var hls = new Hls({
debug: true,
});
hls.loadSource(source);
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
</script>
</body>
</html>반응형
'디자인소스' 카테고리의 다른 글
| 티스토리 블로그 더보기 버튼 css로 꾸미기 (0) | 2023.09.26 |
|---|---|
| 심플한 오디오 플레이어 HTML5 Audio CSS style (0) | 2023.09.23 |
| CSS 웹 페이지 터치 이벤트 (0) | 2023.09.23 |
| 깔끔한 jQuery Audio Player (0) | 2023.09.23 |
| Animated text fill 애니메이션 텍스트 (0) | 2023.09.21 |
| Placeholder 포커스시 감추기, 글자색 변경 (0) | 2023.09.21 |
| CSS3 Loader & Spinners 모음 (0) | 2023.09.20 |
| Glowing Pulse Search Form (0) | 2023.09.20 |
댓글