zx-player(作者:初志鑫[email protected])

注意事项

只能用于Vue CLI项目

鸣谢

努力了这么久,终于成了一名合格的代码搬运工,我只是有幸站在了巨人的肩膀上,感谢自己,感谢巨人...

实现功能

1.实现了blob加密video的src
2.实现了flv的html5播放
3.实现了hls(m3u8)的html5播放

商务合作与赞赏

邮箱  [email protected]
QQ 1204505056

如果你觉得这个项目帮助到了你，你可以赞赏一下作者:

安装方法

cnpm i -S zx-player

mp4 组件 main.js 全局引入

import Vue from 'vue'
import {mp4} from 'zx-player'
Vue.component('byui-player-mp4', mp4)

hls(m3u8)组件 main.js 全局引入

import Vue from 'vue'
import {hls} from 'zx-player'
Vue.component('byui-player-hls', hls)

flv 组件 main.js 全局引入

import Vue from 'vue'
import {flv} from 'zx-player'
Vue.component('byui-player-flv', flv)

template 完整示例(不要忘记改成自己的视频路径)

<template>
	<div id="app">
		<byui-player-mp4 :config="config1" @player="Player1 = $event" />
		<byui-player-hls :config="config2" @player="Player2 = $event" />
		<byui-player-flv :config="config3" @player="Player3 = $event" />
	</div>
</template>

<script>
export default {
	name: 'app',
	data() {
		return {
			config1: {
				id: 'mse1',
				url: '/video/boyun.mp4'
			},
			Player1: null,
			config2: {
				id: 'mse2',
				url: '/video/boyun.m3u8'
			},
			Player2: null,
			config3: {
				id: 'mse3',
				url: '/video/boyun.flv'
			},
			Player3: null
		};
	}
};
</script>

<style>
body {
	margin: 0;
	padding: 0;
}
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
</style>