需要用到的包

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

 

给两个测试流地址

<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

组件

<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.