videojs hls视频流播放器

需要用到的包

"video.js": "^8.6.1",
"videojs-contrib-hls": "^5.15.0",

给两个测试流地址

			<el-select
				v-model="hlsUrl"
				placeholder="请选择下拉选择下拉选择"
				clearable
				:style="{ width: '100%' }"
			>
				<el-option value="http://220.161.87.62:8800/hls/1/index.m3u8" />
				<el-option value="http://220.161.87.62:8800/hls/0/index.m3u8" />
			</el-select>

组件

<template>
	<video
		ref="myVideo"
		class="video-js vjs-default-skin"
		controls
		preload="auto"
		autoplay
		muted
		style="width: 100%; height: 100%"
	>
		<source :src="hlsUrl" type="application/x-mpegURL" />
	</video>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
export default {
	name: 'HlsPlayer',
	props: {
		hlsUrl: {
			type: String,
			default: ''
		}
	},
	watch: {
		async hlsUrl(url) {
			this.playUrl(url)
		}
	},
	data() {
		return {
			videoInfo: {},
			player: null
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.playerInit()
		})
	},
	methods: {
		playUrl(url) {
			try {
				this.player.src({
					src: url,
					type: 'application/x-mpegurl'
				})
				this.player.play()
			} catch (e) {
				console.log(e)
			}
		},
		playerInit() {
			this.player = videojs(
				this.$refs.myVideo,
				{
					bigPlayButton: true, // 显示播放按钮
					textTrackDisplay: false,
					posterImage: true,
					errorDisplay: false,
					controlBar: true // 显示控件
				},
				function () {
					try {
						this.play()
					} catch (e) {
						console.log(e)
					}
				}
			)
		},
		dispose() {
			try {
				this.player && this.player.dispose()
			} catch (e) {
				console.log(e)
			}
		}
	},

	beforeDestroy() {
		this.dispose()
	}
}
</script>