Player

viedo.js

原则上当然使用最广泛的优先啦 viedojsopen in new window

如未显示播放器请刷新页面

<template>
    <video
        class="video-js v--box vjs-default-skin"
        muted
        ref="videoPlayer"
        preload="auto"
    >
        <source :src="src" type="application/x-mpegURL" />
    </video>
</template>
<script>
import videojs from "video.js";
import lan from "./zh-CN";
import 'video.js/dist/video-js.css'
export default {
    name: "Mainitor",
    props: {
        src: {
            type: String,
            require: true,
        },
        poster: {
            type: String,
            default: null,
        },
        errorText: {
            type: String,
            default: "视频播放失败！",
        },
    },
    methods: {
        // 初始化监控
        init() {
            // 语言追加为中文
            videojs.addLanguage("zh-CN", lan);
            if (!this.$el) {
                this.$nextTick(() => {
                    this.player = videojs(this.$el, this.options, function onPlayerReady() {
                        this.play()
                    });
                });
            } else {
                this.player = videojs(this.$el, this.options, function onPlayerReady() {
                    this.play()
                });
            }
        },
    },
    mounted() {
        this.init();
    },
    watch: {
        src(val) {
            if (val) {
                this.player.src({
                    src: val,
                    type: "application/x-mpegURL",
                    withCredentials: true,
                });
            }
        },
    },
    data() {
        return {
            options: {
                bigPlayButton: true,
                textTrackDisplay: false,
                posterImg: false,
                errorDisplay: false,
                controls: true,
                // fluid: true, // 自适应宽高
                language: "zh-CN",
                // aspectRatio: "16:9",
                notSupportedMessage: this.error,
                hls: {
                    withCredentials: true,
                },
            },
            player: null,
        };
    },
    beforeDestroy() {
        // 销毁直播
        if (this.player) {
            this.player.dispose();
            this.player = null;
        }
    },
};
</script>

<style>
.v--box{
    width: 100%;
    height: 100%;
    object-fit: fill
}
.video-js .vjs-big-play-button {
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}
</style>

西瓜视频播放器

西瓜视频播放器（HTML5）open in new window一款带解析器、能节省流量的HTML5视频播放器

效果展示

点击查看代码

<template>
    <div :id="id"></div>
</template>
<script>
// import Player from 'xgplayer'
let num = 10
export default {
    name: 'player-xigua',
    data(){
        return {
            id: 'play' + num,
            player: null
        }
    },
    created(){
        ++num
    },
    mounted(){
        this.init()
    },
    beforeUnmount(){
        this.player?.destroy()
    },
    methods: {
        init(){
            this.player = new Player({
                id: this.id,
                url: `https://media.w3.org/2010/05/sintel/trailer.mp4`,
                fluid: true
            });
        }
    }
}
</script>

DPlayer

DPlayeropen in new window 这个貌似不怎么维护