videojs hls视频流播放器

https://www.npmjs.com/package/hls-video-player?activeTab=readme

安装

npm install hls-video-player

pnpm install hls-video-player

yarn add hls-video-player

 

 

使用

全局注册

import Vue from 'vue'
import { HlsPlayer } from 'hls-video-player'

Vue.component('HlsPlayer',HlsPlayer)

局部组件使用

import { HlsPlayer } from 'hls-video-player'
export default {
    name: 'MyComponent',
    component:{
        HlsPlayer
    }
}

调用组件

<HlsPlayer
    play-url="http://220.161.87.62:8800/hls/1/index.m3u8"
  ></HlsPlayer>

 

 

 

 

整体实现思路如下：

 

需要用到的包

"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>

组件

<script lang="jsx">
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import { isNullOrEmpty } from '@utils/index'
export default {
	name: 'HlsPlayer',
	props: {
		hlsUrl: {
			type: String,
			default: ''
		}
	},
	watch: {
		hlsUrl: {
			handler(url) {
				this.srcUrl = url
				this.switchUrl(url)
			},
			immediate: true
		}
	},
	data() {
		return {
			srcUrl: '',
			player: null // 用来存储当前 video 对象
		}
	},
	mounted() {
		setTimeout(() => {
			this.initPlayer()
		}, 300)
	},
	methods: {
		// 初始化播放器
		initPlayer() {
			try {
				const context = this
				// const videoElement = document.querySelector('#' + this.myVideo) //
				const videoElement = this.$refs[this.myVideo]
				if (this.player) {
					context.startPlay()
					return
				}
				this.player = videojs(
					videoElement,
					{
						bigPlayButton: true, // 显示播放按钮
						textTrackDisplay: false,
						posterImage: true,
						errorDisplay: false,
						autoplay: 'muted',
						controlBar: true // 显示控件
					},
					() => {
						context.startPlay()
					}
				)
			} catch (e) {
				console.log(e)
			}
		},
		// 停止播放
		stopPlaying() {
			try {
				if (this.player) {
					this.player.pause()
				}
			} catch (e) {
				console.log(e)
			}
		},
		// 开始播放
		startPlay() {
			try {
				if (this.player) {
					this.player.play()
				}
			} catch (e) {
				console.log(e)
			}
		},
		// 切换播放url
		switchUrl(url) {
			try {
				if (this.player) {
					this.stopPlaying()
					if (!isNullOrEmpty(url)) {
						this.player.src({
							src: url,
							type: 'application/x-mpegURL'
						})
					}
				}
			} catch (e) {
				console.log(e)
			}
		},

		// 销毁组件
		destroy() {
			try {
				if (this.player) {
					this.player.dispose()
				}
			} catch (e) {
				console.log(e)
			} finally {
				this.player = null
			}
		}
	},
	beforeDestroy() {
		this.destroy()
	},
	render(createElement, context) {
		const { hlsUrl } = this.$props
		this.myVideo = `myVideo-${new Date().valueOf()}`
		return (
			<div style="width: 100%; height: 100%">
				<video
					id={this.myVideo}
					ref={this.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>
			</div>
		)
	}
}
</script>