vue-bplayer

介绍

基于vue2.X、百度播放器扩展的播放器

软件架构

软件架构说明

安装教程

   npm i vue-bplayer -save

使用说明

	import player from 'vue-bplayer'

props

	playStyle: {
		// 播放器样式：内联样式
		type: String,
		default: ''
	},
	ak: {
		// 授权ak
		type: String,
		default: '69eeea78ae7e43d1ab4ad010565d9c9d'
	},
	aliplayerSdkPath: {
		// 版本 sdk
		type: String,
		default: 'https://fjycjd_admin.gitee.io/cdn/bplayer/cyberplayer.js'
	},
	source: {
		type: String,
		default: 'http://hls01open.ys7.com/openlive/b374fade33b84c34822e8d54cb80d34b.m3u8'
	},
	width: {
		// 播放器宽度，可形如‘100%’或者‘100px’
		type: String,
		default: '100%'
	},
	height: {
		// 播放器高度，可形如‘100%’或者‘100’
		type: String,
		default: '320'
	},
	autoStart: {
		// 建议 false : 一些浏览器这样会报错
		// 播放器是否自动播放
		type: Boolean,
		default: false
	},
	repeat: {
		// 设置视频的重复播放模式，重复模式分为：
		// 1.false:无重复；
		// 2.true:重复播放
		type: Boolean,
		default: false
	},
	image: {
		// 设置媒体流的预览图
		type: String,
		default: ''
	},
	volume: {
		// 设置播放器音量大小，范围（0 - 100）
		type: Number,
		default: 100
	},
	controls: {
		// 设置播放器控制条的显示模式，显示模式分为：
		// 1.none:不显示；
		// 2.over:悬浮（鼠标无操作时自动隐藏）
		type: String,
		default: 'over'
	},
	reconnecttime: {
		// 设置重连时间,单位s
		type: Number,
		default: 5
	},
	stretching: {
		// 设置播放器缩放方式，缩放方式分为：
		// 1.none:不缩放；
		// 2.uniform:添加黑边缩放；
		// 3. exactfit:改变宽高比缩到最大；
		// 4.fill:剪切并缩放到最大（默认方式为uniform）
		type: String,
		default: 'exactfit'
	},
	marquee: {
		type: Object,
		default: () => {
			return {
				show: false, // 显示与否，默认不显示
				text: 'WELCOME', // 跑马灯文字
				fontSize: 20, //字体大小
				color: '#ffffff' //字体颜色
			};
		}
	},
	watermark: {
		// 水印
		type: Object,
		default: () => {
			return {
				isShow: true,
				text: 'hhhh',
				width: 400,
				height: 200,
				angle: 35,
				size: 16,
				color: 'rgba(255,255,255,.3)',
				position: 'top right',
				repeat: 'repeat' // 如果设置了repeat则position无效
			};
		}
	}

API

> 1、loadPlayer(url);  // 加载播放器 URL可选，不填选择props 中的source

> 2、play();  // 播放

> 3、pause(); // 暂停

> 4、stop(); // 停止播放当前媒体内容

> 5、seek(time);  // 跳转到某个时刻进行播放 【录播】，单位秒

> 6、getPosition(); // 获取当前播放的媒体文件的播放位置。

> 7、getDuration(); // 获取视频总时长，返回的单位为秒

> 8、getVolume(); // 获取当前的音量，返回值为0-1的实数ios和部分android会失效

> 9、setVolume(); // 设置音量，vol为0-1的实数，ios和部分android会失效

> 10、getStatus(); // 获取播放器状态

> 11、getMute(); // 获取当前播放器声音是否打开。

> 12、setMute(flag); //设置当前播放器的声音开关。

> 13、getWidth(); // 获取当前播放器窗口宽度。Number

> 14、getHeight(); // 获取当前播放器显示窗口高度。Number

> 15、getFullscreen(); // 取当前播放器是否处于全屏状态。

> 16、setFullscreen(flag); // 置当前播放器是否全屏。

> 17、resize(w, h); // 获调整播放器大小。

> 18、dispose(); // 销毁播放器

参考

百度播放器

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

码云特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. 码云官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
4. GVP 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 https://gitee.com/help
6. 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/