百度智能小程序 VR 全景視頻-beta

2020-08-28 15:52 更新

vrvideo VR 全景-beta

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

使用方法

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

使用動(dòng)態(tài)庫的方法參見小程序文檔:使用動(dòng)態(tài)庫,在 app.json 中增添一項(xiàng) dynamicLib,與 pages 同級(jí)。

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

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

在每個(gè)使用到圖表組件的頁面,配置 *.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 中:

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

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

屬性名類型默認(rèn)值必填說明
srcString視頻的資源地址
initial-timeNumber指定視頻初始播放位置
controlsBooleantrue是否顯示默認(rèn)播放控件(播放/暫停按鈕、播放進(jìn)度、時(shí)間)
autoplayBooleanfalse是否自動(dòng)播放
loopBooleanfalse是否循環(huán)播放
mutedBooleanfalse是否靜音播放
posterString視頻封面的圖片網(wǎng)絡(luò)資源地址
show-progressBooleantrue若不設(shè)置,寬度大于 240 時(shí)才會(huì)顯示。
show-fullscreen-btnBooleantrue是否顯示全屏按鈕
show-play-btnBooleantrue是否顯示視頻底部控制欄的播放按鈕
show-center-play-btnBooleantrue是否顯示視頻中間的播放按鈕
show-no-wifi-tipBooleantrue非 wifi 環(huán)境下是否顯示繼續(xù)播放浮層 基礎(chǔ)庫 3.100.4 以上
vrVideoModeObject全景相關(guān)配置

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

vrVideoMode 參數(shù)說明

vrVideoMode 包含以下字段:

字段名類型默認(rèn)值必填說明
interactiveModeStringVRModeInteractiveMotionWithTouch交互模式,有效值見下表
displayModeStringVRModeDisplayNormal顯示模式,有效值見下表
projectionModeStringVRModeProjectionSphere投影模式,有效值見下表
fovnumber90初始 fov
minFovnumber動(dòng)態(tài)計(jì)算最小 fov
maxFovnumber動(dòng)態(tài)計(jì)算最大 fov
pinchEnablebooleantrue是否開啟手勢縮放

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

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

interactiveMode 有效值:

說明
VRModeInteractiveTouch拖拽
VRModeInteractiveMotion移動(dòng)
VRModeInteractiveMotionWithTouch移動(dòng)+拖拽

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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)