@zhsz/cool-design-dv
Version:
83 lines (82 loc) • 2.02 kB
JavaScript
import { defineComponent, watch, onMounted, nextTick, onBeforeUnmount, openBlock, createElementBlock, unref, createElementVNode } from "vue";
import videojs from "video.js";
import "video.js/dist/video-js.min.css";
import { uniqueId } from "lodash-es";
const _hoisted_1 = ["id"];
const _hoisted_2 = ["src"];
const __default__ = defineComponent({
name: "HlsPlayer"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
src: {},
options: {}
},
setup(__props) {
const props = __props;
const playerId = uniqueId("hls_");
watch(
() => props.src,
(n) => {
handleSrcChange(n);
}
);
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, () => {
nextTick(() => {
player.play();
});
});
}
function handleSrcChange(src) {
if (!src)
return;
player.src([
{
type: "application/x-mpegURL",
src
}
]);
player.play();
}
onBeforeUnmount(() => {
if (player) {
player.dispose();
player = null;
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("video", {
id: unref(playerId),
class: "video-js vjs-default-skin",
autoplay: "",
muted: "",
preload: "auto",
style: { "width": "100%", "height": "100%", "object-fit": "fill" }
}, [
createElementVNode("source", {
src: props.src,
type: "application/x-mpegURL",
style: { "width": "100%", "height": "100%" }
}, null, 8, _hoisted_2)
], 8, _hoisted_1);
};
}
});
export {
_sfc_main as default
};