@zhsz/cool-design-dv
Version:
83 lines (82 loc) • 2.09 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const videojs = require("video.js");
require("video.js/dist/video-js.min.css");
const lodashEs = require("lodash-es");
const _hoisted_1 = ["id"];
const _hoisted_2 = ["src"];
const __default__ = vue.defineComponent({
name: "HlsPlayer"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
src: {},
options: {}
},
setup(__props) {
const props = __props;
const playerId = lodashEs.uniqueId("hls_");
vue.watch(
() => props.src,
(n) => {
handleSrcChange(n);
}
);
vue.onMounted(() => {
initVideoSourc();
});
let player = null;
function initVideoSourc() {
const options = {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
controls: true,
...props.options
// ...其他配置参数
};
player = videojs(playerId, options, () => {
vue.nextTick(() => {
player.play();
});
});
}
function handleSrcChange(src) {
if (!src)
return;
player.src([
{
type: "application/x-mpegURL",
src
}
]);
player.play();
}
vue.onBeforeUnmount(() => {
if (player) {
player.dispose();
player = null;
}
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("video", {
id: vue.unref(playerId),
class: "video-js vjs-default-skin",
autoplay: "",
muted: "",
preload: "auto",
style: { "width": "100%", "height": "100%", "object-fit": "fill" }
}, [
vue.createElementVNode("source", {
src: props.src,
type: "application/x-mpegURL",
style: { "width": "100%", "height": "100%" }
}, null, 8, _hoisted_2)
], 8, _hoisted_1);
};
}
});
exports.default = _sfc_main;