-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
98 lines (82 loc) · 4.48 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video.js Skin Colors: Preview</title>
<link href="dist/preview/preview.css" rel="stylesheet" type="text/css">
<link href="dist/videojs-skin-colors.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="preview">
<div class="content">
<h1 class="skin-name"><span class="blue">c</span><span class="pink">o</span><span class="grey">l</span><span class="green">o</span><span class="orange">r</span><span class="inverted">s</span></h1>
<p class="tagline">A collection of simple color schemes based on the base <a href="http://videojs.com">Video.js</a> styles.</p>
<video id="preview-player" class="video-js vjs-skin-colors-blue" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
<track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<div class="schemes">
<button id="blue">Blue</button>
<button id="pink">Pink</button>
<button id="grey">Grey</button>
<button id="green">Green</button>
<button id="orange">Orange</button>
<button id="inverted">Inverted</button>
</div>
</div>
</section>
<section id="guide" class="usage">
<div class="content">
<h2>Getting Started</h2>
<div class="usage-method">
<h3>Using it via a CDN</h3>
<p>
Simply include the appropriate CSS file! Thanks to <a href="https://rawgit.com" target="_blank">RawGit</a>, you can simply include the CSS
file directly from the Git repo based on the current version tag.
</p>
<pre><code class="xml"><link href="//cdn.rawgit.com/mmcc/videojs-skin-colors/v1.0.3/dist/videojs-skin-colors.css" rel="stylesheet" type="text/css"></code></pre>
</div>
<div class="usage-method">
<h3>Download the stylesheet</h3>
<p>If you prefer to host things yourself, you can simply download the stylesheet.</p>
<a href="http://cdn.rawgit.com/mmcc/videojs-skin-colors/v1.0.3/dist/videojs-skin-colors.css" class="btn btn-download" download>Download</a>
</div>
<div class="usage-method">
<h3>Your own build pipeline</h3>
<p>
If you're already using <a href="http://sass-lang.com" target="_blank">Sass</a>, you can simply import the skin's SCSS. First,
install the skin via <a href="http://npmjs.com" target="_blank">NPM</a>.
</p>
<pre><code class="bash">$ npm install --save-dev videojs-skin-colors</code></pre>
<p>You can set any variables you'd like before importing (namely the <code>$custom-colors</code> map).</p>
<pre><code class="sass">$custom-colors: (
magenta: (
background: #000000,
color: #FF00FF
)
);
@import "/path/to/node_modules/vjs-skin-colors/src/videojs-skin-colors";</code></pre>
<div class="usage-method">
<h3>Once you've got your CSS...</h3>
<p>Simply create a video element as you normally would when using Video.js, but add the <code>vjs-skin-colors</code> class.</p>
<pre><code class="xml"><video id="vid" class="video-js vjs-skin-colors-blue" controls width="640" height="264" data-setup='{}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
<track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser
that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video></code></pre>
</div>
</div>
</section>
<script src="dist/preview/preview.js"></script>
</body>
</html>