forked from cconcolato/media-mime-support
-
Notifications
You must be signed in to change notification settings - Fork 0
/
mediacapabilities.html
103 lines (102 loc) · 4.32 KB
/
mediacapabilities.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
<!DOCTYPE html>
<html>
<head>
<title>Testing Media Capabilities</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="codecs-video-av1.js"></script>
<script type="text/javascript" src="codecs-video-avc.js"></script>
<script type="text/javascript" src="codecs-video-vp9.js"></script>
<script type="text/javascript" src="codecs-video-hevc.js"></script>
<script type="text/javascript" src="mediacapabilities.js"></script>
</head>
<body>
<h1>Testing Media Capabilities</h1>
<p>This page is dedicated to testing the <a href="https://w3c.github.io/media-capabilities/">Media Capabilities API</a>. Checkout this <a href="index.html">other page</a>, if you're interested in ISOBMFF MIME types.</p>
<fieldset>
<legend>Configuration options:</legend>
<label for="source-select">Source type:</label>
<select id="source-select">
<option value="file">File</option>
<option value="media-source">Media Source</option>
</select>
<br>
<label for="mime-select">MIME type:</label>
<select id="mime-select">
<option value="video/mp4">video/mp4</option>
</select>
<br>
<label for="codecs-select">Codecs parameter:</label>
<select id="codecs-select">
<option value="avc1.640028">AVC High Level 4 (avc1.640028)</option>
<option value="av01.0.08H.10">AV1 Main Profile, level 4.0, High tier, 10 bits (av01.0.08H.10)</option>
<option value="hev1.2.4.L120.B0">HEVC Main10 Profile, Main Tier, Level 4.0</option>
<option value="vp09.00.50.08">VP9, Profile 0, Level 5, 8-bit (vp09.00.50.08)</option>
</select>
<br>
<label for="fps-select">FPS parameter:</label>
<select id="fps-select">
<option value="30">30 fps</option>
<option value="60">60 fps</option>
<option value="120">120 fps</option>
<option value="240">240 fps</option>
</select>
<br>
<label for="bitrate-select">Bitrate:</label>
<select id="bitrate-select">
<option value="100000">100 Kbps</option>
<option value="1000000">1 Mbps</option>
<option value="10000000">10 Mbps</option>
<option value="100000000">100 Mbps</option>
</select>
<br>
<label for="maxdimension-select">Max width/height:</label>
<select id="maxdimension-select">
<option value="1920x720">720p (1920x720)</option>
<option value="1920x1080">1080p (1920x1080)</option>
<option value="3840x2160">4K (3840x2160)</option>
<option value="7680x4320">8K (7680x4320)</option>
<option value="15360x8640">16K (15360x8640)</option>
</select>
<br>
<label for="alpha">Has Alpha Channel</label>
<input type="checkbox" id="alpha" name="alpha">
<br>
<label for="hdr-select">HDR Metadata Type:</label>
<select id="hdr-select">
<option value="">none</option>
<option value="smpteSt2086">SMPTE ST-2086</option>
<option value="smpteSt2094-10">SMPTE ST-2094-10</option>
<option value="smpteSt2094-40">SMPTE ST-2094-40</option>
</select>
<br>
<label for="color-select">Color Gamut:</label>
<select id="color-select">
<option value="">none</option>
<option value="srgb">sRGB</option>
<option value="p3">P3</option>
<option value="rec2020">REC 2020</option>
</select>
<br>
<label for="transfer-select">Transfer Function:</label>
<select id="transfer-select">
<option value="">none</option>
<option value="srgb">sRGB</option>
<option value="pq">PQ</option>
<option value="hlg">HLG</option>
</select>
</fieldset>
<br>
<p>Media Capabilities Results:<p>
<input type="checkbox" id="supported" name="supported" checked>
<label for="supported" style="color:red">Supported</label><br>
<input type="checkbox" id="powerEfficient" name="powerEfficient">
<label for="powerEfficient" style="color:green">Power Efficient</label><br>
<input type="checkbox" id="smooth" name="smooth">
<label for="smooth" style="color:blue">Smooth</label><br>
<br>
<button id="runbutton">Run Test!</button>
<br>
<p>The following image shows the results of queries to the Media Capabilities API, for some resolutions from 0x0 to the selected max resolution. Each rectangle represents a given resolution. The rectangle color is the RGB combination of: Supported, PowerEfficient, and Smooth. Hover over a rectangle to see the details of the results.</p>
<svg id="s" width="500px" style="background-color:lightgrey"></svg>
</body>
</html>