@vuux/video
Version:
Vue Nuxt 视频播放器
112 lines (111 loc) • 4.07 kB
JavaScript
import { pictureInPicture as L, timeFormat as f, fullScreen as U } from "../utils.mjs";
import { Utils as g } from "@vuux/utils";
const D = (d, a, e, o) => {
let c = 0, p = 0;
const y = 150, { addManaged: t, removeManaged: S } = g.useManagedEvents(), m = () => {
cancelAnimationFrame(c);
const u = (r) => {
if (c = requestAnimationFrame(u), !a.value || a.value.paused || !r || r - p < y)
return;
p = r;
const n = a.value.duration || 0, s = a.value.currentTime || 0;
e.currentTime = f(s), e.progress = n > 0 ? s / n : 0;
const i = a.value.buffered;
if (i && i.length && n > 0) {
const x = i.end(i.length - 1);
e.loaded = Number((x / n * 100).toFixed(2));
}
};
c = requestAnimationFrame(u);
}, l = () => cancelAnimationFrame(c), v = (u, r) => {
if (!a.value)
return;
const n = a.value.duration;
if (!isFinite(n) || n <= 0)
return;
const s = Math.max(0, Math.min(n, u));
a.value.currentTime = s, e.progress = s / n, e.isPoster = !1, a.value.paused && !r && a.value.play().catch(() => {
e.videoStatus = "error", e.mssage = "视频加载错误", o("error");
});
}, h = async () => {
if (a.value)
try {
await a.value.play(), e.isPoster = !1, m();
} catch {
e.videoStatus = "loading", await g.wait(5e3), e.videoStatus = "error", e.mssage = "视频加载错误", o("error");
}
}, P = () => {
a.value && (a.value.pause(), e.control = !0, l());
}, b = (u) => {
u && (u.stopPropagation(), u.cancelable && u.preventDefault()), a.value && (a.value.paused ? h() : P());
}, T = () => {
d.value && (e.full = U(d.value));
}, F = () => {
a.value && (e._volume > 0 ? (e._volume = 0, e._muted = !0) : (e._volume = 0.8, e._muted = !1), a.value.muted = e._muted);
}, M = (u) => {
e.speed = u, a.value && (a.value.playbackRate = u);
}, _ = (u) => {
a.value && (e.cursorTime = f((a.value.duration || 0) * u));
}, A = (u) => {
if (!a.value)
return;
const r = a.value.duration;
if (!isFinite(r) || r <= 0)
return;
const n = u * r;
v(n);
}, k = () => {
if (!a.value)
return;
const u = () => {
document.removeEventListener("leavepictureinpicture", u);
};
S(document, "leavepictureinpicture", u), L(a.value);
}, w = () => {
const u = a.value?.duration || 0;
return e.totalTime = f(u);
};
return {
syncVideoStatus: () => {
!a.value || !d.value || (t(a.value, "play", () => {
e.videoStatus = "play", e.butStatus = "pause", o("play"), m();
}), t(a.value, "pause", () => {
e.videoStatus = "paused", e.butStatus = "play", o("pause"), l();
}), t(a.value, "ended", () => {
e.videoStatus = "ended", e.butStatus = "play", e.isPoster = !0, e.control = !0, l();
}), t(a.value, "progress", () => {
const u = a.value?.duration || 0;
if (u > 0) {
const r = a.value?.buffered;
if (r && r.length) {
const n = r.end(r.length - 1);
e.loaded = Number((n / u * 100).toFixed(2));
}
}
}), t(a.value, "loadeddata", () => {
e.videoStatus = "play";
}), t(a.value, "waiting", () => {
e.videoStatus = "loading", e.mssage = "加载中", o("loading", !0);
}), t(a.value, "playing", () => {
e.videoStatus = "playing", e.mssage = "", o("loading", !1);
}), t(a.value, "canplay", () => {
a.value && !a.value.paused && (e.videoStatus = "play", e.mssage = "");
}), t(a.value, "error", () => {
e.videoStatus = "error", e.mssage = "视频加载错误", o("error"), l();
}), t(a.value, "loadedmetadata", () => {
e.videoStatus = "play", w(), e.startTime > 0 && v(e.startTime, !0), o("ready");
}));
},
stopProgressLoop: l,
handleFull: T,
handleMutedPlay: F,
handlePlaybackRate: M,
handlePlayOrPause: b,
handleMousemove: _,
progressClick: A,
handlePip: k
};
};
export {
D as useVideoEvent
};