hls-video-player

vue播放hls视频流的播放器组件( 内部集成了videojs )

install

npm install hls-video-player

or

yarn add hls-video-player

全局注册调用 global registry component

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

Vue.component('HlsPlayer',HlsPlayer)

vue组件内部调用 in vue component

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

测试地址

http://220.161.87.62:8800/hls/1/index.m3u8
http://220.161.87.62:8800/hls/0/index.m3u8

播放hls流

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

播放mp4

  <HlsPlayer
    play-url="http://vjs.zencdn.net/v/oceans.mp4"
    video-type="video/mp4"
  ></HlsPlayer>

萤石云flv播放支持H264 H265

官方API手册链接 https://open.ys7.com/help/1852

注意： 暂不提供CDN地址， decoder静态资源需要放置在自己的public文件夹下（node_modules/ezuikit-flv下 decoder.wasm 和 decoder.js 文件， 这两个文件需要在同一个文件夹下）

注意： 暂不提供CDN地址，decoder静态资源需要放置在自己的public文件夹下（node_modules/ezuikit-flv下 decoder.wasm 和 decoder.js 文件， 这两个文件需要在同一个文件夹下）

注意： 暂不提供CDN地址，decoder静态资源需要放置在自己的public文件夹下（node_modules/ezuikit-flv下 decoder.wasm 和 decoder.js 文件， 这两个文件需要在同一个文件夹下）

import { EzuikitFlvPlayer } from 'hls-video-player'

export default {
	name: 'Index',
	components: {
		EzuikitFlvPlayer
	},
	computed: {
		playUrl() {
			// return `https://open.ys7.com/v3/openlive/L19580942_1_1.m3u8?expire=1757815420&id=756817781770788864&t=933e82356dcb650aaf5526f3dfbcd52cb89d1fe5421350ce46710e522d5b18dc&ev=100`
			return `https://rtmp01open.ys7.com:9188/v3/openlive/L19580942_1_1.flv?expire=1757817010&id=756824453853216768&t=1ab171ac6b5964c913fccc0e28c1c1b6084477965c6f4cf5b1301ab7516bf013&ev=100`
		}
	}
}
<template>
	<ezuikit-flv-player :play-url="playUrl" />
</template>

<style></style>