• vrvideo VR 全景 -beta
  • 使用方法
    • 1. 在項(xiàng)目中引用動態(tài)庫
    • 2. 在使用到組件的頁面配置動態(tài)庫
    • 3. 編寫*.swan文件
  • 動態(tài)庫屬性列表
    • vrVideoMode 參數(shù)說明

vrvideo VR 全景 -beta

vrvideo 動態(tài)庫提供了在小程序中播放全景視頻的方法。

成都創(chuàng)新互聯(lián)：從2013年成立為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù)，為成百上千家公司企業(yè)提供了專業(yè)的成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)和網(wǎng)站推廣服務(wù)， 定制網(wǎng)站開發(fā)由設(shè)計(jì)師親自精心設(shè)計(jì)，設(shè)計(jì)的效果完全按照客戶的要求，并適當(dāng)?shù)奶岢龊侠淼慕ㄗh，擁有的視覺效果，策劃師分析客戶的同行競爭對手，根據(jù)客戶的實(shí)際情況給出合理的網(wǎng)站構(gòu)架，制作客戶同行業(yè)具有領(lǐng)先地位的。

使用方法

1. 在項(xiàng)目中引用動態(tài)庫

使用動態(tài)庫的方法參見使用動態(tài)庫，在app.json中增添一項(xiàng)dynamicLib，與pages同級。

• JSON

 
 
 

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

2. 在使用到組件的頁面配置動態(tài)庫

在每個(gè)使用到圖表組件的頁面，配置*.json文件如：

• JSON

 
 
 

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

3. 編寫*.swan文件

• SWAN

這是一種最基本的配置方式。style也可以在*.css中聲明，需要保證是有寬度和高度的。options在*.js中綁定到頁面的 data 中：

動態(tài)庫屬性列表

上支持的屬性包括：

屬性名	類型	默認(rèn)值	必填	說明
src	String		是	視頻的資源地址
initial-time	Number		否	指定視頻初始播放位置
controls	Boolean	true	否	是否顯示默認(rèn)播放控件（播放/暫停按鈕、播放進(jìn)度、時(shí)間）
autoplay	Boolean	false	否	是否自動播放
loop	Boolean	false	否	是否循環(huán)播放
muted	Boolean	false	否	是否靜音播放
poster	String		否	視頻封面的圖片網(wǎng)絡(luò)資源地址
show-progress	Boolean	true	否	若不設(shè)置，寬度大于 240 時(shí)才會顯示
show-fullscreen-btn	Boolean	true	否	是否顯示全屏按鈕
show-play-btn	Boolean	true	否	是否顯示視頻底部控制欄的播放按鈕
show-center-play-btn	Boolean	true	否	是否顯示視頻中間的播放按鈕
show-no-wifi-tip	Boolean	true	否	非 wifi 環(huán)境下是否顯示繼續(xù)播放浮層 基礎(chǔ)庫 3.100.4 以上
vrVideoMode	Object		否	全景相關(guān)配置

除 vrVideoMode 參數(shù)外，其他參數(shù)與普通視頻類似，可參考 video 組件。

vrVideoMode 參數(shù)說明

vrVideoMode 包含以下字段：

字段名	類型	默認(rèn)值	必填	說明
interactiveMode	String	VRModeInteractiveMotionWithTouch	否	交互模式，有效值見下表
displayMode	String	VRModeDisplayNormal	否	顯示模式，有效值見下表
projectionMode	String	VRModeProjectionSphere	否	投影模式，有效值見下表
fov	Number	90	否	初始 fov
minFov	Number	動態(tài)計(jì)算	否	最小 fov
maxFov	Number	動態(tài)計(jì)算	否	最大 fov
pinchEnable	boolean	true	否	是否開啟手勢縮放

如果不填寫，則為默認(rèn)值，即

• JS

 
 
 

  
  
  
{
  
  
  
 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 上下立體

分享文章：創(chuàng)新互聯(lián)百度小程序教程：vrvideoVR全景-beta
路徑分享：http://m.5511xx.com/article/ccojdcg.html