larkplayer 插件，用于播放 360º 全景视频
- 基于 kaleidoscope 开发
- pc 端通过鼠标拖拽转动视频角度
- 移动端通过手势拖拽转或晃动手机改变视频角度
- mp4 在线示例
- hls 在线示例
CDN
<script type="text/javascript" src="https://unpkg.com/larkplayer-vr@latest/dist/larkplayer-vr.js"></script>NPM
npm install larkplayer-vr<!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="https://dblate.github.io/larkplayer-vr/examples/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.
larkplayer-vr is under MIT LICENSE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent