https://github.com/dblate/larkplayer-vr
A 360º video viewer plugin for larkplayer
https://github.com/dblate/larkplayer-vr
360-video 360-view larkplayer larkplayer-vr vr
Last synced: about 1 year ago
JSON representation
A 360º video viewer plugin for larkplayer
- Host: GitHub
- URL: https://github.com/dblate/larkplayer-vr
- Owner: dblate
- License: mit
- Created: 2018-04-27T06:09:20.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-03T07:16:52.000Z (about 8 years ago)
- Last Synced: 2025-04-24T01:12:03.033Z (about 1 year ago)
- Topics: 360-video, 360-view, larkplayer, larkplayer-vr, vr
- Language: JavaScript
- Homepage:
- Size: 59.8 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# larkplayer-vr
[larkplayer](https://github.com/dblate/larkplayer) 插件，用于播放 360º 全景视频
* 基于 [kaleidoscope](https://github.com/thiagopnts/kaleidoscope) 开发
* pc 端通过鼠标拖拽转动视频角度
* 移动端通过手势拖拽转或晃动手机改变视频角度
* [mp4 在线示例](https://dblate.github.io/larkplayer-vr/examples/mp4)
* [hls 在线示例](https://dblate.github.io/larkplayer-vr/examples/hls)
## 下载
CDN
```javascript
```
NPM
```shell
npm install larkplayer-vr
```
## 使用
```javascript
larkplayer vr test
body { margin: 0; padding: 0; }
var width = Math.min(document.body.clientWidth, 640);
var options = {};
var player = larkplayer('video-el', {
width: width,
height: width * 9 / 16,
plugin: {
/**
* larkplayer-vr 配置
*
* @param {Object=} options 配置项，可选
* @param {number} options.height canvas 高度，默认为播放器高度
* @param {number} options.width canvas 宽度，默认为播放器宽度
* @param {number} options.initialYaw 视频初始化时的角度，比如 45, 90, 180
* @param {Function} options.onError 出错时的回调函数
* @param {Function} options.onDragStart 拖动开始时的回调函数
* @param {Function} options.onDragStop 拖动结束时的回调函数
* @param {boolean} options.verticalPanning 禁用垂直平移，默认 false
*/
vr: options
}
});
// 将镜头恢复到初始位置
// player.plugin.vr.centralize();
// 销毁插件
// player.plugin.vr.dispose();
```
# 兼容性
__pc 端__
* chrome
* safari
* firefox
* edge
* ie11
__移动端__
* chrome
* safari
360 videos doesn't work in Safari, IE 11, Microsoft Edge, Android and iOS if the video is served from a different domain, due some [CORS implementation bugs](https://bugs.webkit.org/show_bug.cgi?id=135379).
# License
larkplayer-vr is under [MIT LICENSE]('./LICENSE)