wai-website-theme 1.3.1 → 1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/different.html +2 -1
- data/_includes/external.html +2 -1
- data/_includes/header.html +2 -1
- data/_includes/menuitem.html +6 -2
- data/_includes/peoplelist.html +21 -0
- data/_includes/prevnext-navigation.html +56 -0
- data/_includes/{prevnext.html → prevnext-order.html} +9 -0
- data/_includes/translation-note-msg.html +5 -3
- data/_includes/video-player.html +2 -2
- data/_layouts/default.html +8 -1
- data/_layouts/news.html +7 -1
- data/_layouts/policy.html +7 -1
- data/_layouts/sidenav.html +8 -1
- data/_layouts/sidenavsidebar.html +8 -1
- data/assets/ableplayer/Gruntfile.js +2 -1
- data/assets/ableplayer/README.md +158 -85
- data/assets/ableplayer/build/ableplayer.dist.js +15445 -13823
- data/assets/ableplayer/build/ableplayer.js +15445 -13823
- data/assets/ableplayer/build/ableplayer.min.css +1 -2
- data/assets/ableplayer/build/ableplayer.min.js +3 -10
- data/assets/ableplayer/package-lock.json +944 -346
- data/assets/ableplayer/package.json +8 -8
- data/assets/ableplayer/scripts/ableplayer-base.js +515 -524
- data/assets/ableplayer/scripts/browser.js +158 -158
- data/assets/ableplayer/scripts/buildplayer.js +1750 -1682
- data/assets/ableplayer/scripts/caption.js +424 -401
- data/assets/ableplayer/scripts/chapters.js +259 -259
- data/assets/ableplayer/scripts/control.js +1831 -1594
- data/assets/ableplayer/scripts/description.js +333 -256
- data/assets/ableplayer/scripts/dialog.js +145 -145
- data/assets/ableplayer/scripts/dragdrop.js +746 -749
- data/assets/ableplayer/scripts/event.js +875 -696
- data/assets/ableplayer/scripts/initialize.js +819 -912
- data/assets/ableplayer/scripts/langs.js +979 -743
- data/assets/ableplayer/scripts/metadata.js +124 -124
- data/assets/ableplayer/scripts/misc.js +170 -137
- data/assets/ableplayer/scripts/preference.js +904 -904
- data/assets/ableplayer/scripts/search.js +172 -172
- data/assets/ableplayer/scripts/sign.js +82 -78
- data/assets/ableplayer/scripts/slider.js +449 -448
- data/assets/ableplayer/scripts/track.js +409 -309
- data/assets/ableplayer/scripts/transcript.js +684 -595
- data/assets/ableplayer/scripts/translation.js +63 -67
- data/assets/ableplayer/scripts/ttml2webvtt.js +85 -85
- data/assets/ableplayer/scripts/vimeo.js +448 -0
- data/assets/ableplayer/scripts/volume.js +395 -380
- data/assets/ableplayer/scripts/vts.js +1077 -1077
- data/assets/ableplayer/scripts/webvtt.js +766 -763
- data/assets/ableplayer/scripts/youtube.js +695 -478
- data/assets/ableplayer/styles/ableplayer.css +54 -46
- data/assets/ableplayer/translations/nl.js +54 -54
- data/assets/ableplayer/translations/pt-br.js +311 -0
- data/assets/ableplayer/translations/tr.js +311 -0
- data/assets/ableplayer/translations/zh-tw.js +1 -1
- data/assets/css/style.css +1 -1
- data/assets/css/style.css.map +1 -1
- data/assets/images/icons.svg +5 -5
- data/assets/scripts/main.js +7 -0
- data/assets/search/tipuesearch.js +3 -3
- metadata +8 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 45ea77342425778852b8e03d441dff2f4874ccaa24e20dd82534bd3ed47ed9ee
|
4
|
+
data.tar.gz: 3624d172f75af626e95af2772df913d2080d465704bbf4d27bc997fc246c5e06
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1318ea3faba9a2555f8b815217d49361881965e985da4d6819d4c678e9bd90e00b33bc5683215e1c2e9138db7d2716ce9e7bf456855fdeb1bedd8d82ddbce27d
|
7
|
+
data.tar.gz: 0dbc28c31ce59c81463ce3487e8ce84ec26702fa736711f546b4cf04df04460ea84204539603455bf1f8eade500c48e5be2bb3c71207adb07265f35a0582da8e
|
data/_includes/different.html
CHANGED
@@ -1 +1,2 @@
|
|
1
|
-
{
|
1
|
+
{%- capture thelabel %}{{include.label | default: "Different View"}}{% endcapture -%}
|
2
|
+
{% include_cached icon.html name="different-view" label=thelabel %}
|
data/_includes/external.html
CHANGED
@@ -1 +1,2 @@
|
|
1
|
-
{
|
1
|
+
{%- capture thelabel %}{{include.label | default: "External Site"}}{% endcapture -%}
|
2
|
+
{% include_cached icon.html name="external-link" label=thelabel %}
|
data/_includes/header.html
CHANGED
@@ -94,7 +94,7 @@ The first section creates an array of page urls that are page urls of this colle
|
|
94
94
|
{%- if col.parent -%}
|
95
95
|
{%- assign searchurl = col.parent -%}
|
96
96
|
{%- else -%}
|
97
|
-
{%- if page.parent
|
97
|
+
{%- if page.parent and page.parent != "/" -%}
|
98
98
|
{%- assign searchurl = page.parent -%}
|
99
99
|
{%- else -%}
|
100
100
|
{%- if (page.ref and pagelang) -%}
|
@@ -189,6 +189,7 @@ The first section creates an array of page urls that are page urls of this colle
|
|
189
189
|
{%- endfor -%}
|
190
190
|
{%- endfor -%}
|
191
191
|
{%- endif -%}
|
192
|
+
{%- if page.parent and page.parent != "/"-%}<li><a href="{{ page.url | relative_url }}" aria-current="page">{% if page.breadcrumb_title%}{{page.breadcrumb_title}}{% else %}{% if page.nav_title %}{% if breadcumb_page.nav_title == "Overview"%}{{page.title}}{% else%}{{page.nav_title}}{% endif %}{%-else-%}{{page.title}}{% endif %}{% endif %}</a></li>{%- endif -%}
|
192
193
|
</ul>
|
193
194
|
</nav>
|
194
195
|
{%- endunless -%}
|
data/_includes/menuitem.html
CHANGED
@@ -2,13 +2,17 @@
|
|
2
2
|
{%- unless include.hide -%}
|
3
3
|
<li>
|
4
4
|
{% include_cached link.html to=include.url text=include.name aria-current=aria different=include.different external=include.external class="page-link" usenavtitle=true lang=page.lang hidelangnotice=true %}
|
5
|
-
{
|
5
|
+
{%- unless include.submenu == "<ul></ul>" -%}
|
6
|
+
{{include.submenu}}
|
7
|
+
{%- endunless -%}
|
6
8
|
</li>
|
7
9
|
{%- else -%}
|
8
10
|
{%- if include.current == true -%}
|
9
11
|
<li>
|
10
12
|
{% include_cached link.html to=include.url text=include.name aria-current=aria different=include.different external=include.external class="page-link" usenavtitle=true lang=page.lang hidelangnotice=true %}
|
11
|
-
{
|
13
|
+
{%- unless include.submenu == "<ul></ul>" -%}
|
14
|
+
{{include.submenu}}
|
15
|
+
{%- endunless -%}
|
12
16
|
</li>
|
13
17
|
{%- endif -%}
|
14
18
|
{%- endunless -%}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
{%- for person in include.people -%}
|
2
|
+
{%- if forloop.first -%}
|
3
|
+
{% if include.label %}{{ include.label }} {% endif %}
|
4
|
+
{%- endif -%}
|
5
|
+
{%- capture orglink -%}
|
6
|
+
{%- if person.org -%}
|
7
|
+
{%- if person.orglink %}
|
8
|
+
(<a href="{{person.orglink}}" rel="nofollow noopener" target="_blank">{{person.org}} {% include_cached external.html label="new tab/window"%}</a>)
|
9
|
+
{%- else %}
|
10
|
+
({{person.org}})
|
11
|
+
{%- endif -%}
|
12
|
+
{%- endif -%}
|
13
|
+
{%- endcapture -%}
|
14
|
+
{%- if person.link -%}
|
15
|
+
<a href="{{person.link}}" rel="nofollow noopener" target="_blank">{{person.name}} {% include_cached external.html label="new tab/window"%}</a>{{orglink}}
|
16
|
+
{%- else -%}
|
17
|
+
{{person.name}}{{orglink}}
|
18
|
+
{%- endif -%}
|
19
|
+
{%- unless forloop.last -%}, {% endunless -%}
|
20
|
+
{%- if forloop.last -%}. {% endif -%}
|
21
|
+
{% endfor %}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
{%- comment -%}
|
2
|
+
|
3
|
+
This prev/next template is used when an author uses:
|
4
|
+
|
5
|
+
navigation:
|
6
|
+
prev: /path/to/resource/
|
7
|
+
next: /path/to/resource/
|
8
|
+
|
9
|
+
{%- endcomment -%}
|
10
|
+
{%- if page.lang -%}{%- assign lang = page.lang -%}{%- else -%}{%- assign lang = "en" -%}{%- endif -%}
|
11
|
+
{%- if page.navigation -%}
|
12
|
+
{%- assign prev=site.documents | where:"ref", page.navigation.previous | where: "lang", lang | first -%}
|
13
|
+
{%- unless prev.url -%}
|
14
|
+
{%- assign prev=site.pages | where:"ref", page.navigation.previous | where: "lang", lang | first -%}
|
15
|
+
{% endunless %}
|
16
|
+
|
17
|
+
{%- assign next=site.documents | where:"ref", page.navigation.next | where: "lang", lang | first -%}
|
18
|
+
{%- unless next.url -%}
|
19
|
+
{%- assign next=site.pages | where:"ref", page.navigation.next | where: "lang", lang | first -%}
|
20
|
+
{% endunless %}
|
21
|
+
|
22
|
+
{%- assign col = site.collections | where: "label", page.collection | first -%}
|
23
|
+
{%- unless col.prevnext == false -%}
|
24
|
+
{%- if page.group -%}
|
25
|
+
{%- assign docs = col.docs | where: "group", page.group | where: "lang", lang -%}
|
26
|
+
{%- else -%}
|
27
|
+
{%- assign docs = col.docs | where: "lang", lang -%}
|
28
|
+
{%- endif -%}
|
29
|
+
<nav class="pager" aria-label="Previous/Next Page" style="clear: both;">
|
30
|
+
<ul>
|
31
|
+
{%- if page.navigation.previous -%}
|
32
|
+
<li class="pager--item previous">
|
33
|
+
<a href="{{prev.url | relative_url }}">
|
34
|
+
{% include_cached icon.html name="arrow-left" class="pager--item-icon" %}
|
35
|
+
<span class="pager--item-text">
|
36
|
+
<span class="pager--item-text-direction">{% include t.html t="Previous" %}:</span>
|
37
|
+
<span class="pager--item-text-target">{% if prev.nav_title %}{{prev.nav_title}}{% else %}{{prev.title}}{% endif %}</span>
|
38
|
+
</span>
|
39
|
+
</a>
|
40
|
+
</li>
|
41
|
+
{%- endif -%}
|
42
|
+
{%- if page.navigation.next -%}
|
43
|
+
<li class="pager--item next">
|
44
|
+
<a href="{{next.url | relative_url }}">
|
45
|
+
{% include_cached icon.html name="arrow-right" class="pager--item-icon" %}
|
46
|
+
<span class="pager--item-text">
|
47
|
+
<span class="pager--item-text-direction">{% include t.html t="Next" %}:</span>
|
48
|
+
<span class="pager--item-text-target">{% if next.nav_title %}{{next.nav_title}}{% else %}{{next.title}}{% endif %}</span>
|
49
|
+
</span>
|
50
|
+
</a>
|
51
|
+
</li>
|
52
|
+
</ul>
|
53
|
+
{%- endif -%}
|
54
|
+
</nav>
|
55
|
+
{%- endunless -%}
|
56
|
+
{%- endif -%}
|
@@ -1,3 +1,12 @@
|
|
1
|
+
{%- comment -%}
|
2
|
+
|
3
|
+
This prev/next template is used when an author uses:
|
4
|
+
|
5
|
+
order: <num>
|
6
|
+
|
7
|
+
It is only useable in collections, hence prevnext-navigation exists :-)
|
8
|
+
|
9
|
+
{%- endcomment -%}
|
1
10
|
{%- if page.lang -%}{%- assign lang = page.lang -%}{%- else -%}{%- assign lang = "en" -%}{%- endif -%}
|
2
11
|
{%- if page.order -%}
|
3
12
|
{%- assign col = site.collections | where: "label", page.collection | first -%}
|
@@ -37,9 +37,11 @@
|
|
37
37
|
{% endif %}
|
38
38
|
{% endif %}
|
39
39
|
<p>
|
40
|
+
{%- capture translatorslabel %}<strong>{% include t.html t='Translator:' %}</strong>{%- endcapture %}
|
41
|
+
{% include peoplelist.html label=translatorslabel people=page.translators %}
|
42
|
+
{%- capture contributorslabel %}{% include t.html t='Contributor:' %}{%- endcapture %}
|
43
|
+
{% include peoplelist.html label=contributorslabel people=page.contributors %}
|
40
44
|
{%- assign replacepattern = "/about/translating/" | relative_url | prepend: "$1|" -%}
|
41
|
-
|
42
|
-
{% if page.contributors %}{% include t.html t='Contributor:' %} {{page.contributors}}.{% endif %}
|
43
|
-
{% include t.html t='WAI thanks translators, and welcomes other <a href="$1">translations</a>.' replace=replacepattern %}</p>
|
45
|
+
<br>{% include t.html t='WAI thanks translators, and welcomes other <a href="$1">translations</a>.' replace=replacepattern %}</p>
|
44
46
|
</section>
|
45
47
|
{%- endunless -%}
|
data/_includes/video-player.html
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{%- assign langs = site.data.lang -%}
|
2
|
-
<div class="video-container" data-video-type="">
|
3
|
-
<video preload="metadata" data-youtube-id="{{include.yt-id}}" data-youtube-nocookie="true" width="450"
|
2
|
+
<div class="video-container" data-video-type="" dir="ltr">
|
3
|
+
<video preload="metadata" data-youtube-id="{{include.yt-id}}" data-youtube-nocookie="true" width="450">
|
4
4
|
{%- assign captions = include.captions | split: ',' -%}
|
5
5
|
{%- for caption in captions -%}
|
6
6
|
{%- assign c = caption | split: '|' -%}
|
data/_layouts/default.html
CHANGED
@@ -55,9 +55,16 @@
|
|
55
55
|
{% include resources.html %}
|
56
56
|
{% endif %}
|
57
57
|
|
58
|
+
{%- if page.navigation -%}
|
59
|
+
{%- include prevnext-navigation.html -%}
|
60
|
+
{%- else -%}
|
61
|
+
{%- if page.order -%}
|
62
|
+
{%- include prevnext-order.html -%}
|
63
|
+
{%- endif -%}
|
64
|
+
{%- endif -%}
|
65
|
+
|
58
66
|
{% include feedback-box.html %}
|
59
67
|
|
60
|
-
{% include prevnext.html %}
|
61
68
|
|
62
69
|
{% include_cached backtotop.html lang=page.lang %}
|
63
70
|
</main>
|
data/_layouts/news.html
CHANGED
@@ -49,7 +49,13 @@
|
|
49
49
|
|
50
50
|
<p>({{page.date | date: "%Y-%m-%d"}})</p>
|
51
51
|
|
52
|
-
{
|
52
|
+
{%- if page.navigation -%}
|
53
|
+
{%- include prevnext-navigation.html -%}
|
54
|
+
{%- else -%}
|
55
|
+
{%- if page.order -%}
|
56
|
+
{%- include prevnext-order.html -%}
|
57
|
+
{%- endif -%}
|
58
|
+
{%- endif -%}
|
53
59
|
|
54
60
|
{% include_cached backtotop.html lang=page.lang %}
|
55
61
|
</main>
|
data/_layouts/policy.html
CHANGED
@@ -94,7 +94,13 @@
|
|
94
94
|
{% include box.html type="end" %}
|
95
95
|
{% endfor %}
|
96
96
|
</div>
|
97
|
-
|
97
|
+
{%- if page.navigation -%}
|
98
|
+
{%- include prevnext-navigation.html -%}
|
99
|
+
{%- else -%}
|
100
|
+
{%- if page.order -%}
|
101
|
+
{%- include prevnext-order.html -%}
|
102
|
+
{%- endif -%}
|
103
|
+
{%- endif -%}
|
98
104
|
|
99
105
|
{% include_cached backtotop.html lang=page.lang %}
|
100
106
|
</main>
|
data/_layouts/sidenav.html
CHANGED
@@ -53,9 +53,16 @@
|
|
53
53
|
{% include resources.html %}
|
54
54
|
{% endif %}
|
55
55
|
|
56
|
+
{%- if page.navigation -%}
|
57
|
+
{%- include prevnext-navigation.html -%}
|
58
|
+
{%- else -%}
|
59
|
+
{%- if page.order -%}
|
60
|
+
{%- include prevnext-order.html -%}
|
61
|
+
{%- endif -%}
|
62
|
+
{%- endif -%}
|
63
|
+
|
56
64
|
{% include feedback-box.html %}
|
57
65
|
|
58
|
-
{% include prevnext.html %}
|
59
66
|
|
60
67
|
{% include_cached backtotop.html lang=page.lang %}
|
61
68
|
</main>
|
@@ -49,9 +49,16 @@
|
|
49
49
|
|
50
50
|
{{ content }}
|
51
51
|
|
52
|
+
{%- if page.navigation -%}
|
53
|
+
{%- include prevnext-navigation.html -%}
|
54
|
+
{%- else -%}
|
55
|
+
{%- if page.order -%}
|
56
|
+
{%- include prevnext-order.html -%}
|
57
|
+
{%- endif -%}
|
58
|
+
{%- endif -%}
|
59
|
+
|
52
60
|
{% include feedback-box.html %}
|
53
61
|
|
54
|
-
{% include prevnext.html %}
|
55
62
|
|
56
63
|
{% include_cached backtotop.html lang=page.lang %}
|
57
64
|
</main>
|
data/assets/ableplayer/README.md
CHANGED
@@ -1,11 +1,9 @@
|
|
1
1
|
Able Player
|
2
2
|
==========
|
3
3
|
|
4
|
-
*Able Player* is a fully accessible cross-browser media player.
|
5
|
-
the HTML5 `<audio>` or `<video>` element for browsers that support them,
|
6
|
-
and (optionally) the JW Player as a fallback for those that don’t.
|
4
|
+
*Able Player* is a fully accessible cross-browser HTML5 media player.
|
7
5
|
|
8
|
-
To see the player in action check
|
6
|
+
To see the player in action check out the [Able Player Examples][examples] page.
|
9
7
|
|
10
8
|
Features
|
11
9
|
--------
|
@@ -22,9 +20,9 @@ Features
|
|
22
20
|
- Support for adjustable playback rate. Users who need to slow down the video in order to better process and understand its content can do so; and users who need to speed up the video in order to maintain better focus can do so.
|
23
21
|
- An interactive transcript feature, built from the WebVTT chapter, caption and description files as the page is loaded. Users can click anywhere in the transcript to start playing the video (or audio) at that point. Keyboard users can also choose to keyboard-enable the transcript, so they can tab through its content one caption at a time and press enter to play the media at the desired point.
|
24
22
|
- Automatic text highlighting within the transcript as the media plays. This feature is enabled by default but can be turned off if users find it distracting.
|
25
|
-
- Support for playing YouTube videos within the Able Player chrome.
|
23
|
+
- Support for playing YouTube and Vimeo videos within the Able Player chrome.
|
26
24
|
- Customizable caption display. Users can control the font style, size, and color of caption text; plus background color and transparency; all from the Preferences dialog. They can also choose to position captions *below* the video instead of the default position (an semi-transparent overlay).
|
27
|
-
-
|
25
|
+
- Fallback support (see section on **Fallback** for details).
|
28
26
|
- Extensive customization. Many of the features described above are controlled by user preferences. This is based on the belief that every user has different needs and there are no one-size-fits-all solutions. This is the heart of universal design.
|
29
27
|
|
30
28
|
Supported Languages
|
@@ -44,6 +42,7 @@ Able Player has been translated into the following languages. To add another lan
|
|
44
42
|
<li><strong lang="ja">日本語</strong> (Japanese)</li>
|
45
43
|
<li><strong lang="nb">Norsk Bokmål</strong> (Norwegian)</li>
|
46
44
|
<li><strong lang="nl">Nederlands, Vlaams</strong> (Dutch)</li>
|
45
|
+
<li><strong lang="tr">Türkçe</strong> (Turkish)</li>
|
47
46
|
</ul>
|
48
47
|
|
49
48
|
Contributing
|
@@ -62,12 +61,11 @@ Compatibility
|
|
62
61
|
technologies.
|
63
62
|
|
64
63
|
- Firefox 3.x and higher
|
65
|
-
- Internet Explorer 10 and higher
|
66
|
-
- Internet Explorer 8 and 9, dependent on JW Player as fallback.
|
64
|
+
- Internet Explorer 10 and higher
|
67
65
|
- Google Chrome 7.0 and higher
|
68
66
|
- Opera 10.63 and higher
|
69
67
|
- Safari 5.0 on Mac OS X
|
70
|
-
- Safari on IOS 3.2.2 and higher
|
68
|
+
- Safari on IOS 3.2.2 and higher
|
71
69
|
- Chrome on Android 4.2 and higher
|
72
70
|
|
73
71
|
Note that mobile browsers have limitations (e.g., volume control and autostart are not supported)
|
@@ -75,61 +73,52 @@ Note that mobile browsers have limitations (e.g., volume control and autostart a
|
|
75
73
|
Dependencies
|
76
74
|
------------
|
77
75
|
|
78
|
-
*Able Player* has
|
79
|
-
*Able Player* or available through Google’s hosted libraries. The one
|
80
|
-
exception is the fallback player—see the *Fallback* section below for
|
81
|
-
details.
|
76
|
+
*Able Player* has the following third party dependencies:
|
82
77
|
|
83
78
|
- *Able Player* uses [jQuery][]. Version 3.2.1 or higher is recommended.
|
84
79
|
The example code below uses Google’s hosted libraries; no download required.
|
85
|
-
- *Able Player* uses [Modernizr][] to enable styling of HTML5 elements
|
86
|
-
in Internet Explorer 6 through 8. A Modernizr 2.6.2 Custom Build is
|
87
|
-
distributed with *Able Player*, and is all that *Able Player* needs.
|
88
80
|
- *Able Player* uses [js-cookie][] to store and retrieve user
|
89
81
|
preferences in cookies. This script is distributed with *Able
|
90
82
|
Player*. Prior to version 2.3, Able Player used [jquery.cookie][]
|
91
83
|
for this same purpose.
|
84
|
+
|
85
|
+
To install Able Player, copy the following files from the Able Player repo into a folder on your web server:
|
86
|
+
- build/*
|
87
|
+
- button-icons/*
|
88
|
+
- images/*
|
89
|
+
- styles/* (optional, see note below)
|
90
|
+
- thirdparty/* (includes js-cookie, as mentioned above)
|
91
|
+
- translations/*
|
92
|
+
- LICENSE
|
93
|
+
|
94
|
+
The *build* folder includes minified production code (*ableplayer.min.js* and *ableplayer.min.css*).
|
95
|
+
For debugging and/or style customization purposes, human-readable source files are also available:
|
96
|
+
- build/ableplayer.js
|
97
|
+
- styles/ableplayer.css
|
98
|
+
|
92
99
|
|
93
100
|
Fallback
|
94
101
|
--------
|
95
102
|
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
and
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
- Firefox since 3.5
|
116
|
-
- Safari since 3.1
|
117
|
-
- Opera since 10.5
|
118
|
-
- Internet Explorer since 9.0 (video was buggy in 9; better in 10)
|
119
|
-
|
120
|
-
Note the following limitations in Internet Explorer (IE):
|
121
|
-
- IE10 and higher work fine without a fallback player
|
122
|
-
- IE9 was the first version of IE to support HTML5 media elements. However, its support for video was buggy so Able Player uses the fallback if it's available
|
123
|
-
- IE8 works fine with JW Player as fallback
|
124
|
-
- IE6 and 7 are not supported
|
125
|
-
|
126
|
-
At some point we may decide that it’s reasonable to stop supporting a fallback player.
|
127
|
-
However, according to [WebAIM’s 2017 Screen Reader User Survey][] 4.1% of screen reader users are still using IE 6, 7, or 8,
|
128
|
-
and 4.0% are still using IE 9 or 10. Until these users catch up, we think we have to provide a working fallback.
|
129
|
-
|
130
|
-
As an alternative fallback, you could link to the media file so users
|
131
|
-
can download it and play it on their player of choice, and/or provide a
|
132
|
-
transcript.
|
103
|
+
All modern browsers have supported HTML5 media elements for many years.
|
104
|
+
However, there are still older browsers in use that don’t have this support
|
105
|
+
(e.g., Internet Explorer 9 and earlier). For these, you need to provide fallback content.
|
106
|
+
|
107
|
+
Prior to version 4.0, *Able Player* used [JW Player][] as a fallback Flash player
|
108
|
+
for older browsers. However, this solution was built specifically on **JW Player 6**
|
109
|
+
which is now many versions old and difficult to find.
|
110
|
+
|
111
|
+
Also, prior to version 4.0, *Able Player* used [Modernizr][] to enable
|
112
|
+
styling of HTML5 elements in Internet Explorer 6 through 8. This too is no longer
|
113
|
+
supported, and Modernizr is no longer needed.
|
114
|
+
|
115
|
+
Instead, we recommend providing alternative content as a child of the `<video>` or `<audio>` element.
|
116
|
+
For example, this could be a link to the media file so users can download it
|
117
|
+
and play it on their player of choice. Or it could be a link to a transcript.
|
118
|
+
|
119
|
+
If the browser is unable to play the media file, Able Player will show this alternative content.
|
120
|
+
If no alternative content is provided, Able Player will display a standard message that lists
|
121
|
+
the minimum versions of common web browsers required for playing HTML5 media.
|
133
122
|
|
134
123
|
Setup Step 1: Use HTML5 Doctype
|
135
124
|
-------------------------------
|
@@ -211,14 +200,14 @@ The following attributes are supported on both the `<audio>` and `<video>` eleme
|
|
211
200
|
- **data-debug** - optional; if present will write messages to the developer console
|
212
201
|
- **autoplay** - optional; play media automatically when page loads. For accessibility reasons, this is *not* recommended unless user is sure to *expect* media to automatically start. For example, autoplay could reasonably be used in conjunction with data-start-time in a media search application.
|
213
202
|
- **loop** - optional; loops and plays the media file repeatedly. If used in conjunction with a playlist, loops the entire playlist rather than individual tracks.
|
214
|
-
- **playsinline** - optional but recommended; instructs supporting browsers to play the video "inline" within the web page. This is especially applicable on iPhones, which by default load the video in their own built-in video player, thereby removing it from its surrounding context, which includes Able Player buttons and controls, an interactive transcript, and any other companion features added via Able Player. If this attribute is present, it works for all supported videos, including YouTube videos.
|
203
|
+
- **playsinline** - optional but recommended; instructs supporting browsers to play the video "inline" within the web page. This is especially applicable on iPhones, which by default load the video in their own built-in video player, thereby removing it from its surrounding context, which includes Able Player buttons and controls, an interactive transcript, and any other companion features added via Able Player. If this attribute is present, it works for all supported videos, including YouTube and Vimeo videos.
|
215
204
|
- **preload** - optional; tells the browser how much media to download
|
216
205
|
when the page loads. If the media is the central focus of the web
|
217
206
|
page, use **preload="auto"**, which instructs the browser to
|
218
207
|
download as much of the media as possible. If the media is not a
|
219
208
|
central focus, downloading the entire media resource can consume
|
220
209
|
valuable bandwidth, so preload="metadata" would be a better option.
|
221
|
-
- **width** - width of the media player in pixels. For video, this value should reflect the target width of the media itself. If not provided will
|
210
|
+
- **width** - width of the media player in pixels. For video, this value should reflect the target width of the media itself. If not provided the player will be sized to fit its container.
|
222
211
|
- **data-root-path** - define path to root directory of Able Player; generally not required but may be needed in rare instances where Able Player is unable to identify its current path on the web server
|
223
212
|
- **data-heading-level** - optional; Able Player injects an off-screen HTML heading "Media Player" (or localized equivalent) at the top of the player so screen reader users can easily find the player. It automatically assigns a heading level that is one level deeper than the closest parent heading. This attribute can be used to manually set the heading level, rather than relying on Able Player to assign it automatically. Valid values are 1 through 6. A value of 0 is also supported, and instructs Able Player to not inject a heading at all. The latter should be used only if the web page already includes a heading immediately prior to the media player.
|
224
213
|
- **data-hide-controls** - optional; set to "true" to hide controls during playback. Controls are visibly hidden but still accessible to assistive technologies. Controls reappear if user presses any key or moves the mouse over the video player region.
|
@@ -309,11 +298,7 @@ The following attributes make all this possible:
|
|
309
298
|
|
310
299
|
#### Fallback Player
|
311
300
|
|
312
|
-
- **data-fallback** - optional;
|
313
|
-
- **data-test-fallback** - optional; force browser to user fallback player (recommended for testing only)
|
314
|
-
- **data-fallback-path** - optional; override default path to directory in which the fallback player files are stored
|
315
|
-
- **data-fallback-jwkey** - optional; set JW Player key for hosted players
|
316
|
-
|
301
|
+
- **data-test-fallback** - optional; force browsers to display the fallback content that will be shown to users with older browsers that don't support HTML5 media.
|
317
302
|
|
318
303
|
The following attributes are supported on the `<video>` element only:
|
319
304
|
|
@@ -321,10 +306,13 @@ The following attributes are supported on the `<video>` element only:
|
|
321
306
|
- **data-youtube-id** - optional; 11-character YouTube ID, to play the YouTube video using *Able Player*.
|
322
307
|
- **data-youtube-desc-id** - optional; 11-character YouTube ID of the described version of a video. See the section below on *YouTube Support* for additional information.
|
323
308
|
- **data-youtube-nocookie** - optional; if set to "true" the YouTube video will be embedded using the "youtube-nocookie.com" host.
|
324
|
-
- **
|
325
|
-
|
309
|
+
- **data-vimeo-id** - optional; ID of a video on Vimeo, to play the Vimeo video using *Able Player*.
|
310
|
+
- **data-vimeo-desc-id** - optional; ID of the described version of a video on Vimeo. See the section below on *Vimeo Support* for additional information.
|
311
|
+
- **height** - height of the video in pixels.
|
326
312
|
- **poster** - path to an image file. Will be displayed in the player
|
327
313
|
until the video is played.
|
314
|
+
|
315
|
+
If width and height are omitted, the player will be sized to fit its container.
|
328
316
|
|
329
317
|
The following additional features are supported by *Able Player*:
|
330
318
|
|
@@ -425,9 +413,11 @@ To do so, run the shell script *compile.sh*.
|
|
425
413
|
Playlists
|
426
414
|
---------
|
427
415
|
|
428
|
-
An *Able Player* playlist is an HTML list of tracks.
|
429
|
-
either
|
430
|
-
|
416
|
+
An *Able Player* playlist is an HTML list of tracks. A playlist can accompany
|
417
|
+
either a video or audio player, but both audio and video cannot be combined
|
418
|
+
within a single playlist. The list can be either ordered (`<ol>`) or unordered (`<ul>`).
|
419
|
+
|
420
|
+
The following attributes are supported on the list element:
|
431
421
|
|
432
422
|
- **class** - required; must be **able-playlist**
|
433
423
|
- **data-player** - required; must reference the ID of the media
|
@@ -437,20 +427,87 @@ are supported on the list element:
|
|
437
427
|
omitted, the playlist will be external to the player and will appear
|
438
428
|
wherever you place it on the web page.
|
439
429
|
|
440
|
-
Within the playlist, each list item
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
430
|
+
Within the playlist, each list item can include the following HTML attributes:
|
431
|
+
|
432
|
+
- **data-poster** - path to an image file.
|
433
|
+
- **width** - width of the video in pixels.
|
434
|
+
- **height** - height of the video in pixels.
|
435
|
+
|
436
|
+
If width and height are omitted, the player will be sized to fit its container.
|
437
|
+
|
438
|
+
The following HTML elements must be nested inside each list item:
|
439
|
+
|
440
|
+
A `<span>` element with **class="able-source"** for each `<source>` element
|
441
|
+
that is to accompany the media. When the user selects an item from the playlist,
|
442
|
+
its able-source `<span>` elements will be copied to `<source>` elements and loaded for playback.
|
443
|
+
For each attribute that will ultimately be on the media's `<source>` elements,
|
444
|
+
add the same attributes to each `<span>`, prefaced with **data-**.
|
445
|
+
|
446
|
+
|
447
|
+
Within the playlist, each list item must include the following HTML elements:
|
445
448
|
|
449
|
+
- A `<span>` element with **class="able-source"** for each `<source>` element
|
450
|
+
that is to accompany the media. When the user selects an item from the playlist,
|
451
|
+
its able-source `<span>` elements will be copied to `<source>` elements and loaded for playback.
|
452
|
+
For each attribute that will ultimately be on the media's `<source>` elements,
|
453
|
+
add the same attributes to each `<span>`, prefaced with **data-**.
|
454
|
+
- A `<span>` element with **class="able-track"** for each `<track>` element
|
455
|
+
that is to accompany the media. When the user selects an item from the playlist,
|
456
|
+
its able-track `<span>` elements will be copied to `<track>` elements and loaded for playback.
|
457
|
+
For each attribute that will ultimately be on the media's `<track>` elements,
|
458
|
+
add the same attributes to each `<span>`, prefaced with **data-**.
|
459
|
+
- A `<button>` element with **type="button"**. Inside the button, include either text,
|
460
|
+
an image, or both. This content would typically be the title of the item. If using an image
|
461
|
+
alone, be sure to add a meaningful **alt** attribute. If the image is purely decorative and
|
462
|
+
is accompanied by text, using **alt=""**.
|
463
|
+
|
464
|
+
The following example shows a playlist with two videos. The first video has one source (an MP4 file),
|
465
|
+
and two tracks (captions and descriptions). The second video is hosted on YouTube, and has both a
|
466
|
+
non-described and described version. It also has a locally-hosted chapters track.
|
467
|
+
Able Player supports mixed playlists, with videos hosted locally or on YouTube.
|
468
|
+
Vimeo videos are not yet supported within playlists.
|
469
|
+
|
446
470
|
```HTML
|
447
|
-
<ul class="able-playlist" data-player="
|
448
|
-
<li data-
|
449
|
-
|
450
|
-
|
471
|
+
<ul class="able-playlist" data-player="my_video_player">
|
472
|
+
<li data-poster="video1.jpg" data-width="480" data-height="360">
|
473
|
+
<span class="able-source"
|
474
|
+
data-type="video/mp4"
|
475
|
+
data-src="video1.mp4">
|
476
|
+
</span>
|
477
|
+
<span class="able-track"
|
478
|
+
data-kind="captions"
|
479
|
+
data-src="video1_captions_en.vtt"
|
480
|
+
data-srclang="en"
|
481
|
+
data-label="English">
|
482
|
+
</span>
|
483
|
+
<span class="able-track"
|
484
|
+
data-kind="descriptions"
|
485
|
+
data-src="video1_description_en.vtt"
|
486
|
+
data-srclang="en"
|
487
|
+
data-label="English">
|
488
|
+
</span>
|
489
|
+
<button type="button">
|
490
|
+
<img src="video1_thumbnail.jpg" alt="">
|
491
|
+
Title of Video 1
|
492
|
+
</button>
|
493
|
+
</li>
|
494
|
+
<li data-youtube-id="xxxxxxxxxxx" data-youtube-desc-id="yyyyyyyyyyy">
|
495
|
+
<span class="able-track"
|
496
|
+
data-kind="chapters"
|
497
|
+
data-src="video2_chapters.vtt"
|
498
|
+
data-srclang="en"
|
499
|
+
data-label="Chapters">
|
500
|
+
</span>
|
501
|
+
<button type="button">
|
502
|
+
<!-- thumbnail will be retrieved from YouTube -->
|
503
|
+
Title of Video 2
|
504
|
+
</button>
|
505
|
+
</li>
|
451
506
|
</ul>
|
452
507
|
```
|
453
508
|
|
509
|
+
For additional examples of both audio and video playlists, see the [Able Player Examples][examples] page.
|
510
|
+
|
454
511
|
**Supported data-\* audio types:**
|
455
512
|
|
456
513
|
- mp3
|
@@ -518,10 +575,10 @@ on the `<video>` element. The value of this attribute must be the 11-character Y
|
|
518
575
|
of the described version. If users turn on the Description button on their player controller,
|
519
576
|
the described version of the video will be loaded instead of the non-described version.
|
520
577
|
|
521
|
-
|
578
|
+
Versions 2.3.1 through 3.2.12 required a YouTube Data API key for retrieving caption data from YouTube.
|
522
579
|
Get a YouTube Data API key by registering your application at the [Google Developer Console][].
|
523
580
|
For complete instructions, see [Google's Getting Started page]. Note: All that's needed for
|
524
|
-
playing YouTube videos in Able Player is a simple API key, **not** OAuth 2.0.
|
581
|
+
playing YouTube videos in Able Player is a simple API key, **not** OAuth 2.0.
|
525
582
|
|
526
583
|
After obtaining your YouTube Data API Key, insert the following code into your HTML page:
|
527
584
|
|
@@ -536,21 +593,37 @@ After obtaining your YouTube Data API Key, insert the following code into your H
|
|
536
593
|
<script src="http://apis.google.com/js/client.js?onload=initGoogleClientApi"></script>
|
537
594
|
```
|
538
595
|
|
539
|
-
|
540
|
-
|
541
|
-
|
596
|
+
Starting with version 3.2.13, Able Player no longer requires a YouTube Data API key in order to access caption tracks from YouTube. However, an API key is still encouraged, as it relies on well-documented methods from Google,
|
597
|
+
whereas operating without an API key relies on methods that are not well documented, and therefore
|
598
|
+
may not be reliable.
|
599
|
+
|
600
|
+
Also new in 3.2.13, Able Player now handles YouTube captions in the same way it handles HTML `<track kind="captions">` elements. The display of the caption text can be customized via the Preferences menu, and the caption text is used to automatically create an interactive transcript.
|
542
601
|
|
543
|
-
The advantage of managing captions entirely on YouTube is that you only have to manage them in
|
544
|
-
one place, and they're available everywhere your YouTube video is played.
|
602
|
+
YouTube does not currently support chapters, descriptions, and metadata tracks. With Able Player, these features can be added to the video using HTML `<track>` elements, even if the video's captions and subtitles are stored on YouTube. The advantage of managing captions entirely on YouTube is that you only have to manage them in one place, and they're available everywhere your YouTube video is played.
|
545
603
|
|
546
|
-
|
604
|
+
If your video has HTML `<track>` elements for captions and subtitles, these will be used *instead of* the captions on YouTube.
|
547
605
|
|
548
|
-
- Able Player can repurpose the captions into an interactive transcript
|
549
|
-
- The captions are searchable using the **data-search** attribute
|
550
|
-
- Users can control how the captions are displayed (e.g., color, background color, opacity)
|
551
606
|
|
552
607
|
Adjustable playback rate is available for some videos.
|
553
608
|
|
609
|
+
Vimeo Support
|
610
|
+
---------------
|
611
|
+
|
612
|
+
To play a Vimeo video in *Able Player*, simply include a **data-vimeo-id** attribute
|
613
|
+
on the `<video>` element. The value of this attribute must be the video's Vimeo ID (a string of numbers).
|
614
|
+
|
615
|
+
If a described version of the video is available on Vimeo, include a **data-vimeo-desc-id** attribute
|
616
|
+
on the `<video>` element. The value of this attribute must be the Vimeo ID
|
617
|
+
of the described version. If users turn on the Description button on their player controller,
|
618
|
+
the described version of the video will be loaded instead of the non-described version.
|
619
|
+
|
620
|
+
Note that Vimeo currently has a few major limitations:
|
621
|
+
|
622
|
+
- A Plus, Pro or Business account is required in order to hide Vimeo's default controller. If videos are hosted on a free account, the Vimeo controller and Able Player controller are both shown. The Vimeo controller disappears temporarily after playback begins, but until then having both players present is extremely cluttered and confusing
|
623
|
+
- Hiding Vimeo's playback controls (as per the previous item) also hides captions and subtitles. Therefore the only way to include captions and subtitles is to host them locally and reference them with a <track> element. This is necessary anyway in order to have an interactive transcript, since Vimeo does not expose its caption data in a way that would enable Able Player to repurpose captions into a transcript.
|
624
|
+
- A Pro or Business account is required in order to change playback rate (with faster and slower buttons). Even with a Pro or Business account, this feature is off by default and "Speed controls" need to be enabled within the settings for each video.
|
625
|
+
|
626
|
+
|
554
627
|
MIME Types
|
555
628
|
----------
|
556
629
|
|