vrvideo 动态库-Beta

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

使用方法

1. 在项目中引用动态库

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

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

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

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

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

3. 编写 *.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参数外,其他参数与普通视频类似,可参考vide组件vrvideo 动态库-Beta - 图2

vrVideoMode参数说明

vrVideoMode包含以下字段:

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

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

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