반응형
MPlayer HTML5 Media Player
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>MPlayer HTML5 Media Player</title>
<style>
* {-webkit-tap-highlight-color:transparent;}
body {
background:#000;
padding:0px;
margin:0px;
}
video{
position: fixed;
left:0px;
top:0px;
padding:0px;
margin:0px;
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<video id="basic" poster="https://cdn.pixabay.com/animation/2022/12/26/09/50/09-50-13-682_512.gif" controls>
<source src="https://story-v1.kakaocdn.net/dn/brvUpk/oWUa35bOLc/NnYyldT98G3ILpS3XLNKv1/m2.mp4" type="video/mp4">
</video>
<script src="https://dohoons.github.io/mplayer/demo/mplayer.min.js"></script>
<script>
var basic = new MPlayer('#basic', {
flexible: true,
volume: 1,
autoplay : true,
contextmenu: false,
loop: false
}).on('play', function() {
console.log('play!');
});
</script>
</body>
</html>반응형
'디자인소스' 카테고리의 다른 글
| 스마트 웹 사이트 디자인 동영상 슬라이드 메뉴 (0) | 2023.12.13 |
|---|---|
| 심플한 비디오 플레이어 (Simple Video player) (0) | 2023.12.11 |
| Navigation Page Design (네비게이션 페이지 디자인) (0) | 2023.12.07 |
| Responsive Photo Gallery CSS (반응형 포토 갤러리) (0) | 2023.12.07 |
| 멋진 버튼 색상 애니메이션 CSS (Button Color Animation CSS) (0) | 2023.12.06 |
| 반응형 이미지 비디오 갤러리 Responsive Image Video Gallery (0) | 2023.12.02 |
| 음악방송 웹플레이어 디자인 (0) | 2023.12.02 |
| CSS 기반 스크롤 애니메이션 반응형 웹페이지 디자인 (0) | 2023.11.30 |
댓글