# larkplayer-vr

> larkplayer vr plugin

Latest version **0.0.2** (published 2018-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install larkplayer-vr
pnpm add larkplayer-vr
yarn add larkplayer-vr
bun add larkplayer-vr
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-05-03 |
| First published | 2018-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 543.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | 2222bnting |
| Maintainers | 2222bnting |
| Keywords | vr, 360 video, 360 image, larkplayer, javascript, player, html5 |

## Links

- npm: https://www.npmjs.com/package/larkplayer-vr
- Repository: https://github.com/dblate/larkplayer-vr
- Issues: https://github.com/dblate/larkplayer-vr/issues
- npm.io page: https://npm.io/package/larkplayer-vr

## Dependencies (3)

- [larkplayer](https://npm.io/package/larkplayer.md) ^1.4.5
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [kaleidoscopejs](https://npm.io/package/kaleidoscopejs.md) ^1.0.17

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2018-05-03
- 0.0.1 — 2018-05-03

## README

# larkplayer-vr

[larkplayer](https://github.com/dblate/larkplayer) 插件，用于播放 360º 全景视频

<img src="./examples/images/vr.gif"/>

* 基于 [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
<script type="text/javascript" src="https://unpkg.com/larkplayer-vr@latest/dist/larkplayer-vr.js"></script>
```

NPM

```shell
npm install larkplayer-vr
```

## 使用

```javascript
<!DOCTYPE html>
<html>
<head>
    <title>larkplayer vr test</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/larkplayer@latest/dist/larkplayer.css">

    <style type="text/css">
        body { margin: 0; padding: 0; }
    </style>
</head>
<body>
    <video id="video-el" src="./daban.mp4" loop></video>

    <script type="text/javascript" src="https://unpkg.com/larkplayer@latest/dist/larkplayer.js"></script>
    <script type="text/javascript" src="https://unpkg.com/larkplayer-vr@latest/dist/larkplayer-vr.js"></script>

    <script type="text/javascript">
        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();
    </script>
</body>
</html>
```

# 兼容性

__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

MIT

---
_Source: https://npm.io/package/larkplayer-vr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
