Skip to content

Commit 70cdddd

Browse files
rachelandrewrachelandrew
committed
:current
1 parent 0f364c7 commit 70cdddd

File tree

5 files changed

+146
-0
lines changed

5 files changed

+146
-0
lines changed

‎time/current.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>The :current pseudo-class</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
video {
13+
max-width: 300px;
14+
}
15+
</style>
16+
17+
<style class="editable">
18+
19+
:current(p, span) {
20+
background-color: yellow;
21+
}
22+
23+
:past,
24+
:future {
25+
display: none;
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<section class="preview">
32+
<video controls preload="metadata">
33+
<source src="video.mp4" type="video/mp4" />
34+
<source src="video.webm" type="video/webm" />
35+
<track label="English" kind="subtitles" srclang="en" src="subtitles.vtt" default>
36+
</video>
37+
</section>
38+
39+
<textarea class="playable playable-css" style="height: 200px;">
40+
:current(p, span) {
41+
background-color: yellow;
42+
}
43+
44+
:past,
45+
:future {
46+
display: none;
47+
}
48+
49+
</textarea>
50+
51+
<textarea class="playable playable-html" style="height: 150px;">
52+
<video controls preload="metadata">
53+
<source src="video.mp4" type="video/mp4" />
54+
<source src="video.webm" type="video/webm" />
55+
<track label="English" kind="subtitles" srclang="en" src="subtitles.vtt" default>
56+
</video>
57+
</textarea>
58+
59+
<div class="playable-buttons">
60+
<input id="reset" type="button" value="Reset" />
61+
</div>
62+
</body>
63+
<script src="../playable.js"></script>
64+
</html>

‎time/styles.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Some default styling for cookbook examples */
2+
/*
3+
rgb(53,43,34)
4+
rgb(75,70,74)
5+
rgb(95,97,110)
6+
rgb(137,151,188)
7+
rgb(160,178,226)
8+
*/
9+
body {
10+
background-color: #fff;
11+
color: #333;
12+
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
13+
padding: 0;
14+
margin: 0;
15+
}
16+
17+
/* styles for the editor */
18+
19+
.playable {
20+
font-family: monospace;
21+
display: block;
22+
margin-bottom: 10px;
23+
background-color: #F4F7F8;
24+
border: none;
25+
border-left: 6px solid #558ABB;
26+
color: #4D4E53;
27+
width: 90%;
28+
max-width: 700px;
29+
padding: 10px 10px 0px;
30+
font-size: 90%;
31+
}
32+
33+
.playable-css {
34+
height: 80px;
35+
}
36+
37+
.playable-html {
38+
height: 160px;
39+
}
40+
41+
.playable-buttons {
42+
text-align: right;
43+
width: 90%;
44+
max-width: 700px;
45+
padding: 5px 10px 5px 26px;
46+
font-size: 100%;
47+
}
48+
49+
.preview {
50+
width: 90%;
51+
max-width: 700px;
52+
border: 1px solid #4D4E53;
53+
border-radius: 2px;
54+
padding: 10px 14px 10px 10px;
55+
margin-bottom: 10px;
56+
}
57+
58+
.preview input {
59+
display: block;
60+
margin: 5px;
61+
}

‎time/subtitles.vtt‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
WEBVTT FILE
2+
3+
1
4+
00:00:03.500 --> 00:00:05.000
5+
THis is the first caption
6+
7+
2
8+
00:00:06.000 --> 00:00:09.000
9+
This is the second caption
10+
11+
3
12+
00:00:11.000 --> 00:00:19.000
13+
THis is the third caption
14+
15+
4
16+
00:00:19.000 --> 00:00:24.000
17+
This is the fouth caption
18+
19+
5
20+
00:00:24.000 --> 00:00:42.000
21+
This is the last caption

‎time/video.mp4‎

23.7 MB
Binary file not shown.

‎time/video.webm‎

2.01 MB
Binary file not shown.

0 commit comments

Comments
 (0)