@vuux/video
Version:
Vue Nuxt 视频播放器
352 lines (351 loc) • 14.2 kB
JavaScript
import { defineComponent as c, useTemplateRef as x, ref as h, computed as ee, watchEffect as le, onMounted as oe, nextTick as te, onUnmounted as se, createElementBlock as i, openBlock as u, Fragment as N, createCommentVNode as d, createElementVNode as t, unref as e, normalizeStyle as R, normalizeClass as V, createVNode as r, toDisplayString as f, withDirectives as a, vShow as m, withModifiers as ne, Transition as k, withCtx as w, renderList as ie } from "vue";
import E from "./component/switch.vue.mjs";
import ue from "./component/volume.vue.mjs";
import re from "./component/progress.vue.mjs";
import de from "./component/loading.vue.mjs";
import ae from "./component/context-menu.vue.mjs";
import { useInit as me } from "./hook/useInit.mjs";
import { useControllerUI as pe } from "./hook/useControllerUI.mjs";
import { useVideoState as ve } from "./hook/useState.mjs";
import { useVideoEvent as fe } from "./hook/useEvent.mjs";
import { Utils as F } from "@vuux/utils";
import { useStyles as ye } from "./hook/useStyles.mjs";
import Me from "./hook/useDrag.mjs";
const ke = {
key: 0,
class: "video-lights"
}, we = {
key: 1,
class: "video-title"
}, ge = {
key: 2,
class: "video-watermark"
}, be = ["src"], Ve = { class: "video-data" }, Ce = ["muted", "volume", "loop"], xe = ["src", "type"], Ee = { class: "video-cover" }, Fe = ["src"], Pe = { class: "controller-data" }, Se = { class: "controller-tools" }, $e = { class: "is-play" }, Te = { class: "is-pause" }, Ue = { class: "is-mute" }, De = { class: "is-up" }, Be = { class: "is-down" }, Le = {
key: 0,
class: "tool-item"
}, Ne = {
key: 1,
class: "tool-item time-box"
}, Re = { class: "controller-tools" }, Oe = {
key: 0,
class: "tool-item is-rate"
}, ze = ["onClick"], Ie = {
key: 1,
class: "tool-item is-setting"
}, he = /* @__PURE__ */ c({
__name: "index",
props: {
theme: { default: "#00a1d6" },
width: { default: "100%" },
src: { default: "" },
title: { default: "" },
poster: { default: "" },
startTime: { default: 0 },
rate: { default: () => [2, 1.5, 1.25, 1, 0.75, 0.5] },
muted: { type: Boolean, default: !1 },
volume: { default: 0.8 },
buttons: { default: () => [
//时间信息
"time",
//倍速
"rate",
//音频
"volume",
//设置
"setting",
//画中画
"pip",
//网页全屏
"webFull",
//全屏
"full"
] },
watermark: {},
contextMenu: { default: () => [] },
scrollFlex: { type: Boolean }
},
emits: ["play", "pause", "ready", "loading", "error", "menu"],
setup(O, { emit: z }) {
const n = O, P = z, y = x("playerEl"), S = x("videoPlaceholderEl"), M = x("videoEl"), C = h(!F.isMobile()), { state: o } = ve(n), { removeAllManaged: I } = F.useManagedEvents(), { onMouseEnter: p, onMouseLeave: v, handleMouseMove: $, handleMouseLeave: T } = pe(y, o), { initVideo: X, initHls: A } = me(M, n, o), { syncVideoStatus: H, stopProgressLoop: W, handleFull: g, handleMutedPlay: U, handlePlaybackRate: j, handlePlayOrPause: b, handleMousemove: q, progressClick: G, handlePip: D } = fe(y, M, o, P), { styles: J, isVisible: B, classNames: K } = ye(n, o, C, S), Q = ee(() => !B.value);
Me(y, y, Q, B);
const Y = (L) => {
P("menu", L);
}, Z = le(() => {
M.value && (o.src = n.src, o.src.endsWith(".m3u8") ? A() : o.type = "video/mp4", M.value.load());
});
return oe(async () => {
await te(), C.value = !F.isMobile(), X(), H();
}), se(() => {
Z(), I(), W(), clearTimeout(o.clearTime);
}), (L, l) => (u(), i(N, null, [
n.scrollFlex ? (u(), i("div", {
key: 0,
ref_key: "videoPlaceholderEl",
ref: S,
class: "app-video-placeholder"
}, null, 512)) : d("", !0),
t("div", {
ref_key: "playerEl",
ref: y,
class: V(["app-video", e(K)]),
style: R(e(J)),
onMousemove: l[34] || (l[34] = //@ts-ignore
(...s) => e($) && e($)(...s)),
onMouseleave: l[35] || (l[35] = //@ts-ignore
(...s) => e(T) && e(T)(...s))
}, [
e(o).lights ? (u(), i("div", ke)) : d("", !0),
t("div", {
class: "video-mask",
onClick: l[0] || (l[0] = //@ts-ignore
(...s) => e(b) && e(b)(...s))
}),
n.title ? (u(), i("div", we, f(n.title), 1)) : d("", !0),
n.watermark?.src ? (u(), i("div", ge, [
t("img", {
src: n.watermark?.src,
style: R(`width: ${n.watermark.width}; height: ${n.watermark.height}`)
}, null, 12, be)
])) : d("", !0),
r(de, {
"video-status": e(o).videoStatus,
"but-status": e(o).butStatus,
mssage: e(o).mssage,
onReplay: e(b)
}, null, 8, ["video-status", "but-status", "mssage", "onReplay"]),
r(ae, {
el: y.value,
"context-menu": n.contextMenu,
onContextMenu: Y
}, null, 8, ["el", "context-menu"]),
t("div", Ve, [
t("video", {
ref_key: "videoEl",
ref: M,
"x5-playsinline": "",
"x5-video-player-type": "h5",
class: V({ "is-mirror": e(o).mirror }),
preload: "auto",
controls: !1,
muted: e(o)._muted,
volume: e(o)._volume,
loop: e(o).loop,
"webkit-playsinline": "",
playsinline: "",
"x-webkit-airplay": "allow",
onDblclick: l[1] || (l[1] = //@ts-ignore
(...s) => e(g) && e(g)(...s))
}, [
t("source", {
src: e(o).src,
type: e(o).type
}, null, 8, xe)
], 42, Ce),
a(t("div", Ee, [
t("img", {
src: n.poster
}, null, 8, Fe)
], 512), [
[m, e(o).isPoster]
])
]),
t("div", {
class: V(["video-controller", { "is-active": e(o).control && C.value }]),
onContextmenu: l[33] || (l[33] = ne(() => {
}, ["prevent"]))
}, [
r(re, {
modelValue: e(o).progress,
"onUpdate:modelValue": l[2] || (l[2] = (s) => e(o).progress = s),
"hover-text": e(o).cursorTime,
loaded: e(o).loaded,
onChange: e(G),
onOnMousemove: e(q)
}, null, 8, ["modelValue", "hover-text", "loaded", "onChange", "onOnMousemove"]),
t("div", Pe, [
t("div", Se, [
t("div", {
class: "tool-item",
onClick: l[3] || (l[3] = (s) => e(b)(s))
}, [
a(t("div", $e, null, 512), [
[m, e(o).butStatus == "play"]
]),
a(t("div", Te, null, 512), [
[m, e(o).butStatus == "pause"]
])
]),
t("div", {
class: "tool-item",
onClick: l[4] || (l[4] = //@ts-ignore
(...s) => e(U) && e(U)(...s))
}, [
a(t("div", Ue, null, 512), [
[m, e(o)._volume == 0 || e(o)._muted]
]),
a(t("div", De, null, 512), [
[m, e(o)._volume >= 0.5 || e(o)._volume == 1]
]),
a(t("div", Be, null, 512), [
[m, e(o)._volume < 0.5 && e(o)._volume > 0]
])
]),
n.buttons.includes("volume") ? (u(), i("div", Le, [
r(ue, {
modelValue: e(o)._volume,
"onUpdate:modelValue": l[5] || (l[5] = (s) => e(o)._volume = s),
onChange: l[6] || (l[6] = (s) => e(o)._muted = !1)
}, null, 8, ["modelValue"])
])) : d("", !0),
n.buttons.includes("time") ? (u(), i("div", Ne, [
t("span", null, f(e(o).currentTime), 1),
l[36] || (l[36] = t("span", null, "/", -1)),
t("span", null, f(e(o).totalTime), 1)
])) : d("", !0)
]),
t("div", Re, [
n.buttons.includes("rate") ? (u(), i("div", Oe, [
t("div", {
class: "is-rate",
onMouseenter: l[7] || (l[7] = () => e(p)("rate")),
onMouseleave: l[8] || (l[8] = () => e(v)())
}, f(e(o).speed == 1 ? "倍速" : e(o).speed + " X"), 33),
r(k, { name: "tooltip" }, {
default: w(() => [
a(t("ul", {
onMouseenter: l[9] || (l[9] = () => e(p)("rate")),
onMouseleave: l[10] || (l[10] = () => e(v)())
}, [
(u(!0), i(N, null, ie(n.rate, (s, _) => (u(), i("li", {
key: _,
class: V({ "is-active": e(o).speed == s }),
onClick: (Xe) => e(j)(s)
}, f(s) + " X", 11, ze))), 128))
], 544), [
[m, e(o).show == "rate"]
])
]),
_: 1
})
])) : d("", !0),
n.buttons.includes("setting") ? (u(), i("div", Ie, [
t("div", {
class: "is-setting",
onMouseenter: l[11] || (l[11] = () => e(p)("setting")),
onMouseleave: l[12] || (l[12] = () => e(v)())
}, null, 32),
r(k, { name: "tooltip" }, {
default: w(() => [
a(t("ul", {
onMouseenter: l[16] || (l[16] = () => e(p)("setting")),
onMouseleave: l[17] || (l[17] = () => e(v)())
}, [
t("li", null, [
l[37] || (l[37] = t("span", null, "镜像画面", -1)),
r(E, {
modelValue: e(o).mirror,
"onUpdate:modelValue": l[13] || (l[13] = (s) => e(o).mirror = s)
}, null, 8, ["modelValue"])
]),
t("li", null, [
l[38] || (l[38] = t("span", null, "循环播放", -1)),
r(E, {
modelValue: e(o).loop,
"onUpdate:modelValue": l[14] || (l[14] = (s) => e(o).loop = s)
}, null, 8, ["modelValue"])
]),
t("li", null, [
l[39] || (l[39] = t("span", null, "关灯模式", -1)),
r(E, {
modelValue: e(o).lights,
"onUpdate:modelValue": l[15] || (l[15] = (s) => e(o).lights = s)
}, null, 8, ["modelValue"])
])
], 544), [
[m, e(o).show == "setting"]
])
]),
_: 1
})
])) : d("", !0),
n.buttons.includes("pip") ? (u(), i("div", {
key: 2,
class: "tool-item is-pip",
onClick: l[22] || (l[22] = //@ts-ignore
(...s) => e(D) && e(D)(...s))
}, [
t("div", {
class: "is-pip",
onMouseenter: l[18] || (l[18] = () => e(p)("pip")),
onMouseleave: l[19] || (l[19] = () => e(v)())
}, null, 32),
r(k, { name: "tooltip" }, {
default: w(() => [
a(t("div", {
class: "item-tip",
onMouseenter: l[20] || (l[20] = () => e(p)("pip")),
onMouseleave: l[21] || (l[21] = () => e(v)())
}, "画中画", 544), [
[m, e(o).show == "pip"]
])
]),
_: 1
})
])) : d("", !0),
n.buttons.includes("webFull") ? (u(), i("div", {
key: 3,
class: "tool-item is-web-full",
onClick: l[27] || (l[27] = (s) => e(o).webFull = !e(o).webFull)
}, [
t("div", {
class: "is-web-full",
onMouseenter: l[23] || (l[23] = () => e(p)("webFull")),
onMouseleave: l[24] || (l[24] = () => e(v)())
}, null, 32),
r(k, { name: "tooltip" }, {
default: w(() => [
a(t("div", {
class: "item-tip",
onMouseenter: l[25] || (l[25] = () => e(p)("webFull")),
onMouseleave: l[26] || (l[26] = () => e(v)())
}, f(e(o).webFull ? "退出全屏" : "网页全屏"), 545), [
[m, e(o).show == "webFull"]
])
]),
_: 1
})
])) : d("", !0),
n.buttons.includes("full") ? (u(), i("div", {
key: 4,
class: "tool-item is-full",
onClick: l[32] || (l[32] = //@ts-ignore
(...s) => e(g) && e(g)(...s))
}, [
t("div", {
class: "is-full",
onMouseenter: l[28] || (l[28] = () => e(p)("full")),
onMouseleave: l[29] || (l[29] = () => e(v)())
}, null, 32),
r(k, { name: "tooltip" }, {
default: w(() => [
a(t("div", {
class: "item-tip",
onMouseenter: l[30] || (l[30] = () => e(p)("full")),
onMouseleave: l[31] || (l[31] = () => e(v)())
}, f(e(o).full ? "退出全屏" : "全屏"), 545), [
[m, e(o).show == "full"]
])
]),
_: 1
})
])) : d("", !0)
])
])
], 34)
], 38)
], 64));
}
});
export {
he as default
};