阅读(4669) (9)

百度智能小程序 VR 全景视频-beta

2020-08-11 17:43:11 更新

vrvideo VR 全景-beta

vrvideo 动态库提供了在小程序中播放全景视频的方法。

使用方法

1. 在项目中引用动态库

使用动态库的方法参见小程序文档:使用动态库,在 app.json 中增添一项 dynamicLib,与 pages 同级。

"dynamicLib": {
    "myDynamicLib": {
        "provider": "vrvideo"
    }
},

2. 在使用到组件的页面配置动态库

在每个使用到图表组件的页面,配置 *.json 文件如:

{
    "usingSwanComponents": {
        "vrvideo": "dynamicLib://myDynamicLib/vrvideo"
    }
}

3. 编写 *.swan 文件

<vrvideo src="{{ src }}" style="width: 100%; height: 100%; display: block"></vrvideo>

这是一种最基本的配置方式。style 也可以在 *.css 中声明,需要保证 <vrvideo> 是有宽度和高度的。options 在 *.js 中绑定到页面的 data 中:

动态库属性列表

<vrvideo> 上支持的属性包括:

属性名类型默认值必填说明
srcString视频的资源地址
initial-timeNumber指定视频初始播放位置
controlsBooleantrue是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
autoplayBooleanfalse是否自动播放
loopBooleanfalse是否循环播放
mutedBooleanfalse是否静音播放
posterString视频封面的图片网络资源地址
show-progressBooleantrue若不设置,宽度大于 240 时才会显示。
show-fullscreen-btnBooleantrue是否显示全屏按钮
show-play-btnBooleantrue是否显示视频底部控制栏的播放按钮
show-center-play-btnBooleantrue是否显示视频中间的播放按钮
show-no-wifi-tipBooleantrue非 wifi 环境下是否显示继续播放浮层 基础库 3.100.4 以上
vrVideoModeObject全景相关配置

除 vrVideoMode 参数外,其他参数与普通视频类似,可参考vide 组件

vrVideoMode 参数说明

vrVideoMode 包含以下字段:

字段名类型默认值必填说明
interactiveModeStringVRModeInteractiveMotionWithTouch交互模式,有效值见下表
displayModeStringVRModeDisplayNormal显示模式,有效值见下表
projectionModeStringVRModeProjectionSphere投影模式,有效值见下表
fovnumber90初始 fov
minFovnumber动态计算最小 fov
maxFovnumber动态计算最大 fov
pinchEnablebooleantrue是否开启手势缩放

如果不填写,则为默认值,即

{
    interactiveMode: 'VRModeInteractiveMotionWithTouch',
    displayMode: 'VRModeDisplayNormal',
    projectionMode: 'VRModeProjectionSphere',
    fov: 90,
    pinchEnable: true
}

interactiveMode 有效值:

说明
VRModeInteractiveTouch拖拽
VRModeInteractiveMotion移动
VRModeInteractiveMotionWithTouch移动+拖拽

displayMode 有效值:

说明
VRModeDisplayNormal单目普通模式
VRModeDisplayGlass双目眼镜模式

projectionMode 有效值:

说明
VRModeProjectionSphere球形
VRModeProjectionDome180穹形 180 度
VRModeProjectionDome230穹形 230 度
VRModeProjectionDome180Upper穹形 180 度 UPPER
VRModeProjectionDome230Upper穹形 230 度 UPPER
VRModeProjectionStereoSphereHorizontal球形左右立体
VRModeProjectionStereoSphereVertical球形上下立体
VRModeProjectionPlaneFit平面 FIT
VRModeProjectionPlaneCrop平面 CROP
VRModeProjectionPlaneFull平面 FULL
VRModeProjectionStereoPlaneFitHorizontal平面 FIT 左右立体
VRModeProjectionStereoPlaneFitVertical平面 FIT 上下立体