mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-28 10:31:20 -08:00
优化pip
This commit is contained in:
1 parent
fcd7fbecfc
commit
022f36624a
2 files changed
+13
-4
No files matched your search
@@ -4,6 +4,7 @@ function nativePip(art, player) {
|
|||||||
const {
|
const {
|
||||||
template: { $video },
|
template: { $video },
|
||||||
events: { proxy },
|
events: { proxy },
|
||||||
|
notice,
|
||||||
} = art;
|
} = art;
|
||||||
|
|
||||||
$video.disablePictureInPicture = false;
|
$video.disablePictureInPicture = false;
|
||||||
@@ -15,10 +16,12 @@ function nativePip(art, player) {
|
|||||||
set(value) {
|
set(value) {
|
||||||
if (value) {
|
if (value) {
|
||||||
$video.requestPictureInPicture().catch(error => {
|
$video.requestPictureInPicture().catch(error => {
|
||||||
|
notice.show(error);
|
||||||
throw error;
|
throw error;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
document.exitPictureInPicture().catch(error => {
|
document.exitPictureInPicture().catch(error => {
|
||||||
|
notice.show(error);
|
||||||
throw error;
|
throw error;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -75,6 +78,7 @@ function customPip(art, player) {
|
|||||||
let lastPageY = 0;
|
let lastPageY = 0;
|
||||||
let lastPlayerLeft = 0;
|
let lastPlayerLeft = 0;
|
||||||
let lastPlayerTop = 0;
|
let lastPlayerTop = 0;
|
||||||
|
|
||||||
proxy($pipHeader, 'mousedown', event => {
|
proxy($pipHeader, 'mousedown', event => {
|
||||||
isDroging = true;
|
isDroging = true;
|
||||||
lastPageX = event.pageX;
|
lastPageX = event.pageX;
|
||||||
@@ -103,7 +107,8 @@ function customPip(art, player) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
append($pipTitle, option.title || i18n.get('Mini player'));
|
append($pipTitle, option.title || i18n.get('Mini player'));
|
||||||
Object.defineProperty(player, 'pip', {
|
|
||||||
|
const property = {
|
||||||
get() {
|
get() {
|
||||||
return $player.classList.contains('artplayer-pip');
|
return $player.classList.contains('artplayer-pip');
|
||||||
},
|
},
|
||||||
@@ -133,14 +138,16 @@ function customPip(art, player) {
|
|||||||
art.emit('pipExit');
|
art.emit('pipExit');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
};
|
||||||
|
|
||||||
|
Object.defineProperty(player, 'pip', property);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function pipMix(art, player) {
|
export default function pipMix(art, player) {
|
||||||
const { $video } = art.template;
|
const { $video } = art.template;
|
||||||
if (document.pictureInPictureEnabled) {
|
if (document.pictureInPictureEnabled) {
|
||||||
nativePip(art, player);
|
nativePip(art, player);
|
||||||
} else if ($video.webkitSupportsPresentationMode && typeof $video.webkitSetPresentationMode === 'function') {
|
} else if ($video.webkitSupportsPresentationMode) {
|
||||||
webkitPip(art, player);
|
webkitPip(art, player);
|
||||||
} else {
|
} else {
|
||||||
customPip(art, player);
|
customPip(art, player);
|
||||||
|
|||||||
@@ -2,9 +2,10 @@ import { debounce } from '../utils';
|
|||||||
|
|
||||||
export default function autoPip(art) {
|
export default function autoPip(art) {
|
||||||
const { events, player, template } = art;
|
const { events, player, template } = art;
|
||||||
|
|
||||||
const scrollDebounce = debounce(() => {
|
const scrollDebounce = debounce(() => {
|
||||||
const { top, height } = template.$player.getBoundingClientRect();
|
const { top, height } = template.$player.getBoundingClientRect();
|
||||||
if (top + height <= 0 && !player.pip && player.playing) {
|
if (top + height <= 0 && !player.pip) {
|
||||||
player.pip = true;
|
player.pip = true;
|
||||||
art.emit('artplayerPluginAutoPip', true);
|
art.emit('artplayerPluginAutoPip', true);
|
||||||
} else if (player.pip) {
|
} else if (player.pip) {
|
||||||
@@ -12,6 +13,7 @@ export default function autoPip(art) {
|
|||||||
art.emit('artplayerPluginAutoPip', false);
|
art.emit('artplayerPluginAutoPip', false);
|
||||||
}
|
}
|
||||||
}, 300);
|
}, 300);
|
||||||
|
|
||||||
events.proxy(window, 'scroll', scrollDebounce);
|
events.proxy(window, 'scroll', scrollDebounce);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in new issue
Block a user