video-js 的使用

像我这样优秀的人~

已于 2024-05-09 16:48:42 修改

阅读量128

点赞数 3

分类专栏：提高学习文章标签： javascript 前端 html

于 2024-05-09 16:44:18 首次发布

本文链接：https://blog.csdn.net/vdjskshvd/article/details/138620488

版权

提高学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

官网：Getting Started with Video.js - Video.js: The Player Framework | Video.js

中文版：videojs中文网|vidojs中文教程|videojs中文手册|video.js中文帮助文档

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>