在vue中使用video.js播放m3u8视频

1、安装依赖

npm i video.js videojs-contrib-hls mux.js

2、在main.js中注册组件

import "video.js/dist/video-js.css"; 
import hls from "videojs-contrib-hls";
Vue.use(hls);

3、使用组件

<template>
    <div class="test-videojs">
        <video id="videoPlayer" class="video-js" muted></video>
    </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
export default {
    data() {
        return {
            nowPlayVideoUrl: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
        };
    },
    mounted() {
        this.initVideo(this.nowPlayVideoUrl);
    },
    methods: {
        initVideo(nowPlayVideoUrl) {
            // 这些options属性也可直接设置在video标签上，见 muted
            let options = {
                autoplay: true, // 设置自动播放
                controls: true, // 显示播放的控件
                sources: [
                    // 注意，如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
                    {
                        src: nowPlayVideoUrl,
                        // type: "application/x-mpegURL" 
                    }
                ]
            };
            // videojs的第一个参数表示的是，文档中video的id
            const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {});
        }
    }
};
</script>
<style lang="less">
#videoPlayer {
    width: 500px;
    height: 300px;
    margin: 50px auto;
}
</style>