wai-website-theme 1.2 → 1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_includes/backtotop.html +1 -1
- data/_includes/excol.html +1 -1
- data/_includes/feedback-box.html +13 -10
- data/_includes/footer.html +20 -6
- data/_includes/header.html +73 -35
- data/_includes/inpl.html +6 -0
- data/_includes/lang.html +7 -0
- data/_includes/link.html +92 -0
- data/_includes/menuitem.html +5 -3
- data/_includes/multilang-list-policy-links.html +1 -1
- data/_includes/navlist.html +1 -1
- data/_includes/prevnext.html +5 -4
- data/_includes/secondarynav.html +34 -6
- data/_includes/t.html +33 -0
- data/_includes/translation-note-msg.html +45 -0
- data/_includes/video-player.html +50 -9
- data/_layouts/default.html +32 -9
- data/_layouts/home.html +29 -5
- data/_layouts/news.html +27 -6
- data/_layouts/policy.html +27 -6
- data/_layouts/sidenav.html +27 -6
- data/_layouts/sidenavsidebar.html +27 -6
- data/assets/ableplayer/.gitattributes +0 -0
- data/assets/ableplayer/.gitignore +3 -1
- data/assets/ableplayer/Gruntfile.js +3 -1
- data/assets/ableplayer/LICENSE +0 -0
- data/assets/ableplayer/README.md +214 -170
- data/assets/ableplayer/_config.yml +1 -0
- data/assets/ableplayer/build/ableplayer.dist.js +2637 -744
- data/assets/ableplayer/build/ableplayer.js +2637 -744
- data/assets/ableplayer/build/ableplayer.min.css +2 -2
- data/assets/ableplayer/build/ableplayer.min.js +9 -7
- data/assets/ableplayer/button-icons/able-icons.svg +0 -0
- data/assets/ableplayer/button-icons/black/rabbit.png +0 -0
- data/assets/ableplayer/button-icons/black/turtle.png +0 -0
- data/assets/ableplayer/button-icons/white/rabbit.png +0 -0
- data/assets/ableplayer/button-icons/white/turtle.png +0 -0
- data/assets/ableplayer/images/wingrip.png +0 -0
- data/assets/ableplayer/package-lock.json +705 -0
- data/assets/ableplayer/package.json +11 -2
- data/assets/ableplayer/scripts/JQuery.doWhen.js +0 -0
- data/assets/ableplayer/scripts/ableplayer-base.js +129 -29
- data/assets/ableplayer/scripts/browser.js +0 -0
- data/assets/ableplayer/scripts/buildplayer.js +342 -262
- data/assets/ableplayer/scripts/caption.js +19 -0
- data/assets/ableplayer/scripts/chapters.js +21 -0
- data/assets/ableplayer/scripts/control.js +139 -56
- data/assets/ableplayer/scripts/description.js +0 -0
- data/assets/ableplayer/scripts/dialog.js +13 -13
- data/assets/ableplayer/scripts/dragdrop.js +102 -109
- data/assets/ableplayer/scripts/event.js +186 -83
- data/assets/ableplayer/scripts/initialize.js +261 -71
- data/assets/ableplayer/scripts/langs.js +4 -0
- data/assets/ableplayer/scripts/metadata.js +0 -0
- data/assets/ableplayer/scripts/misc.js +76 -7
- data/assets/ableplayer/scripts/preference.js +2 -2
- data/assets/ableplayer/scripts/search.js +10 -7
- data/assets/ableplayer/scripts/sign.js +0 -0
- data/assets/ableplayer/scripts/slider.js +35 -34
- data/assets/ableplayer/scripts/track.js +38 -22
- data/assets/ableplayer/scripts/transcript.js +15 -6
- data/assets/ableplayer/scripts/translation.js +29 -20
- data/assets/ableplayer/scripts/ttml2webvtt.js +87 -0
- data/assets/ableplayer/scripts/volume.js +16 -15
- data/assets/ableplayer/scripts/vts.js +1093 -0
- data/assets/ableplayer/scripts/webvtt.js +0 -0
- data/assets/ableplayer/scripts/youtube.js +16 -5
- data/assets/ableplayer/styles/ableplayer.css +125 -22
- data/assets/ableplayer/thirdparty/js.cookie.js +0 -0
- data/assets/ableplayer/thirdparty/modernizr.custom.js +0 -0
- data/assets/ableplayer/translations/ca.js +311 -1
- data/assets/ableplayer/translations/de.js +1 -1
- data/assets/ableplayer/translations/en.js +6 -0
- data/assets/ableplayer/translations/es.js +6 -0
- data/assets/ableplayer/translations/fr.js +6 -0
- data/assets/ableplayer/translations/he.js +311 -0
- data/assets/ableplayer/translations/it.js +7 -1
- data/assets/ableplayer/translations/ja.js +6 -0
- data/assets/ableplayer/translations/nb.js +311 -0
- data/assets/ableplayer/translations/nl.js +6 -0
- data/assets/ableplayer/translations/zh-tw.js +311 -0
- data/assets/css/style.css +1 -1
- data/assets/css/style.css.map +1 -1
- data/assets/fonts/{anonymouspro-bold.woff → anonymouspro/anonymouspro-bold.woff} +0 -0
- data/assets/fonts/{anonymouspro-bold.woff2 → anonymouspro/anonymouspro-bold.woff2} +0 -0
- data/assets/fonts/{anonymouspro-bolditalic.woff → anonymouspro/anonymouspro-bolditalic.woff} +0 -0
- data/assets/fonts/{anonymouspro-bolditalic.woff2 → anonymouspro/anonymouspro-bolditalic.woff2} +0 -0
- data/assets/fonts/{anonymouspro-italic.woff → anonymouspro/anonymouspro-italic.woff} +0 -0
- data/assets/fonts/{anonymouspro-italic.woff2 → anonymouspro/anonymouspro-italic.woff2} +0 -0
- data/assets/fonts/{anonymouspro-regular.woff → anonymouspro/anonymouspro-regular.woff} +0 -0
- data/assets/fonts/{anonymouspro-regular.woff2 → anonymouspro/anonymouspro-regular.woff2} +0 -0
- data/assets/fonts/notonaskh/bold-minimal.woff +0 -0
- data/assets/fonts/notonaskh/bold-minimal.woff2 +0 -0
- data/assets/fonts/notonaskh/bold.woff +0 -0
- data/assets/fonts/notonaskh/bold.woff2 +0 -0
- data/assets/fonts/notonaskh/regular-minimal.woff +0 -0
- data/assets/fonts/notonaskh/regular-minimal.woff2 +0 -0
- data/assets/fonts/notonaskh/regular.woff +0 -0
- data/assets/fonts/notonaskh/regular.woff2 +0 -0
- data/assets/fonts/{notosans-bold-subset.woff → notosans/notosans-bold-subset.woff} +0 -0
- data/assets/fonts/{notosans-bold-subset.woff2 → notosans/notosans-bold-subset.woff2} +0 -0
- data/assets/fonts/{notosans-bold.woff → notosans/notosans-bold.woff} +0 -0
- data/assets/fonts/{notosans-bold.woff2 → notosans/notosans-bold.woff2} +0 -0
- data/assets/fonts/{notosans-bolditalic-subset.woff → notosans/notosans-bolditalic-subset.woff} +0 -0
- data/assets/fonts/{notosans-bolditalic-subset.woff2 → notosans/notosans-bolditalic-subset.woff2} +0 -0
- data/assets/fonts/{notosans-bolditalic.woff → notosans/notosans-bolditalic.woff} +0 -0
- data/assets/fonts/{notosans-bolditalic.woff2 → notosans/notosans-bolditalic.woff2} +0 -0
- data/assets/fonts/{notosans-italic-subset.woff → notosans/notosans-italic-subset.woff} +0 -0
- data/assets/fonts/{notosans-italic-subset.woff2 → notosans/notosans-italic-subset.woff2} +0 -0
- data/assets/fonts/{notosans-italic.woff → notosans/notosans-italic.woff} +0 -0
- data/assets/fonts/{notosans-italic.woff2 → notosans/notosans-italic.woff2} +0 -0
- data/assets/fonts/{notosans-regular-subset.woff → notosans/notosans-regular-subset.woff} +0 -0
- data/assets/fonts/{notosans-regular-subset.woff2 → notosans/notosans-regular-subset.woff2} +0 -0
- data/assets/fonts/{notosans-regular.woff → notosans/notosans-regular.woff} +0 -0
- data/assets/fonts/{notosans-regular.woff2 → notosans/notosans-regular.woff2} +0 -0
- data/assets/fonts/notosansmono/notosansmono-semicondensed.woff +0 -0
- data/assets/fonts/notosansmono/notosansmono-semicondensed.woff2 +0 -0
- data/assets/fonts/notosansmono/notosansmono-semicondensedbold.woff +0 -0
- data/assets/fonts/notosansmono/notosansmono-semicondensedbold.woff2 +0 -0
- data/assets/images/icons.svg +24 -0
- data/assets/scripts/main.js +10 -3
- metadata +66 -33
- data/_data/lang.json +0 -730
- data/_data/techniques.yml +0 -180
- data/_data/wcag.yml +0 -125
- data/_includes/.DS_Store +0 -0
data/_layouts/sidenav.html
CHANGED
|
@@ -1,10 +1,31 @@
|
|
|
1
|
+
{%- assign pagelang = 'en' -%}
|
|
2
|
+
{%- if page.lang -%}
|
|
3
|
+
{%- assign pagelang = page.lang -%}
|
|
4
|
+
{%- endif -%}
|
|
5
|
+
{%- if pagelang == 'en' -%}
|
|
6
|
+
{%- assign enpage = page -%}
|
|
7
|
+
{%- else -%}
|
|
8
|
+
{%- assign enpage=site.documents | where:"ref", page.ref | where: "lang", "en" | first -%}
|
|
9
|
+
{%- unless enpage.ref -%}
|
|
10
|
+
{%- assign enpage=site.pages | where:"ref", page.ref | where: "lang", "en" | first -%}
|
|
11
|
+
{%- endunless -%}
|
|
12
|
+
{%- endif -%}
|
|
13
|
+
{%- assign englishpageurl = enpage.url %}
|
|
14
|
+
{% assign translations=site.documents | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
|
|
15
|
+
{%- unless translations[0].ref -%}
|
|
16
|
+
{% assign translations=site.pages | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
|
|
17
|
+
{%- endunless -%}
|
|
1
18
|
<!DOCTYPE html>
|
|
2
|
-
<html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
|
|
19
|
+
<html class="no-js" lang="{% if page.lang %}{{page.lang}}{% else %}en{% endif %}" dir="{% if site.lang[page.lang].rtl == true %}rtl{% else %}ltr{% endif %}" prefix="og: http://ogp.me/ns#">
|
|
3
20
|
{%- assign timestamp = site.time | date: '%s%N' -%}
|
|
4
21
|
{%- assign timestamp = '?' | append: timestamp -%}
|
|
5
|
-
{
|
|
6
|
-
|
|
7
|
-
|
|
22
|
+
{%- include_cached head.html type="start" timestamp=timestamp -%}
|
|
23
|
+
{%- if site.data.lang[pagelang].rtl -%}
|
|
24
|
+
<title> W3C | {{ site.title | escape }} | {{ page.title | escape }} {%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%}</title>
|
|
25
|
+
{%- else -%}
|
|
26
|
+
<title>{%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
|
|
27
|
+
{%- endif -%}
|
|
28
|
+
{% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: timestamp }}">{% endif %}
|
|
8
29
|
{%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
|
|
9
30
|
{%- capture seo -%}
|
|
10
31
|
{%- seo title=false -%}
|
|
@@ -15,7 +36,7 @@
|
|
|
15
36
|
{%- endunless -%}
|
|
16
37
|
{% include_cached head.html type="end" %}
|
|
17
38
|
<body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
|
|
18
|
-
{% include header.html %}
|
|
39
|
+
{% include header.html translations=translations %}
|
|
19
40
|
|
|
20
41
|
<div class="default-grid with-gap leftcol">
|
|
21
42
|
|
|
@@ -36,7 +57,7 @@
|
|
|
36
57
|
|
|
37
58
|
{% include prevnext.html %}
|
|
38
59
|
|
|
39
|
-
{% include_cached backtotop.html %}
|
|
60
|
+
{% include_cached backtotop.html lang=page.lang %}
|
|
40
61
|
</main>
|
|
41
62
|
</div>
|
|
42
63
|
|
|
@@ -1,10 +1,31 @@
|
|
|
1
|
+
{%- assign pagelang = 'en' -%}
|
|
2
|
+
{%- if page.lang -%}
|
|
3
|
+
{%- assign pagelang = page.lang -%}
|
|
4
|
+
{%- endif -%}
|
|
5
|
+
{%- if pagelang == 'en' -%}
|
|
6
|
+
{%- assign enpage = page -%}
|
|
7
|
+
{%- else -%}
|
|
8
|
+
{%- assign enpage=site.documents | where:"ref", page.ref | where: "lang", "en" | first -%}
|
|
9
|
+
{%- unless enpage.ref -%}
|
|
10
|
+
{%- assign enpage=site.pages | where:"ref", page.ref | where: "lang", "en" | first -%}
|
|
11
|
+
{%- endunless -%}
|
|
12
|
+
{%- endif -%}
|
|
13
|
+
{%- assign englishpageurl = enpage.url %}
|
|
14
|
+
{% assign translations=site.documents | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
|
|
15
|
+
{%- unless translations[0].ref -%}
|
|
16
|
+
{% assign translations=site.pages | where:"ref", page.ref | where_exp:"item", "item.lang != 'en'" | sort: 'lang' %}
|
|
17
|
+
{%- endunless -%}
|
|
1
18
|
<!DOCTYPE html>
|
|
2
|
-
<html class="no-js" lang="en" prefix="og: http://ogp.me/ns#">
|
|
19
|
+
<html class="no-js" lang="{% if page.lang %}{{page.lang}}{% else %}en{% endif %}" dir="{% if site.lang[page.lang].rtl == true %}rtl{% else %}ltr{% endif %}" prefix="og: http://ogp.me/ns#">
|
|
3
20
|
{%- assign timestamp = site.time | date: '%s%N' -%}
|
|
4
21
|
{%- assign timestamp = '?' | append: timestamp -%}
|
|
5
|
-
{
|
|
6
|
-
|
|
7
|
-
|
|
22
|
+
{%- include_cached head.html type="start" timestamp=timestamp -%}
|
|
23
|
+
{%- if site.data.lang[pagelang].rtl -%}
|
|
24
|
+
<title> W3C | {{ site.title | escape }} | {{ page.title | escape }} {%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%}</title>
|
|
25
|
+
{%- else -%}
|
|
26
|
+
<title>{%if page.doc-note-type == "archived" %}[{% include t.html t="Archived" %}]{% endif%}{%if page.doc-note-type == "draft" %}[{% include t.html t="Draft" %}]{% endif%} {{ page.title | escape }} | {{ site.title | escape }} | W3C</title>
|
|
27
|
+
{%- endif -%}
|
|
28
|
+
{% if page.ext_css %}<link rel="stylesheet" href="{{ page.ext_css | prepend: '/css/' | prepend: page.collection | prepend: '/' | relative_url | append: timestamp }}">{% endif %}
|
|
8
29
|
{%- if page.inline_css %}<style>{{ page.inline_css }}</style>{% endif -%}
|
|
9
30
|
{%- capture seo -%}
|
|
10
31
|
{%- seo title=false -%}
|
|
@@ -15,7 +36,7 @@
|
|
|
15
36
|
{%- endunless -%}
|
|
16
37
|
{% include_cached head.html type="end" %}
|
|
17
38
|
<body id="top" class="page-{{page.title | slugify}} {% include_cached body-class.html collection=page.collection doc-note-type=page.doc-note-type %}">
|
|
18
|
-
{% include header.html %}
|
|
39
|
+
{% include header.html translations=translations %}
|
|
19
40
|
|
|
20
41
|
<div class="default-grid with-gap leftcol" tabindex="-1">
|
|
21
42
|
|
|
@@ -32,7 +53,7 @@
|
|
|
32
53
|
|
|
33
54
|
{% include prevnext.html %}
|
|
34
55
|
|
|
35
|
-
{% include_cached backtotop.html %}
|
|
56
|
+
{% include_cached backtotop.html lang=page.lang %}
|
|
36
57
|
</main>
|
|
37
58
|
</div>
|
|
38
59
|
|
|
File without changes
|
|
@@ -40,7 +40,9 @@ module.exports = function(grunt) {
|
|
|
40
40
|
'scripts/sign.js',
|
|
41
41
|
'scripts/langs.js',
|
|
42
42
|
'scripts/translation.js',
|
|
43
|
-
'scripts/
|
|
43
|
+
'scripts/ttml2webvtt.js',
|
|
44
|
+
'scripts/JQuery.doWhen.js',
|
|
45
|
+
'scripts/vts.js'
|
|
44
46
|
],
|
|
45
47
|
dest: 'build/<%= pkg.name %>.js'
|
|
46
48
|
},
|
data/assets/ableplayer/LICENSE
CHANGED
|
File without changes
|
data/assets/ableplayer/README.md
CHANGED
|
@@ -12,29 +12,48 @@ Features
|
|
|
12
12
|
|
|
13
13
|
- Supports both audio and video.
|
|
14
14
|
- Supports either a single audio track or an entire playlist.
|
|
15
|
-
- A full set of player controls that are keyboard-accessible, properly labeled for screen reader users, and controllable by speech recognition users.
|
|
16
|
-
- Customizable keyboard shortcuts that enable the player to be operated from anywhere on the web page (unless there are multiple instances of the player on a given page; then the player must have focus for keyboard shortcuts to work).
|
|
17
|
-
- High contrast, scalable controls that remain visible in Windows High Contrast mode, plus an easy-to-see focus indicator so keyboard users can easily tell which control currently has focus.
|
|
18
|
-
- Support for closed captions and subtitles in Web Video Timed Text (WebVTT) format, the standard format recommended by the HTML5 specification.
|
|
19
|
-
- Support for chapters, also using WebVTT. Chapters are specific landing points in the video, allowing video content to have structure and be more easily navigated.
|
|
20
|
-
- Support for text-based audio description, also using WebVTT. At designated times, the description text is read aloud by screen readers. Users can optionally set their player to pause when audio description starts in order to avoid conflicts between the description and program audio.
|
|
21
|
-
- Support for audio description as a separate video. When two videos are available (one with description and one without), both can be delivered together using the same player and users can toggle between the versions.
|
|
22
|
-
- 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
|
-
- 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
|
-
- 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.
|
|
26
|
-
- 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).
|
|
15
|
+
- A full set of player controls that are keyboard-accessible, properly labeled for screen reader users, and controllable by speech recognition users.
|
|
16
|
+
- Customizable keyboard shortcuts that enable the player to be operated from anywhere on the web page (unless there are multiple instances of the player on a given page; then the player must have focus for keyboard shortcuts to work).
|
|
17
|
+
- High contrast, scalable controls that remain visible in Windows High Contrast mode, plus an easy-to-see focus indicator so keyboard users can easily tell which control currently has focus.
|
|
18
|
+
- Support for closed captions and subtitles in Web Video Timed Text (WebVTT) format, the standard format recommended by the HTML5 specification.
|
|
19
|
+
- Support for chapters, also using WebVTT. Chapters are specific landing points in the video, allowing video content to have structure and be more easily navigated.
|
|
20
|
+
- Support for text-based audio description, also using WebVTT. At designated times, the description text is read aloud by screen readers. Users can optionally set their player to pause when audio description starts in order to avoid conflicts between the description and program audio.
|
|
21
|
+
- Support for audio description as a separate video. When two videos are available (one with description and one without), both can be delivered together using the same player and users can toggle between the versions.
|
|
22
|
+
- 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
|
+
- 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
|
+
- 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.
|
|
26
|
+
- 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
27
|
- Optional seamless integrated support for JW Player as a fallback player for users whose browsers don't support HTML5 media. The fallback player uses the same custom interface and provides a nearly identical experience.
|
|
28
|
-
- 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
|
-
|
|
28
|
+
- 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
|
+
|
|
30
|
+
Supported Languages
|
|
31
|
+
-------------------
|
|
32
|
+
|
|
33
|
+
Able Player has been translated into the following languages. To add another language, see instructions below under **Contributing**.
|
|
34
|
+
|
|
35
|
+
<ul>
|
|
36
|
+
<li><strong lang="ca">Català</strong> (Catalan)</li>
|
|
37
|
+
<li><strong lang="zh-tw">Chinese, Traditional (Taiwan)</strong></li>
|
|
38
|
+
<li><strong lang="de">Deutsch</strong> (German)</li>
|
|
39
|
+
<li><strong>English</strong></li>
|
|
40
|
+
<li><strong lang="en">Español</strong> (Spanish)</li>
|
|
41
|
+
<li><strong lang="fr">Français</strong> (French)</li>
|
|
42
|
+
<li><strong lang="he">עִברִית</strong> (Hebrew)</li>
|
|
43
|
+
<li><strong lang="it">Italiano</strong> (Italian)</li>
|
|
44
|
+
<li><strong lang="ja">日本語</strong> (Japanese)</li>
|
|
45
|
+
<li><strong lang="nb">Norsk Bokmål</strong> (Norwegian)</li>
|
|
46
|
+
<li><strong lang="nl">Nederlands, Vlaams</strong> (Dutch)</li>
|
|
47
|
+
</ul>
|
|
48
|
+
|
|
30
49
|
Contributing
|
|
31
50
|
-------------
|
|
32
51
|
|
|
33
|
-
There are many ways to contribute to Able Player, and we welcome and appreciate your help! Here are some options:
|
|
52
|
+
There are many ways to contribute to Able Player, and we welcome and appreciate your help! Here are some options:
|
|
34
53
|
|
|
35
|
-
- If you spot bugs are have feature requests, please submit them to the [Issues][issues] queue.
|
|
54
|
+
- If you spot bugs are have feature requests, please submit them to the [Issues][issues] queue.
|
|
36
55
|
- If you have code to contribute, please note that all development occurs on the [develop branch][develop]. This is often many commits ahead of the master branch, so please do all development from *develop*, and submit pull requests there. We particularly appreciate help with any issues in the Issues queue that have been flagged with "help wanted".
|
|
37
|
-
- If you are multilingual, please consider translating Able Player into another language! All labels, prompts, messages, and help text for each language are contained within a single file, contained within the */translations* directory.
|
|
56
|
+
- If you are multilingual, please consider translating Able Player into another language! All labels, prompts, messages, and help text for each language are contained within a single file, contained within the */translations* directory.
|
|
38
57
|
|
|
39
58
|
Compatibility
|
|
40
59
|
-------------
|
|
@@ -43,15 +62,15 @@ Compatibility
|
|
|
43
62
|
technologies.
|
|
44
63
|
|
|
45
64
|
- Firefox 3.x and higher
|
|
46
|
-
- Internet Explorer 10 and higher without fallback
|
|
47
|
-
- Internet Explorer 8 and 9, dependent on JW Player as fallback.
|
|
65
|
+
- Internet Explorer 10 and higher without fallback
|
|
66
|
+
- Internet Explorer 8 and 9, dependent on JW Player as fallback.
|
|
48
67
|
- Google Chrome 7.0 and higher
|
|
49
68
|
- Opera 10.63 and higher
|
|
50
69
|
- Safari 5.0 on Mac OS X
|
|
51
70
|
- Safari on IOS 3.2.2 and higher (audio only, video plays in default IOS player)
|
|
52
71
|
- Chrome on Android 4.2 and higher
|
|
53
72
|
|
|
54
|
-
Note that mobile browsers have limitations (e.g., volume control and autostart are not supported)
|
|
73
|
+
Note that mobile browsers have limitations (e.g., volume control and autostart are not supported)
|
|
55
74
|
|
|
56
75
|
Dependencies
|
|
57
76
|
------------
|
|
@@ -61,31 +80,34 @@ Dependencies
|
|
|
61
80
|
exception is the fallback player—see the *Fallback* section below for
|
|
62
81
|
details.
|
|
63
82
|
|
|
64
|
-
- *Able Player* uses [jQuery][].
|
|
65
|
-
below uses Google’s hosted libraries; no download required.
|
|
83
|
+
- *Able Player* uses [jQuery][]. Version 3.2.1 or higher is recommended.
|
|
84
|
+
The example code below uses Google’s hosted libraries; no download required.
|
|
66
85
|
- *Able Player* uses [Modernizr][] to enable styling of HTML5 elements
|
|
67
86
|
in Internet Explorer 6 through 8. A Modernizr 2.6.2 Custom Build is
|
|
68
87
|
distributed with *Able Player*, and is all that *Able Player* needs.
|
|
69
88
|
- *Able Player* uses [js-cookie][] to store and retrieve user
|
|
70
89
|
preferences in cookies. This script is distributed with *Able
|
|
71
90
|
Player*. Prior to version 2.3, Able Player used [jquery.cookie][]
|
|
72
|
-
for this same purpose.
|
|
91
|
+
for this same purpose.
|
|
73
92
|
|
|
74
93
|
Fallback
|
|
75
94
|
--------
|
|
76
95
|
|
|
77
96
|
For older browsers that don’t support HTML5 media elements, you need a
|
|
78
97
|
fallback solution. *Able Player* was developed to work seamlessly with
|
|
79
|
-
[JW Player][], specifically **JW Player 6** (successfully tested with
|
|
80
|
-
versions 6.0 and 6.11). JW Player is free for non-commercial use but
|
|
81
|
-
is licensed separately and is not distributed with *Able Player*.
|
|
82
|
-
After licensing and downloading JW PLayer, copy *jwplayer.js*, *jwplayer.html5.js*,
|
|
98
|
+
[JW Player][], specifically **JW Player 6** (successfully tested with
|
|
99
|
+
versions 6.0 and 6.11). JW Player is free for non-commercial use but
|
|
100
|
+
is licensed separately and is not distributed with *Able Player*.
|
|
101
|
+
After licensing and downloading JW PLayer, copy *jwplayer.js*, *jwplayer.html5.js*,
|
|
83
102
|
and *jwplayer.flash.swf* into the
|
|
84
103
|
*Able Player* */thirdparty* directory.
|
|
85
104
|
|
|
86
|
-
If you choose to use JW Player as your fallback player,
|
|
87
|
-
users with some older browsers will have a similar experience with
|
|
88
|
-
*Able Player* as users with newer browsers.
|
|
105
|
+
If you choose to use JW Player as your fallback player,
|
|
106
|
+
users with some older browsers will have a similar experience with
|
|
107
|
+
*Able Player* as users with newer browsers.
|
|
108
|
+
|
|
109
|
+
If using a licensed copy of JWPlayer, the JWPlayer key can be passed with
|
|
110
|
+
the **data-fallback-jwkey** attribute.
|
|
89
111
|
|
|
90
112
|
Note that *most* browsers in use today support HTML5 media elements.
|
|
91
113
|
Here’s a breakdown:
|
|
@@ -95,16 +117,15 @@ Here’s a breakdown:
|
|
|
95
117
|
- Opera since 10.5
|
|
96
118
|
- Internet Explorer since 9.0 (video was buggy in 9; better in 10)
|
|
97
119
|
|
|
98
|
-
Note the following limitations in Internet Explorer (IE):
|
|
99
|
-
- IE10 and higher work fine without a fallback player
|
|
120
|
+
Note the following limitations in Internet Explorer (IE):
|
|
121
|
+
- IE10 and higher work fine without a fallback player
|
|
100
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
|
|
101
|
-
- IE8 works fine with JW Player as fallback
|
|
102
|
-
- IE6 and 7 are not supported
|
|
123
|
+
- IE8 works fine with JW Player as fallback
|
|
124
|
+
- IE6 and 7 are not supported
|
|
103
125
|
|
|
104
|
-
At some point we may decide that it’s reasonable to stop supporting a
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
working fallback.
|
|
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.
|
|
108
129
|
|
|
109
130
|
As an alternative fallback, you could link to the media file so users
|
|
110
131
|
can download it and play it on their player of choice, and/or provide a
|
|
@@ -129,12 +150,12 @@ to all use cases, both audio and video.
|
|
|
129
150
|
```HTML
|
|
130
151
|
<!-- Dependencies -->
|
|
131
152
|
<script src="thirdparty/modernizr.custom.js"></script>
|
|
132
|
-
<script src="//ajax.googleapis.com/ajax/libs/jquery/
|
|
153
|
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
|
133
154
|
<script src="thirdparty/js.cookie.js"></script>
|
|
134
|
-
|
|
135
|
-
<!-- CSS -->
|
|
155
|
+
|
|
156
|
+
<!-- CSS -->
|
|
136
157
|
<link rel="stylesheet" href="build/ableplayer.min.css" type="text/css"/>
|
|
137
|
-
|
|
158
|
+
|
|
138
159
|
<!-- JavaScript -->
|
|
139
160
|
<script src="build/ableplayer.min.js"></script>
|
|
140
161
|
```
|
|
@@ -176,19 +197,21 @@ MP4.
|
|
|
176
197
|
```
|
|
177
198
|
|
|
178
199
|
|
|
179
|
-
### Supported Attributes
|
|
200
|
+
### Supported Attributes
|
|
180
201
|
|
|
181
202
|
The following attributes are supported on both the `<audio>` and `<video>` elements:
|
|
182
203
|
|
|
183
|
-
#### Required Attributes
|
|
204
|
+
#### Required Attributes
|
|
184
205
|
|
|
185
206
|
- **id** - required; any unique ID
|
|
186
207
|
- **data-able-player** - required
|
|
187
208
|
|
|
188
209
|
#### Optional; General-Purpose
|
|
189
|
-
|
|
190
|
-
- **data-debug** - optional; if present will write messages to the developer console
|
|
191
|
-
- **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.
|
|
210
|
+
|
|
211
|
+
- **data-debug** - optional; if present will write messages to the developer console
|
|
212
|
+
- **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
|
+
- **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.
|
|
192
215
|
- **preload** - optional; tells the browser how much media to download
|
|
193
216
|
when the page loads. If the media is the central focus of the web
|
|
194
217
|
page, use **preload="auto"**, which instructs the browser to
|
|
@@ -196,104 +219,108 @@ The following attributes are supported on both the `<audio>` and `<video>` eleme
|
|
|
196
219
|
central focus, downloading the entire media resource can consume
|
|
197
220
|
valuable bandwidth, so preload="metadata" would be a better option.
|
|
198
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 default to 480.
|
|
199
|
-
- **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
|
|
200
|
-
- **data-
|
|
201
|
-
- **data-
|
|
222
|
+
- **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
|
+
- **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
|
+
- **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.
|
|
225
|
+
- **data-icon-type** - optional; "svg", "font" or "image"; "svg" is the default with automatic fallback to "font" unless either (a) the browser doesn't support icon fonts or (b) the user has a custom style sheet that may impact the display of icon fonts; in either case falls back to images. Should generally leave as is unless testing the fallback.
|
|
226
|
+
- **data-speed-icons** - optional; "animals" (default) or "arrows". The default setting uses a turtle icon for *slower* and a rabbit icon for *faster*. Setting this to "arrows" uses the original Able Player icons (prior to version 3.5), arrows pointing up for *faster* and down for *slower*.
|
|
202
227
|
- **data-start-time** - optional; time at which you want the audio to start playing (in seconds)
|
|
203
228
|
- **data-volume** - optional; set the default volume (0 to 10; default is 7 to avoid overpowering screen reader audio)
|
|
204
|
-
- **data-seek-interval** - optional; interval (in seconds) of forward and rewind buttons. By default, seek interval is intelligently calculated based on duration of the media.
|
|
205
|
-
- **data-show-now-playing** - optional; "true" or "false" to include "Selected track" section within player; only applies when a playlist is present
|
|
229
|
+
- **data-seek-interval** - optional; interval (in seconds) of forward and rewind buttons. By default, seek interval is intelligently calculated based on duration of the media.
|
|
230
|
+
- **data-show-now-playing** - optional; "true" or "false" to include "Selected track" section within player; only applies when a playlist is present
|
|
206
231
|
|
|
207
|
-
#### Language
|
|
232
|
+
#### Language
|
|
208
233
|
|
|
209
234
|
- **data-lang** - optional; specify language of the player using 2-character language code (default is "en" for English)
|
|
210
|
-
- **data-force-lang** - optional; include this option to force the player to use the value of *data-lang* as the player language. Otherwise, the player language will be set as follows, in order of precedence: 1) the language of the web page or user's web browser if either is known and if there is a matching translation file; 2) the value of *data-lang* if provided; 3) English.
|
|
235
|
+
- **data-force-lang** - optional; include this option to force the player to use the value of *data-lang* as the player language. Otherwise, the player language will be set as follows, in order of precedence: 1) the language of the web page or user's web browser if either is known and if there is a matching translation file; 2) the value of *data-lang* if provided; 3) English.
|
|
211
236
|
|
|
212
|
-
#### Captions
|
|
237
|
+
#### Captions
|
|
213
238
|
|
|
214
239
|
- **data-captions-position** - optional; specify default position of captions relative to the video (either "below" or "overlay"; "below" is the default if not specified). Users can override this setting in Captions Preferences.
|
|
215
240
|
|
|
216
241
|
#### Transcript
|
|
217
242
|
|
|
218
|
-
Able Player can automatically generate an accessible interactive transcript from the chapters, captions, and descriptions tracks. There are three types of interactive transcripts supported:
|
|
243
|
+
Able Player can automatically generate an accessible interactive transcript from the chapters, captions, and descriptions tracks. There are three types of interactive transcripts supported:
|
|
219
244
|
- "external" - Automatically generated, written to an external div (requires **data-transcript-div**)
|
|
220
245
|
- "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button on the controller
|
|
221
|
-
- "manual" - A manually coded external transcript (requires **data-transcript-src**)
|
|
222
|
-
|
|
223
|
-
The following attributes control which of the above types, if any, are generated:
|
|
224
|
-
- **data-transcript-div** - optional; id of an external div in which to display an interactive transcript.
|
|
225
|
-
- **data-transcript-src** - optional; id of an external div that contains a pre-existing manually coded transcript. Able Player will parse this transcript and interact with it during playback.
|
|
226
|
-
- **data-include-transcript** - optional; set to "false" to exclude transcript button from controller.
|
|
246
|
+
- "manual" - A manually coded external transcript (requires **data-transcript-src**)
|
|
247
|
+
|
|
248
|
+
The following attributes control which of the above types, if any, are generated:
|
|
249
|
+
- **data-transcript-div** - optional; id of an external div in which to display an interactive transcript.
|
|
250
|
+
- **data-transcript-src** - optional; id of an external div that contains a pre-existing manually coded transcript. Able Player will parse this transcript and interact with it during playback.
|
|
251
|
+
- **data-include-transcript** - optional; set to "false" to exclude transcript button from controller.
|
|
227
252
|
|
|
228
|
-
If none of the above attributes are present, the transcript will be displayed in a draggable, resizable popup that can be toggled on/off using a button on the controller. Note that a toggle button is added to the controller *only* if the transcript is a "popup" type; there is no toggle button for either the "external" or "manual" transcript types.
|
|
253
|
+
If none of the above attributes are present, the transcript will be displayed in a draggable, resizable popup that can be toggled on/off using a button on the controller. Note that a toggle button is added to the controller *only* if the transcript is a "popup" type; there is no toggle button for either the "external" or "manual" transcript types.
|
|
229
254
|
|
|
230
|
-
Additional transcript-related attributes include:
|
|
231
|
-
- **data-transcript-title** - optional; override default transcript title (default is "Transcript", or "Lyrics" if the data-lyrics-mode attribute is present)
|
|
232
|
-
- **data-lyrics-mode** - optional; forces a line break between and within captions in the transcript
|
|
255
|
+
Additional transcript-related attributes include:
|
|
256
|
+
- **data-transcript-title** - optional; override default transcript title (default is "Transcript", or "Lyrics" if the data-lyrics-mode attribute is present)
|
|
257
|
+
- **data-lyrics-mode** - optional; forces a line break between and within captions in the transcript
|
|
233
258
|
|
|
234
|
-
To manually code the transcript, one simple strategy is to first allow Able Player to *automatically* generate a transcript. Then copy and paste its content as a starting point. To manually code a transcript from scratch, use the following markup (see [Video Demo #7] for an example):
|
|
259
|
+
To manually code the transcript, one simple strategy is to first allow Able Player to *automatically* generate a transcript. Then copy and paste its content as a starting point. To manually code a transcript from scratch, use the following markup (see [Video Demo #7] for an example):
|
|
235
260
|
|
|
236
|
-
- Wrap the entire transcript in a container with class="able-transcript", and wrap that in another container with class="able-transcript-area".
|
|
261
|
+
- Wrap the entire transcript in a container with class="able-transcript", and wrap that in another container with class="able-transcript-area".
|
|
237
262
|
- Add an empty <div> just inside the outer container with class="able-window-toolbar".
|
|
238
263
|
- Wrap all audio description in a <div> element with class="able-transcript-desc".
|
|
239
264
|
- Add a <span> element to the start of each audio description block, with class="able-hidden" and text "Description:". This helps screen reader users to distinguish between caption and description text.
|
|
240
265
|
- Wrap each block of caption text in a <div> element with class="able-transcript-block".
|
|
241
|
-
- Wrap each clickable segment of content in a <span> element, with class="able-transcript-seekpoint", plus **data-start** and **data-end** attributes. The values of these two data attributes are the video start and end times expressed in seconds (decimals points are allowed).
|
|
242
|
-
- If the clickable span is caption text, also add the "able-transcript-caption" class.
|
|
243
|
-
- Wrap unspoken content such as names of speakers or descriptions of sound in a <span> element with class="able-unspoken".
|
|
266
|
+
- Wrap each clickable segment of content in a <span> element, with class="able-transcript-seekpoint", plus **data-start** and **data-end** attributes. The values of these two data attributes are the video start and end times expressed in seconds (decimals points are allowed).
|
|
267
|
+
- If the clickable span is caption text, also add the "able-transcript-caption" class.
|
|
268
|
+
- Wrap unspoken content such as names of speakers or descriptions of sound in a <span> element with class="able-unspoken".
|
|
244
269
|
- Use any other markup desired to add structure and style to your transcript. Able Player will ignore it.
|
|
245
270
|
|
|
246
271
|
#### Chapters
|
|
247
272
|
|
|
248
|
-
- **data-chapters-div** - optional; id of an external div in which to display a list of chapters.
|
|
273
|
+
- **data-chapters-div** - optional; id of an external div in which to display a list of chapters.
|
|
249
274
|
The list of chapters is generated automatically if a chapters track is available in a WebVTT file.
|
|
250
|
-
If this attribute is not provided and chapter are available, chapters will be displayed in a popup menu triggered by the Chapters button.
|
|
251
|
-
- **data-use-chapters-button** - optional; set to "false" to exclude chapters button from controller. If using the data-chapters-div attribute to write the chapters to an external container, you might not want users to be able to toggle the chapters off.
|
|
252
|
-
- **data-chapters-title** - optional; override default chapters title (default is "Chapters"). A null value (data-chapters-title="") eliminates the title altogether.
|
|
275
|
+
If this attribute is not provided and chapter are available, chapters will be displayed in a popup menu triggered by the Chapters button.
|
|
276
|
+
- **data-use-chapters-button** - optional; set to "false" to exclude chapters button from controller. If using the data-chapters-div attribute to write the chapters to an external container, you might not want users to be able to toggle the chapters off.
|
|
277
|
+
- **data-chapters-title** - optional; override default chapters title (default is "Chapters"). A null value (data-chapters-title="") eliminates the title altogether.
|
|
253
278
|
- **data-chapters-default** - optional; identify ID of default chapter (must correspond with the text or value immediately above the timestamp in your chapter's WebVTT file). If this attribute is present, the media will be advanced to this start time. Otherwise it will start at the beginning. (See also **data-start-time**).
|
|
254
|
-
- **data-seekbar-scope** - optional; default is "video" (seekbar represents full duration of video); if set to "chapter" seekbar represents the duration of the current chapter only
|
|
279
|
+
- **data-seekbar-scope** - optional; default is "video" (seekbar represents full duration of video); if set to "chapter" seekbar represents the duration of the current chapter only
|
|
255
280
|
|
|
256
281
|
#### Metadata
|
|
257
282
|
|
|
258
283
|
Metadata is added using the `<track>` element with kind="metadata".
|
|
259
|
-
It must be in Web Video Text Tracks format ([WebVTT][]).
|
|
260
|
-
Able Player supports two types of metadata:
|
|
284
|
+
It must be in Web Video Text Tracks format ([WebVTT][]).
|
|
285
|
+
Able Player supports two types of metadata:
|
|
261
286
|
|
|
262
|
-
1. "text" - The WebVTT file contains text, intended to be written to an external container at the designated times. You must provide the external container; Able Player does not generate that automatically.
|
|
287
|
+
1. "text" - The WebVTT file contains text, intended to be written to an external container at the designated times. You must provide the external container; Able Player does not generate that automatically.
|
|
263
288
|
|
|
264
|
-
2. "selector" - The WebVTT file contains jQuery selectors which target hidden content that is already present on the web page. At the designated times, the hidden content referenced by the jQuery selectors is made visible. In addition to selectors, the WebVTT file can contain either of the following keywords, each on a line by itself:
|
|
289
|
+
2. "selector" - The WebVTT file contains jQuery selectors which target hidden content that is already present on the web page. At the designated times, the hidden content referenced by the jQuery selectors is made visible. In addition to selectors, the WebVTT file can contain either of the following keywords, each on a line by itself:
|
|
265
290
|
|
|
266
|
-
- **PAUSE** instructs Able Player to pause the video at that point.
|
|
291
|
+
- **PAUSE** instructs Able Player to pause the video at that point.
|
|
267
292
|
- **FOCUS:** followed by a jQuery selector, places keyboard focus on the designated element, which should have a *tabindex* attribute with a value of either "0" (element is part of the regular tab order) or "-1" (element is not part of the regular tab order, but can receive focus in this context via JavasScript).
|
|
268
293
|
|
|
269
|
-
This combination of exposing new content, pausing the video, and placing keyboard focus on a newly exposed element, can be used to provide supplemental content including clickable "hot spots" overlaid on the video.
|
|
294
|
+
This combination of exposing new content, pausing the video, and placing keyboard focus on a newly exposed element, can be used to provide supplemental content including clickable "hot spots" overlaid on the video.
|
|
270
295
|
|
|
271
|
-
The following attributes make all this possible:
|
|
296
|
+
The following attributes make all this possible:
|
|
272
297
|
|
|
273
298
|
- **data-meta-type** - required for metadata; indicates the type of metadata contained within a metadata track. Supported values as described above are "text" and "selector".
|
|
274
|
-
- **data-meta-div** - required for "text" metadata; id of an external div in which to display the text.
|
|
275
|
-
- **data-duration** - optional attribute on the element displayed via a metadata track; value is the number of milliseconds to display the element before it fades out. Elements displayed via metadata tracks automatically fade out at the end time designated within the WebVTT file. However, if the **data-duration** attribute is present, this enables an element to fade out *before* the designated time. This is useful if multiple elements appear simultaneously, but some need to fade out earlier than others.
|
|
299
|
+
- **data-meta-div** - required for "text" metadata; id of an external div in which to display the text.
|
|
300
|
+
- **data-duration** - optional attribute on the element displayed via a metadata track; value is the number of milliseconds to display the element before it fades out. Elements displayed via metadata tracks automatically fade out at the end time designated within the WebVTT file. However, if the **data-duration** attribute is present, this enables an element to fade out *before* the designated time. This is useful if multiple elements appear simultaneously, but some need to fade out earlier than others.
|
|
276
301
|
|
|
277
|
-
**NOTE:** If you're using metadata to expose content in sync with videos hosted on YouTube, please review [YouTube's Terms of Service] related to Overlays and Frames. As of August 11, 2016: "You must not display overlays, frames, or other visual elements in front of any part of a YouTube embedded player, including player controls. Similarly, you must not use overlays, frames or other visual elements to obscure any part of an embedded player, including player controls."
|
|
278
|
-
|
|
279
|
-
#### Search
|
|
302
|
+
**NOTE:** If you're using metadata to expose content in sync with videos hosted on YouTube, please review [YouTube's Terms of Service] related to Overlays and Frames. As of August 11, 2016: "You must not display overlays, frames, or other visual elements in front of any part of a YouTube embedded player, including player controls. Similarly, you must not use overlays, frames or other visual elements to obscure any part of an embedded player, including player controls."
|
|
280
303
|
|
|
281
|
-
|
|
282
|
-
- **data-search-div** - optional; id of external container in which to display search results
|
|
304
|
+
#### Search
|
|
283
305
|
|
|
306
|
+
- **data-search** - optional; search terms to search for within the caption tracks, separated by a space
|
|
307
|
+
- **data-search-lang** - optional; specify 2-character language code of caption or subtitle track to search. If unspecified, searches the default language, which is the language of the web page if specified using the *lang* attribute on either the `<html>` or `<body>` tag.
|
|
308
|
+
- **data-search-div** - optional; id of external container in which to display search results
|
|
284
309
|
|
|
285
310
|
#### Fallback Player
|
|
286
311
|
|
|
287
312
|
- **data-fallback** - optional; specify a fallback player. Currently the only supported option is "jw" (JW Player)
|
|
288
|
-
- **data-test-fallback** - optional; force browser to user fallback player (recommended for testing only)
|
|
289
|
-
- **data-fallback-path** - optional; override default path to directory in which the fallback player files are stored
|
|
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
|
|
290
316
|
|
|
291
317
|
|
|
292
318
|
The following attributes are supported on the `<video>` element only:
|
|
293
319
|
|
|
294
320
|
- **data-allow-fullscreen** - optional; if set to "false" the player will not include a fullscreen button
|
|
295
321
|
- **data-youtube-id** - optional; 11-character YouTube ID, to play the YouTube video using *Able Player*.
|
|
296
|
-
- **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.
|
|
322
|
+
- **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
|
+
- **data-youtube-nocookie** - optional; if set to "true" the YouTube video will be embedded using the "youtube-nocookie.com" host.
|
|
297
324
|
- **height** - height of the video in pixels. If not provided will
|
|
298
325
|
default to 360.
|
|
299
326
|
- **poster** - path to an image file. Will be displayed in the player
|
|
@@ -310,11 +337,11 @@ MP4. Browsers will play the first media source that they support.
|
|
|
310
337
|
#### Closed Captions
|
|
311
338
|
|
|
312
339
|
Captions are added using the `<track>` element with kind="captions".
|
|
313
|
-
Captions must be in Web Video Text Tracks format ([WebVTT][]).
|
|
314
|
-
WebVTT tags within captions are currently ignored.
|
|
340
|
+
Captions must be in Web Video Text Tracks format ([WebVTT][]).
|
|
341
|
+
WebVTT tags within captions are currently ignored.
|
|
315
342
|
|
|
316
|
-
**NOTE:** Able Player only supports valid WebVTT files. Be sure to
|
|
317
|
-
validate your WebVTT using a [WebVTT Validator][].
|
|
343
|
+
**NOTE:** Able Player only supports valid WebVTT files. Be sure to
|
|
344
|
+
validate your WebVTT using a [WebVTT Validator][].
|
|
318
345
|
|
|
319
346
|
If captions are provided, a CC button will be added to the
|
|
320
347
|
*Able Player* controller.
|
|
@@ -353,19 +380,19 @@ alternate video with description mixed in, that’s what they’ll get. See
|
|
|
353
380
|
the section below on *User Preferences* for additional information about
|
|
354
381
|
preferences.
|
|
355
382
|
|
|
356
|
-
In some applications, text-based descriptions might be a required
|
|
357
|
-
part of the interface (e.g., if video pauses so users can interact with
|
|
358
|
-
HTML overlays; text-based description could be used in this context to provide
|
|
359
|
-
additional instructions for screen reader users). In such cases the Descriptions
|
|
360
|
-
button can be eliminated from the controller with **data-use-descriptions-button="false"**.
|
|
383
|
+
In some applications, text-based descriptions might be a required
|
|
384
|
+
part of the interface (e.g., if video pauses so users can interact with
|
|
385
|
+
HTML overlays; text-based description could be used in this context to provide
|
|
386
|
+
additional instructions for screen reader users). In such cases the Descriptions
|
|
387
|
+
button can be eliminated from the controller with **data-use-descriptions-button="false"**.
|
|
361
388
|
|
|
362
389
|
#### Sign language
|
|
363
390
|
|
|
364
|
-
Sign language translation is supported in a separate video player,
|
|
365
|
-
synchronized with the main player. Tips for filming a sign language
|
|
366
|
-
interpreter are available from [Signing Books for the Deaf][]:
|
|
391
|
+
Sign language translation is supported in a separate video player,
|
|
392
|
+
synchronized with the main player. Tips for filming a sign language
|
|
393
|
+
interpreter are available from [Signing Books for the Deaf][]:
|
|
367
394
|
|
|
368
|
-
* [Filming the Signer][]
|
|
395
|
+
* [Filming the Signer][]
|
|
369
396
|
* [Editing the Signer][]
|
|
370
397
|
|
|
371
398
|
If multiple video sources are already provided (e.g., an MP4 and
|
|
@@ -373,14 +400,14 @@ WebM file), then the sign language video must be available in both of
|
|
|
373
400
|
these formats. For each video source that has a sign language version
|
|
374
401
|
available, add a **data-sign-src** attribute to the `<source>` element for
|
|
375
402
|
that video. The value of this attribute is a path pointing to the
|
|
376
|
-
sign language version of the video. If a sign language version is available,
|
|
377
|
-
a sign language button will be added to the media controller.
|
|
378
|
-
This button will toggle the display of a secondary window in which
|
|
379
|
-
the sign language video will appear.
|
|
403
|
+
sign language version of the video. If a sign language version is available,
|
|
404
|
+
a sign language button will be added to the media controller.
|
|
405
|
+
This button will toggle the display of a secondary window in which
|
|
406
|
+
the sign language video will appear.
|
|
380
407
|
|
|
381
|
-
This is an experimental feature and a work in progress. Ultimately
|
|
382
|
-
the intent is for the user to have full control of the size and position
|
|
383
|
-
of the sign language video.
|
|
408
|
+
This is an experimental feature and a work in progress. Ultimately
|
|
409
|
+
the intent is for the user to have full control of the size and position
|
|
410
|
+
of the sign language video.
|
|
384
411
|
|
|
385
412
|
Setup Step 4: Review User-Defined Variables in *ableplayer.js*
|
|
386
413
|
--------------------------------------------------------------
|
|
@@ -391,9 +418,9 @@ volume, color of controller buttons, seek interval for rewind and
|
|
|
391
418
|
forward buttons, and others. Explanations of each variable are provided
|
|
392
419
|
in the comments.
|
|
393
420
|
|
|
394
|
-
If you make changes to this or any other JavaScript script files,
|
|
395
|
-
the player will need to be recompiled before your changes will take effect.
|
|
396
|
-
To do so, run the shell script *compile.sh*.
|
|
421
|
+
If you make changes to this or any other JavaScript script files,
|
|
422
|
+
the player will need to be recompiled before your changes will take effect.
|
|
423
|
+
To do so, run the shell script *compile.sh*.
|
|
397
424
|
|
|
398
425
|
Playlists
|
|
399
426
|
---------
|
|
@@ -443,11 +470,11 @@ should match the first item in the playlist.
|
|
|
443
470
|
Interactive Transcript
|
|
444
471
|
----------------------
|
|
445
472
|
|
|
446
|
-
*Able Player* interactive transcripts are generated automatically from
|
|
447
|
-
WebVTT
|
|
448
|
-
button will be added to the *Able Player* controller.
|
|
473
|
+
*Able Player* interactive transcripts are generated automatically from
|
|
474
|
+
WebVTT chapters, descriptions, and captions/subtitles files.
|
|
475
|
+
If a transcript is available, a Transcript button will be added to the *Able Player* controller.
|
|
449
476
|
|
|
450
|
-
Features of the interactive transcript include the following:
|
|
477
|
+
Features of the interactive transcript include the following:
|
|
451
478
|
|
|
452
479
|
- Clicking anywhere in the transcript starts playing the media at that
|
|
453
480
|
point.
|
|
@@ -459,52 +486,70 @@ Features of the interactive transcript include the following:
|
|
|
459
486
|
in the Preferences dialog.
|
|
460
487
|
- Text in the transcript is highlighted as the media plays. This can
|
|
461
488
|
be toggled on/off in the Preferences dialog.
|
|
462
|
-
- If subtitles are available, the transcript can be displayed in any supported language.
|
|
463
|
-
Available languages can be selected from a dropdown select field.
|
|
489
|
+
- If subtitles are available, the transcript can be displayed in any supported language.
|
|
490
|
+
Available languages can be selected from a dropdown select field.
|
|
491
|
+
|
|
492
|
+
If the transcript is assembled from multiple sources, any timing imperfections between sources
|
|
493
|
+
come sometimes lead to problems in the read order within the transcript. For example,
|
|
494
|
+
a new chapter should start *before* any captions or descriptions within that chapter.
|
|
495
|
+
If the chapter starts a millisecond later than its first caption, the chapter name will appear
|
|
496
|
+
in the transcript as a heading *after* its first caption. To help authors/developers attain
|
|
497
|
+
perfect synchronization between all timed text files, Able Player (in version 3.1.6) introduced
|
|
498
|
+
a Video Transcript Sorter (VTS). The VTS displays all timed text content from all sources
|
|
499
|
+
in a table, and provides several features that enable users to rearrange content and
|
|
500
|
+
modify start and end times. Users can also insert new content into the table, which can be useful
|
|
501
|
+
for authoring low frequency content such as chapters and description. Too use VTS,
|
|
502
|
+
add the following HTML to the desired location within any web page that includes an
|
|
503
|
+
Able Player instance:
|
|
504
|
+
|
|
505
|
+
```HTML
|
|
506
|
+
<div id="able-vts"></div>
|
|
507
|
+
```
|
|
508
|
+
|
|
464
509
|
|
|
465
510
|
YouTube Support
|
|
466
511
|
---------------
|
|
467
512
|
|
|
468
|
-
To play a YouTube video in *Able Player*, simply include a **data-youtube-id** attribute
|
|
469
|
-
on the `<video>` element. The value of this attribute must be the video's 11-character YouTube ID.
|
|
513
|
+
To play a YouTube video in *Able Player*, simply include a **data-youtube-id** attribute
|
|
514
|
+
on the `<video>` element. The value of this attribute must be the video's 11-character YouTube ID.
|
|
470
515
|
|
|
471
|
-
If a described version of the video is available on YouTube, include a **data-youtube-desc-id** attribute
|
|
516
|
+
If a described version of the video is available on YouTube, include a **data-youtube-desc-id** attribute
|
|
472
517
|
on the `<video>` element. The value of this attribute must be the 11-character YouTube ID
|
|
473
|
-
of the described version. If users turn on the Description button on their player controller,
|
|
474
|
-
the described version of the video will be loaded instead of the non-described version.
|
|
518
|
+
of the described version. If users turn on the Description button on their player controller,
|
|
519
|
+
the described version of the video will be loaded instead of the non-described version.
|
|
475
520
|
|
|
476
|
-
Starting with 2.3.1, a YouTube Data API key is required for playing YouTube videos in Able Player.
|
|
477
|
-
Get a YouTube Data API key by registering your application at the [Google Developer Console][].
|
|
478
|
-
For complete instructions, see [Google's Getting Started page]. Note: All that's needed for
|
|
479
|
-
playing YouTube videos in Able Player is a simple API key, **not** OAuth 2.0.
|
|
521
|
+
Starting with 2.3.1, a YouTube Data API key is required for playing YouTube videos in Able Player.
|
|
522
|
+
Get a YouTube Data API key by registering your application at the [Google Developer Console][].
|
|
523
|
+
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.
|
|
480
525
|
|
|
481
|
-
After obtaining your YouTube Data API Key, insert the following code into your HTML page:
|
|
526
|
+
After obtaining your YouTube Data API Key, insert the following code into your HTML page:
|
|
482
527
|
|
|
483
|
-
```HTML
|
|
528
|
+
```HTML
|
|
484
529
|
<script>
|
|
485
|
-
var youTubeDataAPIKey = "paste your API key here";
|
|
530
|
+
var youTubeDataAPIKey = "paste your API key here";
|
|
486
531
|
var googleApiReady = false;
|
|
487
|
-
function initGoogleClientApi() {
|
|
532
|
+
function initGoogleClientApi() {
|
|
488
533
|
googleApiReady = true;
|
|
489
534
|
}
|
|
490
535
|
</script>
|
|
491
536
|
<script src="http://apis.google.com/js/client.js?onload=initGoogleClientApi"></script>
|
|
492
537
|
```
|
|
493
|
-
|
|
494
|
-
If captions or subtitles are available on the YouTube video, these will be displayed for all users,
|
|
495
|
-
and can be controlled using Able Player's CC button. Alternatively, if you include your own
|
|
496
|
-
`<track kind="captions">` elements, these will be used *instead of* the captions on YouTube.
|
|
497
538
|
|
|
498
|
-
|
|
539
|
+
If captions or subtitles are available on the YouTube video, these will be displayed for all users,
|
|
540
|
+
and can be controlled using Able Player's CC button. Alternatively, if you include your own
|
|
541
|
+
`<track kind="captions">` elements, these will be used *instead of* the captions on YouTube.
|
|
542
|
+
|
|
543
|
+
The advantage of managing captions entirely on YouTube is that you only have to manage them in
|
|
499
544
|
one place, and they're available everywhere your YouTube video is played.
|
|
500
545
|
|
|
501
|
-
The advantages of including captions locally in `<track>` elements include:
|
|
546
|
+
The advantages of including captions locally in `<track>` elements include:
|
|
502
547
|
|
|
503
|
-
- Able Player can repurpose the captions into an interactive transcript
|
|
504
|
-
- The captions are searchable using the **data-search** attribute
|
|
505
|
-
- Users can control how the captions are displayed (e.g., color, background color, opacity)
|
|
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)
|
|
506
551
|
|
|
507
|
-
Adjustable playback rate is available for some videos.
|
|
552
|
+
Adjustable playback rate is available for some videos.
|
|
508
553
|
|
|
509
554
|
MIME Types
|
|
510
555
|
----------
|
|
@@ -517,11 +562,11 @@ Apache, this can be correct by adding the following commands to the
|
|
|
517
562
|
```
|
|
518
563
|
# Audio MIME Types
|
|
519
564
|
AddType audio/mpeg mp3
|
|
520
|
-
AddType audio/mp4 mp4
|
|
565
|
+
AddType audio/mp4 mp4
|
|
521
566
|
AddType audio/mp4 mpa
|
|
522
567
|
AddType audio/ogg ogg
|
|
523
568
|
AddType audio/ogg oga
|
|
524
|
-
AddType audio/wav wav
|
|
569
|
+
AddType audio/wav wav
|
|
525
570
|
|
|
526
571
|
# Video MIME Types
|
|
527
572
|
AddType video/mp4 mp4
|
|
@@ -547,9 +592,9 @@ player from anywhere on the web page, as follows:
|
|
|
547
592
|
|
|
548
593
|
- **p or spacebar** = Play/Pause
|
|
549
594
|
- **s** = Stop
|
|
550
|
-
- **r** = Rewind
|
|
551
|
-
- **f** = Forward
|
|
552
|
-
- **c** = Captions
|
|
595
|
+
- **r** = Rewind
|
|
596
|
+
- **f** = Forward
|
|
597
|
+
- **c** = Captions
|
|
553
598
|
- **d** = Description
|
|
554
599
|
- **m** = Mute on/off
|
|
555
600
|
- **v or 1-9** = Volume
|
|
@@ -561,7 +606,7 @@ aren’t working as advertised, they might have better success by
|
|
|
561
606
|
selecting different combinations of modifier keys to accompany the
|
|
562
607
|
default shortcut keys.
|
|
563
608
|
|
|
564
|
-
By default, keyboard shortcuts must be accompanied by Alt + Control.
|
|
609
|
+
By default, keyboard shortcuts must be accompanied by Alt + Control.
|
|
565
610
|
|
|
566
611
|
User Preferences
|
|
567
612
|
----------------
|
|
@@ -580,16 +625,16 @@ users can control the following:
|
|
|
580
625
|
- Use text-based description if available.
|
|
581
626
|
- Automatically pause video when text-based description starts
|
|
582
627
|
- If using text-based description, make it visible
|
|
583
|
-
- Transcript on by default
|
|
628
|
+
- Transcript on by default
|
|
584
629
|
- Highlight transcript as video plays
|
|
585
630
|
- Keyboard-enable transcript
|
|
586
631
|
|
|
587
632
|
Building the Able Player source
|
|
588
633
|
-------------------------------
|
|
589
634
|
|
|
590
|
-
The source JavaScript files for Able Player are in the */scripts* directory,
|
|
591
|
-
and the source CSS files are in the */styles* directory. These source files
|
|
592
|
-
are ultimately combined into several different files (in the */build* directory) using
|
|
635
|
+
The source JavaScript files for Able Player are in the */scripts* directory,
|
|
636
|
+
and the source CSS files are in the */styles* directory. These source files
|
|
637
|
+
are ultimately combined into several different files (in the */build* directory) using
|
|
593
638
|
[npm][] and [Grunt][]:
|
|
594
639
|
|
|
595
640
|
```sh
|
|
@@ -598,31 +643,31 @@ grunt
|
|
|
598
643
|
```
|
|
599
644
|
|
|
600
645
|
The npm and Grunt build process is defined by the *Gruntfile.js* and *package.json*
|
|
601
|
-
files. (Note that the **version number** is specified in *package.json*, and must be
|
|
646
|
+
files. (Note that the **version number** is specified in *package.json*, and must be
|
|
602
647
|
updated when a new version is released).
|
|
603
648
|
|
|
604
649
|
Files created by the build process are put into the */build* directory:
|
|
605
650
|
|
|
606
|
-
- **build/ableplayer.js** -
|
|
651
|
+
- **build/ableplayer.js** -
|
|
607
652
|
the default build of *ableplayer.js*
|
|
608
|
-
- **build/ableplayer.dist.js** -
|
|
653
|
+
- **build/ableplayer.dist.js** -
|
|
609
654
|
a build of *ableplayer.js* without console logging
|
|
610
|
-
- **build/ableplayer.min.js** -
|
|
655
|
+
- **build/ableplayer.min.js** -
|
|
611
656
|
a minified version of the *dist* file
|
|
612
|
-
- **build/ableplayer.min.css** -
|
|
657
|
+
- **build/ableplayer.min.css** -
|
|
613
658
|
a minified combined version of all Able Player CSS files
|
|
614
|
-
|
|
615
|
-
Acknowledgments
|
|
659
|
+
|
|
660
|
+
Acknowledgments
|
|
616
661
|
---------------
|
|
617
662
|
|
|
618
|
-
- Able Player development is supported in part by the [AccessComputing][] project
|
|
619
|
-
at the University of Washington, with financial support from the National Science Foundation
|
|
620
|
-
(grants #CNS-0540615, CNS-0837508, and CNS-1042260).
|
|
621
|
-
- Additional support has been provided by the
|
|
663
|
+
- Able Player development is supported in part by the [AccessComputing][] project
|
|
664
|
+
at the University of Washington, with financial support from the National Science Foundation
|
|
665
|
+
(grants #CNS-0540615, CNS-0837508, and CNS-1042260).
|
|
666
|
+
- Additional support has been provided by the
|
|
622
667
|
[Committee on Institutional Cooperation][] (CIC).
|
|
623
|
-
- Turtle and rabbit icons (available as optional alternatives for the speed buttons) are provided courtesy of [Icons8][].
|
|
668
|
+
- Turtle and rabbit icons (available as optional alternatives for the speed buttons) are provided courtesy of [Icons8][].
|
|
624
669
|
- Sample video tracks are provided courtesy of [The DO-IT Center][] at the University of Washington. Additional videos are available on the [DO-IT Video][] website, which uses Able Player.
|
|
625
|
-
- Sample audio tracks are provided courtesy of Terrill Thompson from his album [Flavors, by Flow Theory][].
|
|
670
|
+
- Sample audio tracks are provided courtesy of Terrill Thompson from his album [Flavors, by Flow Theory][].
|
|
626
671
|
|
|
627
672
|
|
|
628
673
|
[AccessComputing]: http://washington.edu/accesscomputing
|
|
@@ -650,7 +695,6 @@ at the University of Washington, with financial support from the National Scienc
|
|
|
650
695
|
[The DO-IT Center]: http://washington.edu/doit
|
|
651
696
|
[Video Demo #7]: demos/video7.html
|
|
652
697
|
[WebVTT validator]: https://quuz.org/webvtt/
|
|
653
|
-
[WebAIM’s
|
|
698
|
+
[WebAIM’s 2017 Screen Reader User Survey]: https://webaim.org/projects/screenreadersurvey7/#browsers
|
|
654
699
|
[WebVTT]: https://w3c.github.io/webvtt/
|
|
655
700
|
[YouTube's Terms of Service]: https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames
|
|
656
|
-
|