Work on PiP
This commit is contained in:
Sam Potts
109
src/js/plyr.js
109
src/js/plyr.js
@ -78,7 +78,9 @@
|
||||
mute: '[data-plyr="mute"]',
|
||||
captions: '[data-plyr="captions"]',
|
||||
fullscreen: '[data-plyr="fullscreen"]',
|
||||
settings: '[data-plyr="settings"]'
|
||||
settings: '[data-plyr="settings"]',
|
||||
pip: '[data-plyr="pip"]',
|
||||
airplay: '[data-plyr="airplay"]'
|
||||
},
|
||||
volume: {
|
||||
input: '[data-plyr="volume"]',
|
||||
@ -136,7 +138,7 @@
|
||||
enabled: true,
|
||||
key: 'plyr'
|
||||
},
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'pip', 'airplay', 'fullscreen'],
|
||||
i18n: {
|
||||
restart: 'Restart',
|
||||
rewind: 'Rewind {seektime} secs',
|
||||
@ -677,9 +679,15 @@
|
||||
})(),
|
||||
// Picture-in-picture support
|
||||
// Safari only currently
|
||||
pip: function(plyr) {
|
||||
return _is.function(plyr.media.webkitSetPresentationMode);
|
||||
},
|
||||
pip: (function() {
|
||||
var video = document.createElement('video');
|
||||
return _is.function(video.webkitSetPresentationMode);
|
||||
})(),
|
||||
// Airplay support
|
||||
// Safari only currently
|
||||
airplay: (function() {
|
||||
return _is.function(window.WebKitPlaybackTargetAvailabilityEvent);
|
||||
})(),
|
||||
// Check for mime type support against a player instance
|
||||
// Credits: http://diveintohtml5.info/everything.html
|
||||
// Related: http://www.leanbackplyr.com/test/h5mt.html
|
||||
@ -979,6 +987,27 @@
|
||||
);
|
||||
}
|
||||
|
||||
// Picture in picture button
|
||||
console.log(_support.pip);
|
||||
if (_inArray(config.controls, 'pip') && _support.pip) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="pip">',
|
||||
'<svg><use xlink:href="' + iconPath + '-pip" /></svg>',
|
||||
'<span class="plyr__sr-only">PIP</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
|
||||
// Airplay button
|
||||
if (_inArray(config.controls, 'airplay') && _support.airplay) {
|
||||
html.push(
|
||||
'<button type="button" data-plyr="airplay">',
|
||||
'<svg><use xlink:href="' + iconPath + '-airplay" /></svg>',
|
||||
'<span class="plyr__sr-only">AirPlay</span>',
|
||||
'</button>'
|
||||
);
|
||||
}
|
||||
|
||||
// Toggle fullscreen button
|
||||
if (_inArray(config.controls, 'fullscreen')) {
|
||||
html.push(
|
||||
@ -1447,52 +1476,61 @@
|
||||
// Find the UI controls and store references
|
||||
function _findElements() {
|
||||
try {
|
||||
plyr.controls = _getElement(config.selectors.controls.wrapper);
|
||||
plyr.controls = _getElement(config.selectors.controls.wrapper);
|
||||
|
||||
// Buttons
|
||||
plyr.buttons = {};
|
||||
plyr.buttons.seek = _getElement(config.selectors.buttons.seek);
|
||||
plyr.buttons.play = _getElements(config.selectors.buttons.play);
|
||||
plyr.buttons.pause = _getElement(config.selectors.buttons.pause);
|
||||
plyr.buttons.restart = _getElement(config.selectors.buttons.restart);
|
||||
plyr.buttons.rewind = _getElement(config.selectors.buttons.rewind);
|
||||
plyr.buttons.forward = _getElement(config.selectors.buttons.forward);
|
||||
plyr.buttons.fullscreen = _getElement(config.selectors.buttons.fullscreen);
|
||||
plyr.buttons.settings = _getElement(config.selectors.buttons.settings);
|
||||
plyr.buttons = {
|
||||
seek: _getElement(config.selectors.buttons.seek),
|
||||
play: _getElements(config.selectors.buttons.play),
|
||||
pause: _getElement(config.selectors.buttons.pause),
|
||||
restart: _getElement(config.selectors.buttons.restart),
|
||||
rewind: _getElement(config.selectors.buttons.rewind),
|
||||
forward: _getElement(config.selectors.buttons.forward),
|
||||
fullscreen: _getElement(config.selectors.buttons.fullscreen),
|
||||
settings: _getElement(config.selectors.buttons.settings),
|
||||
pip: _getElement(config.selectors.buttons.pip)
|
||||
};
|
||||
|
||||
// Inputs
|
||||
plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
|
||||
plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
|
||||
plyr.buttons.mute = _getElement(config.selectors.buttons.mute);
|
||||
plyr.buttons.captions = _getElement(config.selectors.buttons.captions);
|
||||
|
||||
// Progress
|
||||
plyr.progress = {};
|
||||
plyr.progress.container = _getElement(config.selectors.progress.container);
|
||||
plyr.progress = {
|
||||
container: _getElement(config.selectors.progress.container)
|
||||
};
|
||||
|
||||
// Progress - Buffering
|
||||
plyr.progress.buffer = {};
|
||||
plyr.progress.buffer.bar = _getElement(config.selectors.progress.buffer);
|
||||
plyr.progress.buffer.text = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0];
|
||||
plyr.progress.buffer = (function() {
|
||||
var bar = _getElement(config.selectors.progress.buffer);
|
||||
|
||||
return {
|
||||
bar: bar,
|
||||
text: _is.htmlElement(bar) && bar.getElementsByTagName('span')[0]
|
||||
};
|
||||
})();
|
||||
|
||||
// Progress - Played
|
||||
plyr.progress.played = _getElement(config.selectors.progress.played);
|
||||
plyr.progress.played = _getElement(config.selectors.progress.played);
|
||||
|
||||
// Seek tooltip
|
||||
plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
|
||||
plyr.progress.tooltip = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
|
||||
|
||||
// Volume
|
||||
plyr.volume = {};
|
||||
plyr.volume.input = _getElement(config.selectors.volume.input);
|
||||
plyr.volume.display = _getElement(config.selectors.volume.display);
|
||||
plyr.volume = {
|
||||
input: _getElement(config.selectors.volume.input),
|
||||
display: _getElement(config.selectors.volume.display)
|
||||
};
|
||||
|
||||
// Timing
|
||||
plyr.duration = _getElement(config.selectors.duration);
|
||||
plyr.currentTime = _getElement(config.selectors.currentTime);
|
||||
plyr.seekTime = _getElements(config.selectors.seekTime);
|
||||
plyr.duration = _getElement(config.selectors.duration);
|
||||
plyr.currentTime = _getElement(config.selectors.currentTime);
|
||||
plyr.seekTime = _getElements(config.selectors.seekTime);
|
||||
|
||||
return true;
|
||||
}
|
||||
catch(e) {
|
||||
_warn('It looks like there is a problem with your controls HTML');
|
||||
_warn('It looks like there is a problem with your controls HTML', e);
|
||||
|
||||
// Restore native video controls
|
||||
_toggleNativeControls(true);
|
||||
@ -1606,7 +1644,7 @@
|
||||
}
|
||||
|
||||
// Check for picture-in-picture support
|
||||
_toggleClass(plyr.container, config.classes.pip.enabled, _support.pip(plyr));
|
||||
_toggleClass(plyr.container, config.classes.pip.enabled, _support.pip);
|
||||
|
||||
// If there's no autoplay attribute, assume the video is stopped and add state class
|
||||
_toggleClass(plyr.container, config.classes.stopped, config.autoplay);
|
||||
@ -3276,6 +3314,13 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Picture in picture
|
||||
_on(plyr.buttons.pip, 'click', function() {
|
||||
//if ()
|
||||
|
||||
plyr.media.webkitSetPresentationMode(plyr.media.webkitPresentationMode === 'optimized' ? 'inline' : 'optimized');
|
||||
});
|
||||
|
||||
// Seek tooltip
|
||||
_on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
|
||||
|
||||
|
||||
7
src/sprite/plyr-airplay.svg
Normal file
7
src/sprite/plyr-airplay.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<path d="M16,1 L2,1 C1.447,1 1,1.447 1,2 L1,12 C1,12.553 1.447,13 2,13 L5,13 L5,11 L3,11 L3,3 L15,3 L15,11 L13,11 L13,13 L16,13 C16.553,13 17,12.553 17,12 L17,2 C17,1.447 16.553,1 16,1 L16,1 Z"></path>
|
||||
<polygon points="4 17 14 17 9 11"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 486 B |
7
src/sprite/plyr-pip.svg
Normal file
7
src/sprite/plyr-pip.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<polygon points="13.293 3.293 7.022 9.564 8.436 10.978 14.707 4.707 17 7 17 1 11 1"></polygon>
|
||||
<path d="M13,15 L3,15 L3,5 L8,5 L8,3 L2,3 C1.448,3 1,3.448 1,4 L1,16 C1,16.552 1.448,17 2,17 L14,17 C14.552,17 15,16.552 15,16 L15,10 L13,10 L13,15 L13,15 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 500 B |
Reference in New Issue
Block a user