Skip to content

Commit b64ae10

Browse files
committed
Initial commit with Vimeo support
1 parent 7dcf5af commit b64ae10

42 files changed

Lines changed: 47424 additions & 43532 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

Gruntfile.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ module.exports = function(grunt) {
4242
'scripts/translation.js',
4343
'scripts/ttml2webvtt.js',
4444
'scripts/JQuery.doWhen.js',
45-
'scripts/vts.js'
45+
'scripts/vts.js',
46+
'scripts/vimeo.js'
4647
],
4748
dest: 'build/<%= pkg.name %>.js'
4849
},

README.md

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Features
2222
- 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.
2323
- 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.
2424
- 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.
25+
- Support for playing YouTube and Vimeo videos within the Able Player chrome.
2626
- 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).
2727
- 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.
2828
- 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.
@@ -211,7 +211,7 @@ The following attributes are supported on both the `<audio>` and `<video>` eleme
211211
- **data-debug** - optional; if present will write messages to the developer console
212212
- **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.
213213
- **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.
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 and Vimeo videos.
215215
- **preload** - optional; tells the browser how much media to download
216216
when the page loads. If the media is the central focus of the web
217217
page, use **preload="auto"**, which instructs the browser to
@@ -321,6 +321,8 @@ The following attributes are supported on the `<video>` element only:
321321
- **data-youtube-id** - optional; 11-character YouTube ID, to play the YouTube video using *Able Player*.
322322
- **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.
323323
- **data-youtube-nocookie** - optional; if set to "true" the YouTube video will be embedded using the "youtube-nocookie.com" host.
324+
- **data-vimeo-id** - optional; ID of a video on Vimeo, to play the Vimeo video using *Able Player*.
325+
- **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.
324326
- **height** - height of the video in pixels.
325327
- **poster** - path to an image file. Will be displayed in the player
326328
until the video is played.
@@ -478,6 +480,7 @@ The following example shows a playlist with two videos. The first video has one
478480
and two tracks (captions and descriptions). The second video is hosted on YouTube, and has both a
479481
non-described and described version. It also has a locally-hosted chapters track.
480482
Able Player supports mixed playlists, with videos hosted locally or on YouTube.
483+
Vimeo videos are not yet supported within playlists.
481484

482485
```HTML
483486
<ul class="able-playlist" data-player="my_video_player">
@@ -618,6 +621,24 @@ If your video has HTML `<track>` elements for captions and subtitles, these will
618621

619622
Adjustable playback rate is available for some videos.
620623

624+
Vimeo Support
625+
---------------
626+
627+
To play a Vimeo video in *Able Player*, simply include a **data-vimeo-id** attribute
628+
on the `<video>` element. The value of this attribute must be the video's Vimeo ID (a string of numbers).
629+
630+
If a described version of the video is available on Vimeo, include a **data-vimeo-desc-id** attribute
631+
on the `<video>` element. The value of this attribute must be the Vimeo ID
632+
of the described version. If users turn on the Description button on their player controller,
633+
the described version of the video will be loaded instead of the non-described version.
634+
635+
Note that Vimeo currently has a few major limitations:
636+
637+
- 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
638+
- 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 &lt;track&gt; 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.
639+
- 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.
640+
641+
621642
MIME Types
622643
----------
623644

0 commit comments

Comments
 (0)