一、前言

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

官方文档 video.js

二、安装依赖

pnpm add video.js
or
npm install video.js
or 
yarn add video.js

三、在组件中使用

import videojs from "video.js";
import "video.js/dist/video-js.css";

1.接收参数

const props = defineProps({
    src: {
        type: String,
        required: false,
        default: "http://192.168.xx.xx:9922/hls/output.m3u8",
    },
    options: {
        type: Object,
        required: false,
        default: () => ({}),
    },
});

2.记录插件实例

const videoPlayer = ref(null);
const myPlayer = ref(null);

3.初始化视频插件实例，根据自身业务需求在这里配置插件。

const initPlayer = () => {
    const options = {
        // poster: "",//视频封面照片
        controls: true,
        autoplay: true, // autoplay和muted都设置为true，则视频自动播放
            width: "100%",
        height: "100%",
        loop: true,
        muted: true, // 是否静音
        fluid: false, // Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器
            sources: [
            {
                   src: props.src, // 播放视频地址
                type: "application/x-mpegURL", //播放m3u8需要设置的格式
            },
        ],
        controlBar: {
                remainingTimeDisplay: {
                     displayNegative: false,
            },
        },
        playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
    };
    myPlayer.value = videojs(
        videoPlayer.value,
        merge(options, props.options),
        () => {
            console.log("播放器准备好啦！");
            // addCustomButton();
        }
    );
};

四、根元素

<video ref="videoPlayer" muted="muted" class="video-js video" />

效果图

微信截图_20241008152749.png

五、完整代码

<script setup>
import { merge } from "lodash-es";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { onMounted, onUnmounted, ref, defineExpose } from "vue";

const props = defineProps({
    src: {
        type: String,
        required: false,
        default: "http://192.168.xx.xx:9922/hls/output.m3u8",
    },
    options: {
        type: Object,
        required: false,
        default: () => ({}),
    },
});

const videoPlayer = ref(null);
const myPlayer = ref(null);

const initPlayer = () => {
    const options = {
        // poster: "",//视频封面照片
        controls: true,
        autoplay: true, // autoplay和muted都设置为true，则视频自动播放
        width: "100%",
        height: "100%",
        loop: true,
        muted: true, // 是否静音
        fluid: false, // Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器
        sources: [
            {
                src: props.src, // 播放视频地址
                type: "application/x-mpegURL", //播放m3u8需要设置的格式
            },
        ],
        controlBar: {
            remainingTimeDisplay: {
                displayNegative: false,
            },
        },
        playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
    };
    myPlayer.value = videojs(
        videoPlayer.value,
        merge(options, props.options),
        () => {
            console.log("播放器准备好啦！");
            // addCustomButton();
        }
    );
};

const onSnapshotClick = () => {
    console.log("抓图");
};

const addCustomButton = () => {
    const controlBar = myPlayer.value.controlBar;
    const playToggle = controlBar.getChild("PlayToggle");

    // 创建一个新的按钮元素
    const customButton = document.createElement("button");
    customButton.classList.add("vjs-control", "vjs-button", "vjs-icon-snapshot"); // 使用你自己的类名或图标
    customButton.setAttribute("type", "button");
    customButton.setAttribute("aria-live", "polite"); // 无障碍支持
    customButton.setAttribute("tabindex", 0);
    customButton.textContent = "抓图"; // 或者使用图标

    // 将自定义按钮添加到控制条中，例如放在播放/暂停按钮旁边
    controlBar.el().insertBefore(customButton, playToggle.el().nextSibling);

    // 添加点击事件监听器
    customButton.addEventListener("click", onSnapshotClick);

    // 为了Vue能够正确管理这个DOM元素，我们可以将其存储在Vue实例的某个属性中（可选）
    // 但在这个例子中，我们直接通过addEventListener来处理事件
};

onMounted(() => {
    initPlayer();
});
// 页面销毁时，销毁Video播放组件
onUnmounted(() => {
    if (myPlayer.value) {
        myPlayer.value.dispose();
    }
});

defineExpose({
    myPlayer,
});
script>

<template>
    <video ref="videoPlayer" muted="muted" class="video-js video" />
template>

<style lang="less" scoped>
.video {
    width: 100%;
    height: 100%;
}
video.vjs-tech {
    object-fit: fill;
}
style>