Negatory. Postpone Mission.

    larkplayer-vr

    0.0.2 • Public • Published

    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="./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.

    License

    MIT

    Install

    npm i larkplayer-vr

    DownloadsWeekly Downloads

    4

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    557 kB

    Total Files

    7

    Last publish

    Collaborators

    • 2222bnting
    • huangyan09