You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+29-55Lines changed: 29 additions & 55 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,8 +2,11 @@ Able Player
2
2
==========
3
3
4
4
*Able Player* is a fully accessible cross-browser media player. It uses
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.
5
+
the HTML5 `<audio>` or `<video>` element, and supports all five kinds
6
+
of `<track>` elements defined by the HTML5 spec
7
+
(captions, subtitles, descriptions, chapters, and metadata).
8
+
It also supports fully accessible playlists, and
9
+
can be used to play YouTube and Vimeo videos.
7
10
8
11
To see the player in action check out the [Able Player Examples][examples] page.
9
12
@@ -24,7 +27,7 @@ Features
24
27
- 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
28
- Support for playing YouTube and Vimeo videos within the Able Player chrome.
26
29
- 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
-
-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.
30
+
-Fallback support (see section on *Fallback*for details).
28
31
- 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
32
30
33
Supported Languages
@@ -62,29 +65,22 @@ Compatibility
62
65
technologies.
63
66
64
67
- Firefox 3.x and higher
65
-
- Internet Explorer 10 and higher without fallback
66
-
- Internet Explorer 8 and 9, dependent on JW Player as fallback.
68
+
- Internet Explorer 10 and higher
67
69
- Google Chrome 7.0 and higher
68
70
- Opera 10.63 and higher
69
71
- Safari 5.0 on Mac OS X
70
-
- Safari on IOS 3.2.2 and higher (audio only, video plays in default IOS player)
72
+
- Safari on IOS 3.2.2 and higher
71
73
- Chrome on Android 4.2 and higher
72
74
73
75
Note that mobile browsers have limitations (e.g., volume control and autostart are not supported)
74
76
75
77
Dependencies
76
78
------------
77
79
78
-
*Able Player* has a few dependencies, but most are either provided with
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.
80
+
*Able Player* has two dependencies:
82
81
83
82
-*Able Player* uses [jQuery][]. Version 3.2.1 or higher is recommended.
84
83
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
84
-*Able Player* uses [js-cookie][] to store and retrieve user
89
85
preferences in cookies. This script is distributed with *Able
90
86
Player*. Prior to version 2.3, Able Player used [jquery.cookie][]
@@ -93,43 +89,25 @@ details.
93
89
Fallback
94
90
--------
95
91
96
-
For older browsers that don’t support HTML5 media elements, you need a
97
-
fallback solution. *Able Player* was developed to work seamlessly with
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*,
102
-
and *jwplayer.flash.swf* into the
103
-
*Able Player**/thirdparty* directory.
104
-
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.
111
-
112
-
Note that *most* browsers in use today support HTML5 media elements.
113
-
Here’s a breakdown:
114
-
- Chrome since 3.0
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.
92
+
All modern browsers have supported HTML5 media elements for many years.
93
+
However, there are still older browsers in use that don’t have this support
94
+
(e.g., Internet Explorer 9 and earlier). For these, you need to provide fallback content.
95
+
96
+
Prior to version 4.0, *Able Player* used [JW Player][] as a fallback Flash player
97
+
for older browsers. However, this solution was built specifically on **JW Player 6**
98
+
which is now many versions old and difficult to find.
99
+
100
+
Also, prior to version 4.0, *Able Player* used [Modernizr][] to enable
101
+
styling of HTML5 elements in Internet Explorer 6 through 8. This too is no longer
102
+
supported, and Modernizr is no longer needed.
103
+
104
+
Instead, we recommend providing alternative content as a child of the `<video>` or `<audio>` element.
105
+
For example, this could be a link to the media file so users can download it
106
+
and play it on their player of choice. Or it could be a link to a transcript.
107
+
108
+
If the browser is unable to play the media file, Able Player will show this alternative content.
109
+
If no alternative content is provided, Able Player will display a standard message that lists
110
+
the minimum versions of common web browsers required for playing HTML5 media.
133
111
134
112
Setup Step 1: Use HTML5 Doctype
135
113
-------------------------------
@@ -309,11 +287,7 @@ The following attributes make all this possible:
309
287
310
288
#### Fallback Player
311
289
312
-
-**data-fallback** - optional; specify a fallback player. Currently the only supported option is "jw" (JW Player)
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
-
290
+
-**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
291
318
292
The following attributes are supported on the `<video>` element only:
0 commit comments