ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Manually merged #385

Browse Source
This commit is contained in:
Sam 2016-10-01 22:07:01 +10:00
parent 1ad103c29f
commit eba0831538
8 changed files with 134 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -3,9 +3,6 @@ node_modules
*.sublime-workspace
.DS_Store
aws.json
docs/index.dev.html
*.mp4
index-dev.html
index-*.html
notes.txt
*.vtt
docs/index.dev.php

2
demo/error.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles -->
<link rel="stylesheet" href="dist/docs.css">
<link rel="stylesheet" href="dist/demo.css">
</head>
<body>
<main>

5
demo/index.html
View File

@ -51,13 +51,14 @@
</ul>
</nav>
<section>
<video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
<video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls>
<!-- Video files -->
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
<!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
<track kind="captions" label="English" srclang="en" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
<track kind="captions" label="Français" srclang="fr" src="webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt" default>
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>

29
demo/webvtt/View_From_A_Blue_Moon_Trailer-HD.en.vtt Normal file
View File

@ -0,0 +1,29 @@
WEBVTT FILE
1
00:00:09.500 --> 00:00:12.000
The ocean floor rises 5 miles to the shores
2
00:00:12.001 --> 00:00:16.500
of what people call, the seven mile miracle
3
00:00:25.500 --> 00:00:28.000
What would it be like to be born on this island?
4
00:00:32.500 --> 00:00:34.500
To grow up on these shores
5
00:00:37.500 --> 00:00:40.000
To witness this water, every day
6
00:00:43.500 --> 00:00:46.000
You're about to meet someone, who did
7
00:02:45.500 --> 00:02:49.000
This is a film about John John Florence

29
demo/webvtt/View_From_A_Blue_Moon_Trailer-HD.fr.vtt Normal file
View File

@ -0,0 +1,29 @@
WEBVTT FILE
1
00:00:09.500 --> 00:00:12.000
Le fond de l'océan monte 5 miles des rives
2
00:00:12.001 --> 00:00:16.500
de ce que les gens appellent le miracle de sept mile
3
00:00:25.500 --> 00:00:28.000
Que serait-il d'être né sur cette île?
4
00:00:32.500 --> 00:00:34.500
Pour grandir sur ces rivages
5
00:00:37.500 --> 00:00:40.000
Pour assister à cette eau, tous les jours
6
00:00:43.500 --> 00:00:46.000
Vous êtes sur le point de rencontrer quelqu'un, qui ne
7
00:02:45.500 --> 00:02:49.000
Ceci est un film sur John John Florence

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

7
readme.md
View File

@ -369,7 +369,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
<td><code>captions</code></td>
<td>Object</td>
<td>&mdash;</td>
<td>One property <code>defaultActive</code> which toggles if captions should be on by default. The default value is <code>false</code>.</td>
<td>Two properties: <code>defaultActive</code> which toggles if captions should be on by default. The default value is <code>false</code>. The <code>selectedIndex</code> property sets the default starting index for the caption tracks.</td>
</tr>
<tr>
<td><code>fullscreen</code></td>
@ -575,6 +575,11 @@ Here's a list of the methods supported:
<td>&mdash;</td>
<td>Toggles whether captions are enabled.</td>
</tr>
<tr>
<td><code>setCaptionIndex()</code></td>
<td>Number</td>
<td>Set the active track to the provided number. Index starts with 0.</td>
</tr>
<tr>
<td><code>toggleFullscreen()</code></td>
<td>Event</td>

81
src/js/plyr.js
View File

