npm install --save-dev video.js
我的代码:
// main.js
import "video.js/dist/video-js.css";
// index.vue
<template>
<div style="">
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
</div>
</template>
<script setup>
import "video.js/dist/video-js.css";
import { toRefs } from "vue";
const props = defineProps(["playUrl"]);
const { playUrl } = toRefs(props);
console.info(playUrl.value, "ppp");
const playerOptions = {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
autoplay: true,
muted: false,
loop: false,
preload: "auto",
language: "zh-CN",
aspectRatio: "4:3",
fluid: true,
sources: [
{
type: "",
src: playUrl.value,
},
],
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controls: true, // 添加这一行
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: true,
fullscreenToggle: true, // 全屏播放
playToggle: true, // 播放/暂停
volumePanel: true, // 音量控制
qualitySelector: true, // 清晰度选择
},
qualitySelector: {
default: "high", // 默认的清晰度
options: [
{ value: "high", label: "高清" },
{ value: "ultra", label: "超清" },
],
},
};
</script>
<style></style>