-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
97 lines (80 loc) · 4.24 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
<!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="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="dist/videojs-skin-twitchy.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- <header>
<h3>Video.js</h3>
</header> -->
<section class="preview">
<div class="content">
<h1 class="skin-name">Twitchy</h1>
<p class="tagline">Videojs skin that happens to resemble a certain awesome video game <a href="http://twitch.tv">streaming site</a>.</p>
<video id="preview-player" class="video-js vjs-skin-twitchy" controls preload="auto" width="640" height="264"
poster="http://vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
<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>
<ul class="links">
<li><a href="#guide">Installation</a></li>
<li><a href="http://github.com/mmcc/videojs-skin-twitchy">Source</a></li>
<li><a href="http://videojs.com">Video.js</a></li>
</ul>
</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-twitchy/v1.0.0/dist/videojs-skin-twitchy.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-twitchy/v1.0.0/dist/videojs-skin-twitchy.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-twitchy</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">$primary-text: #fff !default;
$progress-bar: #0000ff;
$progress-bar-bg: #1B1D1F;
$progress-bar-loading: #333333;
@import "/path/to/node_modules/vjs-skin-twitchy/src/videojs-skin-twitchy";</code></pre>
</div>
<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-twitchy</code> class.</p>
<pre><code class="xml"><video id="vid" class="video-js vjs-skin-twitchy" controls width="640" height="264" data-setup='{}'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
<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>