Skip to content

Latest commit

 

History

History
99 lines (76 loc) · 3.01 KB

README.md

File metadata and controls

99 lines (76 loc) · 3.01 KB
Raw

larkplayer-vr

larkplayer 插件，用于播放 360º 全景视频

下载

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.

License

larkplayer-vr is under MIT LICENSE