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 *.sublime-workspace
.DS_Store .DS_Store
aws.json aws.json
docs/index.dev.html
*.mp4 *.mp4
index-dev.html index-*.html
notes.txt 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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="dist/docs.css"> <link rel="stylesheet" href="dist/demo.css">
</head> </head>
<body> <body>
<main> <main>

5
demo/index.html
View File

@ -51,13 +51,14 @@
</ul> </ul>
</nav> </nav>
<section> <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 --> <!-- 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.mp4" type="video/mp4">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm"> <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
<!-- Text track file --> <!-- 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 --> <!-- 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> <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><code>captions</code></td>
<td>Object</td> <td>Object</td>
<td>&mdash;</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>
<tr> <tr>
<td><code>fullscreen</code></td> <td><code>fullscreen</code></td>
@ -575,6 +575,11 @@ Here's a list of the methods supported:
<td>&mdash;</td> <td>&mdash;</td>
<td>Toggles whether captions are enabled.</td> <td>Toggles whether captions are enabled.</td>
</tr> </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> <tr>
<td><code>toggleFullscreen()</code></td> <td><code>toggleFullscreen()</code></td>
<td>Event</td> <td>Event</td>

81
src/js/plyr.js
View File

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