安装依赖

"dependencies": {  
    "videojs-contrib-hls": "^5.15.0", 
    "vue-video-player": "^5.0.2"
},

使用方式

<template>  
    <div id="app">  
        <video-player  
            class="video-player vjs-custom-skin"  
            :options="playerOptions"  
        ></video-player>  
    </div>  
</template>  
  
<script>  
import 'videojs-contrib-hls'  // m3u8 必需，普通mp4可不用
import {videoPlayer} from "vue-video-player";  
import "video.js/dist/video-js.css";  // 样式文件
  
export default {  
    components: {  
        videoPlayer,  
    },  
    data() {  
        return {  
            // 最简配置，详细配置见文章末尾
            playerOptions: {  
                sources: [  
                    {  
                        src: 'http://192.168.1.166:83/openUrl/iKqkaNW/live.m3u8',  
                    },  
                ],  
            }  
        }  
    }  
}  
</script>

playerOptions 配置文档

GitHub

demo代码地址

码云