x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-08 10:56:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

添加原生画中画功能

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-21 16:44:57 +08:00
1 parent 08a29ba6aa
commit 0fb3dba760
4 files changed
+130 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/docs/README.md
+5 -1
View File
@@ -151,6 +151,8 @@ var art = new Artplayer({
Whether to play automatically, sometimes it doesn't necessarily succeed
More info: [autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
[Run Code](/)
```js
@@ -276,7 +278,9 @@ var art = new Artplayer({
- Type: `Boolean`
- Default: `false`
Whether to show pip controller in the bottom
Whether to show pip controller in the bottom, it will give priority to the native picture-in-picture feature.
More info: [picture-in-picture](https://developers.google.com/web/updates/2017/09/picture-in-picture)
[Run Code](/)
docs/lab/js/artplayer.js
+56 -6
View File
@@ -2843,7 +2843,54 @@
}));
});
function pipMix(art, player) {
function nativePip(art, player) {
var notice = art.notice,
$video = art.refs.$video,
proxy = art.events.proxy;
$video.disablePictureInPicture = false;
Object.defineProperty(player, 'pipState', {
get: function get() {
return document.pictureInPictureElement;
}
});
Object.defineProperty(player, 'pipEnabled', {
value: function value() {
$video.requestPictureInPicture().catch(function (error) {
notice.show(error, true, 3000);
console.warn(error);
});
}
});
Object.defineProperty(player, 'pipExit', {
value: function value() {
document.exitPictureInPicture().catch(function (error) {
notice.show(error, true, 3000);
console.warn(error);
});
}
});
Object.defineProperty(player, 'pipToggle', {
value: function value() {
if (player.pipState) {
player.pipExit();
} else {
player.pipEnabled();
}
}
});
proxy($video, 'enterpictureinpicture', function () {
art.emit('pipEnabled');
});
proxy($video, 'leavepictureinpicture', function () {
art.emit('pipExit');
if (art.isPlaying) {
player.play();
}
});
}
function customPip(art, player) {
var option = art.option,
i18n = art.i18n,
_art$refs = art.refs,
@@ -2860,11 +2907,6 @@
return $player.classList.contains('artplayer-pip');
}
});
Object.defineProperty(player, 'pipDraggie', {
get: function get() {
return draggie;
}
});
Object.defineProperty(player, 'pipEnabled', {
value: function value() {
if (player.autoSizeState) {
@@ -2921,6 +2963,14 @@
});
}
function pipMix(art, player) {
if (document.pictureInPictureEnabled) {
nativePip(art, player);
} else {
customPip(art, player);
}
}
function seekMix$1(art, player) {
Object.defineProperty(player, 'loaded', {
get: function get() {
docs/lab/js/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.js","../../../paLine truncated
{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.js","../../../paLine truncated
packages/artplayer/src/player/pipMix.js
+68 -6
View File
@@ -1,8 +1,66 @@
import Draggabilly from 'draggabilly';
import { setStyle, append } from '../utils';
export default function pipMix(art, player) {
const { option, i18n, refs: { $player, $pipClose, $pipTitle }, events: { destroyEvents, proxy } } = art;
function nativePip(art, player) {
const {
notice,
refs: { $video },
events: { proxy }
} = art;
$video.disablePictureInPicture = false;
Object.defineProperty(player, 'pipState', {
get: () => document.pictureInPictureElement
});
Object.defineProperty(player, 'pipEnabled', {
value: () => {
$video.requestPictureInPicture().catch(error => {
notice.show(error, true, 3000);
console.warn(error);
});
}
});
Object.defineProperty(player, 'pipExit', {
value: () => {
document.exitPictureInPicture().catch(error => {
notice.show(error, true, 3000);
console.warn(error);
});
}
});
Object.defineProperty(player, 'pipToggle', {
value: () => {
if (player.pipState) {
player.pipExit();
} else {
player.pipEnabled();
}
}
});
proxy($video, 'enterpictureinpicture', () => {
art.emit('pipEnabled');
});
proxy($video, 'leavepictureinpicture', () => {
art.emit('pipExit');
if (art.isPlaying) {
player.play();
}
});
}
function customPip(art, player) {
const {
option,
i18n,
refs: { $player, $pipClose, $pipTitle },
events: { destroyEvents, proxy }
} = art;
let cachePos = null;
let draggie = null;
@@ -10,10 +68,6 @@ export default function pipMix(art, player) {
get: () => $player.classList.contains('artplayer-pip')
});
Object.defineProperty(player, 'pipDraggie', {
get: () => draggie
});
Object.defineProperty(player, 'pipEnabled', {
value: () => {
if (player.autoSizeState) {
@@ -74,3 +128,11 @@ export default function pipMix(art, player) {
}
});
}
export default function pipMix(art, player) {
if (document.pictureInPictureEnabled) {
nativePip(art, player);
} else {
customPip(art, player);
}
}