https://github.com/zhusaidong/Html5VideoPlayer

Html5版VideoPlayer
https://github.com/zhusaidong/Html5VideoPlayer

html5-video-player

Last synced: about 2 months ago
JSON representation

Html5版VideoPlayer

• Host: GitHub
• URL: https://github.com/zhusaidong/Html5VideoPlayer
• Owner: zhusaidong
• Created: 2016-10-10T04:24:21.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-09T09:14:31.000Z (about 7 years ago)
• Last Synced: 2024-07-01T12:40:56.613Z (3 months ago)
• Topics: html5-video-player
• Language: JavaScript
• Size: 188 KB
• Stars: 6
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Html5版VideoPlayer

---

### logo

![logo](logo.png)

---

支持 双击全屏

支持 左右键控制播放进度

支持 开关灯控制

支持 上下键控制音量

支持 空格键控制视频播放

### 说明

---

> 配置

>> `isUseBlob` 是否使用blob

>> `vWidth` 控件宽

>> `vHeight` 控件高

>> `vSrc` 视频地址

>> `vZIndex` z-index,默认100

>> `vShowLightSwitch` 是否显示开关灯按钮

>> `vPoster` 视频封面

> 回调

>> `GetInfo` 获取信息

>> `GetVolume` 获取音量

>> `GetCurrentTime` 获取当前播放的时间

> 返回对象

>> `SetCurrentTime` 设置当前播放的时间

>> `SetVolume` 设置音量

>> `SetMuted` 设置静音

>> `SetPause` 设置暂停

>> `SetPlay` 设置播放

### 用法

---

* 引入js 

```javascript

	

```

* 设置配置

```javascript

	var html5VideoPlayer = new Html5VideoPlayer(

		{

			vSrc:"视频地址",

		});

```

* 设置回调

```javascript

	html5VideoPlayer.CallBack(

		{

			//回调方法

		});

```

* Create控件

```javascript

	hvp = html5VideoPlayer.Create('.videoClass');

	//控件方法

	hvp.SetCurrentTime(10);

	hvp.SetVolume(0.5);

```

* demo

```javascript

	var html5VideoPlayer = new Html5VideoPlayer(

		{

			isUseBlob:true,

			vZIndex:100,

			vWidth:600,

			vHeight:300,

			vSrc:"http://xxxx.com/xxx.mp4",

		});

	var hvp = null;

	html5VideoPlayer.CallBack(

		{

			//回调方法的this是一个回调返回对象

			play:function()

			{

				//回调获取信息demo:播放视频时获取音量

				console.log(this.GetVolume());

				//联动demo:播放视频时静音

				hvp.SetMuted();

			},

		});

	hvp = html5VideoPlayer.Create('.videoClass');

	hvp.SetCurrentTime(10);

	hvp.SetVolume(0.5);

	//hvp.SetMuted();

```

[点击查看demo](http://zhusaidong.github.io/Html5VideoPlayer_demo)

* 截图

![screenshot](screenshot.png)

### 更新

---

2016-10-14 添加 项目logo

2016-10-14 添加 上下键控制音量

2016-10-14 添加 视频封面

2016-10-14 添加 空格键控制视频播放

2017-04-24 添加 使用blob功能

### TODO

---

自定义播放控制器

### 其它

---

[email protected]