@ -124,7 +124,8 @@
tabFocus: 'tab-focus'
},
captions: {
defaultActive: false
defaultActive: false,
selectedIndex: 0
},
fullscreen: {
enabled: true,
@ -437,13 +438,20 @@
}
}
// Bind event
// Bind event handler
function _on(element, events, callback, useCapture) {
if (element) {
if (_is.htmlElement(element)) {
_toggleListener(element, events, callback, true, useCapture);
}
}
// Unbind event handler
function _off(element, events, callback, useCapture) {
if (_is.htmlElement(element)) {
_toggleListener(element, events, callback, false, useCapture);
}
}
// Trigger event
function _event(element, type, bubbles, properties) {
// Bail if no element
@ -1017,6 +1025,25 @@
}
}
// Caption cue change helper event
/*function _captionCueChange() {
_setActiveCueForTrack(this);
}*/
// Display active caption if it contains text
function _setActiveCueForTrack(track) {
if (_is.event(track)) {
track = track.target;
}
// Display a cue, if there is one
if (track.activeCues[0] && 'text' in track.activeCues[0]) {
_setCaption(track.activeCues[0].getCueAsHTML());
} else {
_setCaption();
}
}
// Setup captions
function _setupCaptions() {
// Bail if not HTML5 video
@ -1036,7 +1063,8 @@
}
// Get URL of caption file if exists
var captionSrc = '',
var captionSources = [],
captionSrc = '',
kind,
children = plyr.media.childNodes;
@ -1044,17 +1072,21 @@
if (children[i].nodeName.toLowerCase() === 'track') {
kind = children[i].kind;
if (kind === 'captions' || kind === 'subtitles') {
captionSrc = children[i].getAttribute('src');
captionSources.push(children[i].getAttribute('src'));
}
}
}
// Record if caption file exists or not
plyr.captionExists = true;
if (captionSrc === '') {
if (captionSources.length === 0) {
plyr.captionExists = false;
_log('No caption track found');
} else if ((config.captions.selectedIndex + 1) > captionSources.length) {
plyr.captionExists = false;
_log('Caption index out of bound');
} else {
captionSrc = captionSources[config.captions.selectedIndex];
_log('Caption track found; URI: ' + captionSrc);
}
@ -1066,6 +1098,8 @@
// This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
var tracks = plyr.media.textTracks;
for (var x = 0; x < tracks.length; x++) {
// Remove the listener to prevent event overlapping
_off(tracks[x], 'cuechange', _setActiveCueForTrack);
tracks[x].mode = 'hidden';
}
@ -1089,20 +1123,16 @@
if (plyr.usingTextTracks) {
_log('TextTracks supported');
for (var y = 0; y < tracks.length; y++) {
var track = tracks[y];
var track = tracks[config.captions.selectedIndex];
if (track.kind === 'captions' || track.kind === 'subtitles') {
_on(track, 'cuechange', function() {
// Display a cue, if there is one
if (this.activeCues[0] && 'text' in this.activeCues[0]) {
_setCaption(this.activeCues[0].getCueAsHTML());
} else {
_setCaption();
}
});
if (track.kind === 'captions' || track.kind === 'subtitles') {
_on(track, 'cuechange', _setActiveCueForTrack);
// if we change the active track while a cue is already displayed we need to update it
if (track.activeCues && track.activeCues.length > 0) {
_setActiveCueForTrack(track);
}
}
}
} else {
// Caption tracks not natively supported
_log('TextTracks not supported so rendering captions manually');
@ -2425,6 +2455,20 @@
_updateStorage({captionsEnabled: plyr.captionsEnabled});
}
// Select active caption
function _setCaptionIndex(index){
//save active caption
config.captions.selectedIndex = index;
// clear caption
_setCaption();
// re-run setup
_setupCaptions();
}
// Check if media is loading
function _checkLoading(event) {
var loading = (event.type === 'waiting');
@ -3615,6 +3659,7 @@
toggleCaptions: _toggleCaptions,
toggleFullscreen: _toggleFullscreen,
toggleControls: _toggleControls,
setCaptionIndex: _setCaptionIndex,
isFullscreen: function() { return plyr.isFullscreen || false; },
support: function(mimeType) { return _support.mime(plyr, mimeType); },
destroy: _destroy