반응형
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://blog.kakaocdn.net/dna/brvUpk/oWUa35bOLc/AAAAAAAAAAAAAAAAAAAAAPBl1-d99lG4DVw1qPf0nkyKsBxIrwTFzieZ51CKBi0A/m2.mp4?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1769871599&allow_ip=&allow_referer=&signature=ET845C7Q8gSNWT%2BXIskCFAUnDrY%3D" 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>반응형
'디자인소스' 카테고리의 다른 글
| mp3 음악입자 그래픽 이퀄라이저 시각화 플레이어 가사자막 생성기 (2) | 2024.09.10 |
|---|---|
| 반응형 G5 BEST (2) | 2024.06.02 |
| 워드프레서 와 G5 기반 미디어 홈제작 (0) | 2024.05.23 |
| 스마트 웹 사이트 디자인 동영상 슬라이드 메뉴 (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 |
댓글