vrvideo VR 全景 -beta

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

使用方法

1. 在项目中引用动态库

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

  • JSON
  1. "dynamicLib": {
  2. "myDynamicLib": {
  3. "provider": "vrvideo"
  4. }
  5. },

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

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

  • JSON
  1. {
  2. "usingSwanComponents": {
  3. "vrvideo": "dynamicLib://myDynamicLib/vrvideo"
  4. }
  5. }

3. 编写*.swan文件

  • SWAN
  1. <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 参数外,其他参数与普通视频类似,可参考 video 组件

vrVideoMode 参数说明

vrVideoMode 包含以下字段:

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

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

  • JS
  1. {
  2. interactiveMode: 'VRModeInteractiveMotionWithTouch',
  3. displayMode: 'VRModeDisplayNormal',
  4. projectionMode: 'VRModeProjectionSphere',
  5. fov: 90,
  6. pinchEnable: true
  7. }

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 上下立体