-
Notifications
You must be signed in to change notification settings - Fork 52
/
Copy pathindex.html
123 lines (118 loc) · 6.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ckin — Custom HTML5 Video Player Skins.</title>
<link rel="stylesheet" href="dist/css/ckin.css">
<link rel="stylesheet" href="demoDist/demo.css">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/favicons/manifest.json">
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<nav class="nav">
<div class="container nav__container">
<div class="nav__brand">
<img src="logo.png" class="nav__logo" alt="Ckin">
<h1 class="nav__title heading">Ckin</h1>
</div>
<ul class="nav__menu">
<li class="nav__item">
<a href="#demo" class="nav__link">Demo</a>
</li>
<li class="nav__item">
<a href="#installation" class="nav__link">Installation & Usage</a>
</li>
<li class="nav__item">
<a href="#options" class="nav__link">Options</a>
</li>
</ul>
<a href="https://github.com/hunzaboy/Ckin-Video-Player" class="nav__github">
<svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
View on Github
</a>
</div>
</nav>
<section class="demo-section demo-section--light" id="demo">
<div class="container">
<h2 class="title heading">Custom HTML5 Video Player with Ckins...</h2>
<video poster="ckin.jpg" src="ckin.mp4" data-ckin="default" data-overlay="1" data-title="The curious case of Chameleon..."></video>
<p class="tr">Demo video by
<a href="https://vimeo.com/lumatic" target="_blank">Lumatic</a>
</p>
</div>
</section>
<section class="demo-section demo-section--light" id="skins">
<div class="container">
<h2 class="title heading">Skins</h2>
<ul class="demo-list">
<li class="demo-list__item">
<p>Default Ckin without overlay</p>
<video poster="ckin.jpg" src="ckin.mp4" data-ckin="default"></video>
</li>
<li class="demo-list__item">
<p>Minimal Ckin with overlay</p>
<video poster="ckin.jpg" src="ckin.mp4" data-ckin="minimal" data-overlay="1"></video>
</li>
<li class="demo-list__item">
<p>Compact Ckin with overlay</p>
<video poster="ckin.jpg" src="ckin.mp4" data-ckin="compact" data-overlay="2"></video>
</li>
<li class="demo-list__item">
<p>Compact Ckin with custom color</p>
<video poster="ckin.jpg" src="ckin.mp4" data-color="#fff000" data-ckin="compact" data-overlay="2"></video>
</li>
<li class="demo-list__item">
<img src="logo.png" class="nav__logo" alt="Ckin">
<h2 class="coming-soon">More ckins coming soon...</h2>
</li>
</ul>
</div>
</section>
<section class="demo-section" id="installation">
<div class="container">
<h2 class="heading demo-section__heading">Installation</h2>
<p>1. Add the ckin.css or ckin.min.css to head section to the head of your html page.</p>
<code><link rel="stylesheet" href="dist/css/ckin.css"><br /></head></code>
<p>2. Add the ckin.js or ckin.min.js to the bottom of your html page. Just above the closing BODY tag.</p>
<code>
<script src="dist/js/ckin.js"></script><br /></body>
</code>
<p>3. Add your video element.</p>
<code>
<video poster="ckin.jpg" src="ckin.mp4" data-overlay="1" data-title="The curious case of Chameleon..."></video>
</code>
<p>Refresh your page. Thats, it. </p>
<p>Now all your video elements with automatically change. You dont' have to initiate anything.</p>
</div>
</section>
<section class="demo-section demo-section--light" id="options">
<div class="container">
<h2 class="heading demo-section__heading">Options</h2>
<p>Ckin player comes with many options.</p>
<p><strong>data-ckin</strong> will change the ckin. <strong>Options : default, minimum, compact</strong></p>
<code>data-ckin="compact"</code>
<p><strong>data-color</strong> will change the color of the controls.</p>
<code>data-color="#fff000"</code>
<p><strong>data-overlay</strong> will add an overlay to your video. <strong>Options: 1, 2</strong></p>
<code>data-overlay="2"</code>
<p><strong>poster</strong> is added to video cover.</p>
<code>poster="video-background-image" </code>
</div>
</section>
<footer>
<img src="logo.png" alt="" class="footer-logo">
<p><em>Ckin video player.</em></p>
</footer>
<script src="dist/js/ckin.js"></script>
</body>
</html>