W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
vrvideo 動(dòng)態(tài)庫提供了在小程序中播放全景視頻的方法。
使用動(dòng)態(tài)庫的方法參見小程序文檔:使用動(dòng)態(tài)庫,在 app.json 中增添一項(xiàng) dynamicLib,與 pages 同級(jí)。
"dynamicLib": {
"myDynamicLib": {
"provider": "vrvideo"
}
},
在每個(gè)使用到圖表組件的頁面,配置 *.json 文件如:
{
"usingSwanComponents": {
"vrvideo": "dynamicLib://myDynamicLib/vrvideo"
}
}
<vrvideo src="{{ src }}" style="width: 100%; height: 100%; display: block"></vrvideo>
這是一種最基本的配置方式。style 也可以在 *.css 中聲明,需要保證 <vrvideo> 是有寬度和高度的。options 在 *.js 中綁定到頁面的 data 中:
<vrvideo> 上支持的屬性包括:
屬性名 | 類型 | 默認(rèn)值 | 必填 | 說明 |
---|---|---|---|---|
src | String | 是 | 視頻的資源地址 | |
initial-time | Number | 否 | 指定視頻初始播放位置 | |
controls | Boolean | true | 否 | 是否顯示默認(rèn)播放控件(播放/暫停按鈕、播放進(jìn)度、時(shí)間) |
autoplay | Boolean | false | 否 | 是否自動(dòng)播放 |
loop | Boolean | false | 否 | 是否循環(huán)播放 |
muted | Boolean | false | 否 | 是否靜音播放 |
poster | String | 否 | 視頻封面的圖片網(wǎng)絡(luò)資源地址 | |
show-progress | Boolean | true | 否 | 若不設(shè)置,寬度大于 240 時(shí)才會(huì)顯示。 |
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ù)與普通視頻類似,可參考vide 組件。
vrVideoMode 包含以下字段:
字段名 | 類型 | 默認(rèn)值 | 必填 | 說明 |
---|---|---|---|---|
interactiveMode | String | VRModeInteractiveMotionWithTouch | 否 | 交互模式,有效值見下表 |
displayMode | String | VRModeDisplayNormal | 否 | 顯示模式,有效值見下表 |
projectionMode | String | VRModeProjectionSphere | 否 | 投影模式,有效值見下表 |
fov | number | 90 | 否 | 初始 fov |
minFov | number | 動(dòng)態(tài)計(jì)算 | 否 | 最小 fov |
maxFov | number | 動(dòng)態(tài)計(jì)算 | 否 | 最大 fov |
pinchEnable | boolean | true | 否 | 是否開啟手勢縮放 |
如果不填寫,則為默認(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 上下立體 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: