项目中需要实现播放m3u8类型的视频。h5的video标签不支持该类型的视频，所以使用了videojs

下载依赖

npm i --save video.js

引入

// main.js中引入样式
import 'video.js/dist/video-js.min.css'

// 视频播放页面
import videojs from 'video.js';

初步实现

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

export default{
	data(){
		return {
		 	player: null
	},
	menthods: {
		// 实例化播放器
		createVideo(){
			let options = {
	              autoplay: false,
	              controls: true,
	              sources: [
	                  {
	                      src: "@/src/video/20211216/jppXUfSi/1100kb/hls/index.m3u8",
	                  }
	              ]
	           }
			}
            this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
                console.log('onPlayerReady', this);
            })
        }
	},
	mounted() {
	   this.createVideo()
	},
}

至此，点击按钮视频可正常播放。就是按钮样式不理想

调整播放按钮样式

<style scoped lang="less">
	/deep/ .video-js .vjs-big-play-button{
        font-size: 0.5rem;
        width: 1.5rem;
        height: 0.8rem;
        line-height: 0.75rem;
        top: 1.6rem;
        left: 3rem;
    }
</style>

动态数据实现

export default{
	data(){
		return {
		 	player: null,
		 	curVideo: {
                 name: '',
                 score: '',
                 videoUrl: ''
             }
	},
	menthods: {
		// 获取页面数据
		getVideoInfo() {
            let params = {
                videoId: this.videoId
            }
            this.$api.index.getVideoDetails(params).then(res => {
                let {videoName,videoScore,videoUrl} = res.videoInfo
                this.curVideo = {
                    name:videoName,
                    score: videoScore,
                    videoUrl
                }
                // 视频
                this.$nextTick(()=>{
                   this.createVideo()
                })
            })
        },
		// 实例化播放器
		createVideo(){
			let options = {
	              autoplay: false,
	              controls: true,
	              sources: [
	                  {
	                      src: this.curVideo.videoUrl
	                  }
	              ]
	           }
			}
            this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
                console.log('onPlayerReady', this);
            })
        }
	},
	mounted() {
	   // this.createVideo()
	},
}

注意：下列操作会出现下图报错

1. 嵌套接口异步返回的数据时，要在接口数据回来后的nextTick中去实例化video
2. options下的sources数组中，配置了不正确的type
   
   视频播放就基本实现了，其他参数请参考：
   video.js官方文档