新聞中心
- page-video 短視頻詳情頁(yè)模板
- 示例
- 頁(yè)面內(nèi)容
- 短視頻詳情頁(yè)
- 評(píng)論詳情頁(yè)
- 字段說(shuō)明
- 返回示例說(shuō)明
- longVideoInfo 長(zhǎng)視頻信息說(shuō)明
- playVideoList 連播列表說(shuō)明
- operateInfo 運(yùn)營(yíng)位信息說(shuō)明
- npm 依賴
- Bug & Tip
page-video 短視頻詳情頁(yè)模板
從開(kāi)發(fā)者工具 v2.25.1-rc 版本、基礎(chǔ)庫(kù)版本 3.190.1 版本開(kāi)始支持。
納雍網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),納雍網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為納雍近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的納雍做網(wǎng)站的公司定做!
解釋:本模版適用于快速搭建視頻片花、預(yù)告、短視頻等視頻類詳情頁(yè)。模版在保證用戶交互體驗(yàn)的基礎(chǔ)上,提供了不同模塊,配合使用加入書架、預(yù)約和引導(dǎo)關(guān)注組件,實(shí)現(xiàn)興趣激發(fā),充分發(fā)揮短視頻帶長(zhǎng)視頻消費(fèi)的種草價(jià)值,拉動(dòng)二次重訪。
示例
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度APP掃碼
頁(yè)面內(nèi)容
模板包含兩個(gè)頁(yè)面:短視頻詳情頁(yè)、評(píng)論詳情頁(yè)。
短視頻詳情頁(yè)
默認(rèn)配置為導(dǎo)航欄、視頻播放器、短視頻標(biāo)題及輔助信息區(qū)、長(zhǎng)視頻信息區(qū)一站式互動(dòng)區(qū)等模塊。
包含導(dǎo)航欄、引導(dǎo)關(guān)注組件、視頻播放器(含自動(dòng)連播邏輯)、短視頻標(biāo)題及輔助信息區(qū)、長(zhǎng)視頻信息區(qū)、活動(dòng)運(yùn)營(yíng)位、百青藤?gòu)V告區(qū)、推薦短視頻區(qū)和一站式互動(dòng)區(qū)等模塊,分為默認(rèn)配置模塊和可選配置模塊。開(kāi)發(fā)者可根據(jù)自身業(yè)務(wù)形態(tài)選擇合適的模塊進(jìn)行自定義配置。
頁(yè)面路徑:pages/index
代碼示例
-
獲取頁(yè)面數(shù)據(jù)??蓪?getIndexData 替換以發(fā)送網(wǎng)絡(luò)請(qǐng)求獲取真實(shí)數(shù)據(jù)。
-
JS
Page({...attr: {// 請(qǐng)求的 url,請(qǐng)?zhí)鎿Q為真實(shí)的請(qǐng)求地址,該值僅做為示例,值為 defaultData 為默認(rèn)配置示例,其他值為全配置示例url: '/index',// onLoad參數(shù)options: {}},onLoad(options) {this.getPageData();...},getPageData() {const url = this.attr.url;// 模擬請(qǐng)求,請(qǐng)進(jìn)行替換getIndexData({url}).then(res => {res.playVideoList.forEach(item => {// 格式化播放數(shù)量item.playNum = this.formatPlayNum(item.playNum);item.nextInfo = false;// 過(guò)濾出長(zhǎng)視頻if (item.type === 1) {this.attr.feedList.push(item);}});let {showFeed,feedMore,feedShowList,toolbarConfig} = this.data;let feedList = this.attr.feedList;if (!feedList.length) {showFeed = false;}// feed 少于5條不展示查看更多if (feedList.length <= 5) {feedMore = false;feedShowList = feedList;} else {// 多于5條時(shí),先展示前5條feedShowList = feedList.slice(0, 5);}toolbarConfig.title = res.longVideoInfo.name;res.longVideoInfo = this.formatVideoInfo(res.longVideoInfo);this.setData({playVideoList: res.playVideoList,feedShowList: feedShowList,longVideoInfo: res.longVideoInfo,operateInfo: res.operateInfo,feedMore: feedMore,toolbarConfig: toolbarConfig,showFeed: showFeed,commentParam: {// 文章的唯一標(biāo)識(shí)snid: this.attr.options.snid,path: `/@smt-ui-template-page-video/pages/index/index?snid=${this.attr.options.snid}`,title: res.longVideoInfo.name},loading: false,// code 0: 正常獲取數(shù)據(jù) 99999: 無(wú)網(wǎng)絡(luò) 其他: 服務(wù)異常statusType: res.code === 99999 ? 'noNetwork' : res.code !== 0 ? 'warning' : ''});});}})
-
引導(dǎo)關(guān)注組件。進(jìn)入頁(yè)面時(shí),可選擇是否展示引導(dǎo)關(guān)注組件。
-
JS
Page({...attr: {// 頁(yè)面展示時(shí)是否顯示關(guān)注引導(dǎo)tipshowFavorite: true},onShow() {if (this.attr.showFavorite) {// 頁(yè)面展示時(shí)顯示關(guān)注引導(dǎo)this.showFavoriteGuide();}}})
- 視頻播放器,支持自動(dòng)連播。
自動(dòng)連播邏輯:- 觸發(fā)時(shí)機(jī):視頻即將播放完畢,進(jìn)入 5s 倒計(jì)時(shí)并展示提示氣泡, 若頁(yè)面處于最上方倒計(jì)時(shí)結(jié)束后自動(dòng)連播下一條短視頻。否則阻斷連播,展示蒙層。
- 自動(dòng)連播順序:根據(jù) playVideoList 進(jìn)行去重后的順序進(jìn)行播放,推薦開(kāi)發(fā)者將長(zhǎng)視頻放在 playVideoList 的最后。
- 當(dāng)前用戶退出小程序后,即刪除已觀看記錄,下次進(jìn)入小程序短視頻落地頁(yè),重新執(zhí)行去重邏輯。
- 蒙層展示下一條播放的視頻信息并提供重播、觀看正片、立即播放等功能。
- SWAN
- JS
id="myVideo"class="video-header-player"src="{{playVideoList[playIndex] && playVideoList[playIndex].src}}"title="{{playVideoList[playIndex].title}}"autoplay="true"objectFit="?ll"direction="true"muted="true"show-mute-btn="true"show-center-play-btn="false"bindtimeupdate="videoTimeUpdateHandler"bindplay="videoPlayHandler"bindended="videoEndedHandler">接下來(lái)播放 {{remainingTime}}s 后播放{{playVideoList[nextIndex].title}} {{playVideoList[nextIndex].playNum}}次播放 立即播放 重播觀看正片重播<即將播放:{{playVideoList[nextIndex].title}}
Page({.../*** 播放下一條視頻*/playVideo() {this.setData({isMonitoring: false,isPlaying: true,playIndex: this.data.nextIndex});},/*** 重播*/replayVideo() {this.attr.videoContext.play();this.setData({isMonitoring: false,isPlaying: true});},/*** 監(jiān)聽(tīng)播放開(kāi)始事件*/videoPlayHandler() {const {timer,playVideoList,playIndex} = this.data;// 開(kāi)始播放清除倒計(jì)時(shí)器if (timer) {clearInterval(timer);this.setData({timer: null});}if (!playVideoList[playIndex].nextInfo) {playVideoList[playIndex].nextInfo = true;// 根據(jù)已播列表獲取下一條視頻 indexfor (let i = playIndex + 1; i < playVideoList.length; i++) {if (this.attr.playedList.indexOf(playVideoList[i].id) === -1) {this.setData({nextIndex: i});break;}}}this.setData({isMonitoring: false});},/*** 監(jiān)聽(tīng)播放結(jié)束事件*/videoEndedHandler() {// 短視頻去重if (this.data.playVideoList[this.data.playIndex].type === 1) {this.attr.playedList.push(this.data.playVideoList[this.data.playIndex].id);}// 沒(méi)有可播放的視頻if (this.data.nextIndex === this.data.playIndex) {// 存在長(zhǎng)視頻落地頁(yè)時(shí)跳轉(zhuǎn)長(zhǎng)視頻落地頁(yè)if (this.data.longVideoInfo.path) {swan.navigateTo({url: this.data.longVideoInfo.path});} else {// 顯示重播按鈕this.setData({playIndex: this.data.nextIndex,isPlaying: false});this.attr.videoContext.stop();return;}}// 播下一條視頻時(shí)頁(yè)面不在頂部if (this.attr.scrollTop !== 0) {// 取消自動(dòng)連播this.attr.videoContext.stop();this.setData({isPlaying: false});// 開(kāi)啟計(jì)時(shí)器this.onTimer();} else {// 不被打斷則直接播放下一條視頻this.setData({playIndex: this.data.nextIndex});}},/*** 監(jiān)聽(tīng)播放進(jìn)度變化* @param {*} e 事件對(duì)象*/videoTimeUpdateHandler(e) {if (this.data.nextIndex === this.data.playIndex) {return;}const {duration,currentTime} = e.detail;// 剩余5s 時(shí)進(jìn)行自動(dòng)播放提示if (duration !== 0 && currentTime !== 0 && duration - currentTime <= 5) {this.setData({isMonitoring: true});}}})
-
短視頻標(biāo)題及輔助信息區(qū)。展示用戶頭像、昵稱、播放次數(shù)、簡(jiǎn)介??烧归_(kāi)收起,默認(rèn)為收起態(tài)。
-
SWAN
- JS
{{playVideoList[playIndex].title}}s-if="{{playVideoList[playIndex].time || playVideoList[playIndex].introduction}}"class="video-content-introduction-title-switch {{introSwitch ? 'off': '' }}"mode="scaleToFill"src="../../common/images/arrow.png" bindtap="introductionSwitch">{{playVideoList[playIndex].playNum}}次播放 s-if="{{playVideoList[playIndex].authorImage}}" src="{{playVideoList[nextIndex].autorImage}}">{{playVideoList[playIndex].authorName}} s-if="{{introSwitch && (playVideoList[playIndex].time || playVideoList[playIndex].introduction)}}">發(fā)布時(shí)間:{{playVideoList[playIndex].time}}s-if="{{playVideoList[playIndex].introduction}}">{{playVideoList[playIndex].introduction}}
Page({.../*** 展開(kāi)、收起簡(jiǎn)介信息*/introductionSwitch() {this.setData({introSwitch: !this.data.introSwitch});}})
-
長(zhǎng)視頻信息區(qū)。當(dāng)資源配置了落地頁(yè)時(shí),展示加入書架按鈕和觀看正片按鈕,點(diǎn)擊長(zhǎng)視頻封面和觀看正片按鈕可跳轉(zhuǎn)至長(zhǎng)視頻落地頁(yè)。當(dāng)資源未配置落地頁(yè)時(shí)(資源未上映),默認(rèn)僅展示預(yù)約觀看按鈕。加入書架功能具體接入流程參考書架同步功能介紹,支持將資源同步至百度 App -書架;預(yù)約功能具體接入流程參考預(yù)約訂閱組件(平臺(tái)配置版)和預(yù)約訂閱組件(API版)。
-
SWAN
{{longVideoInfo.name}}{{longVideoInfo.info}}data-path="{{longVideoInfo.path}}">觀看正片s-if="{{longVideoInfo.path || longVideoInfo.bookInfo}}">加入書架report-type="subscribe" template-id="BD2305" subscribe-id="1235" bindsubmit="formSubmit">
-
活動(dòng)運(yùn)營(yíng)位。開(kāi)發(fā)者提供活動(dòng)運(yùn)營(yíng)圖片和跳轉(zhuǎn)地址,支持跳轉(zhuǎn)到當(dāng)前小程序內(nèi)的其他頁(yè)面。例如:可配置新用戶購(gòu)買會(huì)員優(yōu)惠活動(dòng)。
-
SWAN
-
百青藤?gòu)V告區(qū)。具體接入流程參考 ad 廣告組件。獲取 ad 組件代碼后可替換模板中的 ad 組件。
-
SWAN
-
推薦短視頻區(qū)。展示播放列表的短視頻。默認(rèn)最多展示 5 條短視頻,超過(guò)數(shù)量的短視頻將被折疊,點(diǎn)擊查看更多每次可再展開(kāi) 10 條短視頻,包含視頻的標(biāo)題、播放次數(shù)、封面、時(shí)長(zhǎng)等,點(diǎn)擊后跳轉(zhuǎn)到短視頻落地頁(yè)。
-
SWAN
- JS
{{item.title}}{{item.playNum}}次播放{{item.duration}}{{feedMore ? '查看更多': '沒(méi)有更多了'}}
Page({.../*** 查看更多短視頻*/feedMoerHandler() {let {feedMore,feedShowList} = this.data;const start = feedShowList.length;let end = start + 10;// 結(jié)束位超出,展示剩余的視頻if (end > this.attr.feedList.length) {end = start + this.attr.feedList.length - feedShowList.length;feedMore = false;}feedShowList.push(...this.attr.feedList.slice(start, end));this.setData({feedShowList: feedShowList,feedMore: feedMore});}})
- 互動(dòng)區(qū)。使用一站式互動(dòng)組件。
- 使用點(diǎn)贊、評(píng)論功能時(shí)需要進(jìn)行登入。
- 從其他頁(yè)面跳轉(zhuǎn)到本模板時(shí),snid 文章 id 需要在加在跳轉(zhuǎn)到本頁(yè)面的路徑上,跳轉(zhuǎn)本頁(yè)面的路徑如:
@smt-ui-template-page-video/pages/index/index?snid=10070000311753961
- SWAN
- JS
class="video-comment"is-page-scroll="false"comment-param="{{commentParam}}"detail-path="{{detailPath}}"toolbar-config="{{toolbarConfig}}">
Page({data: {...// 評(píng)論參數(shù)commentParam: {},// 評(píng)論詳情頁(yè)面路徑detailPath: '/@smt-ui-template-page-video/pages/comment-detail/index',},onLoad(options) {this.getPageData();// 獲取文章 id,示例中 mock 數(shù)據(jù),使用時(shí)請(qǐng)使用真實(shí)數(shù)據(jù)if (!options.snid) {options.snid = '10070000311753961';}this.attr.options = options;},onReady() {requireDynamicLib('myDynamicLib').listenEvent();},getPageData() {...this.setData({...commentParam: {// 文章的唯一標(biāo)識(shí)snid: this.attr.options.snid,path: `/@smt-ui-template-page-video/pages/index/index?snid=${this.attr.options.snid}`,title: res.longVideoInfo.name}});}})
評(píng)論詳情頁(yè)
展示評(píng)論詳情。
頁(yè)面路徑:pages/comment-detail
- SWAN
- JSON
- JS
comment-param="{{commentParam}}"srid="{{srid}}">
{"navigationBarTitleText": "評(píng)論詳情","usingSwanComponents": {"comment-detail": "dynamicLib://myDynamicLib/comment-detail"}}
import {login} from '../../utils';Page({data: {srid: '',commentParam: {}},onLoad(options) {if (options.srid) {this.setData({srid: options.srid});}const param = getApp().globalData.commentParam;if (param && Object.keys(param).length) {this.setData({'commentParam': param});} else {this.setData({commentParam: {snid: '10070000311753961',path: '/pages/comment/index?snid=10070000311753961',title: '測(cè)試文章標(biāo)題'}});}},});
字段說(shuō)明
對(duì)模板使用到的字段進(jìn)行說(shuō)明,此部分的數(shù)據(jù)在使用模板時(shí)需從 server 獲取。模板作為示例進(jìn)行了 mock ,開(kāi)發(fā)者可參考數(shù)據(jù)格式進(jìn)行開(kāi)發(fā)。
返回示例說(shuō)明
| 字段名 | 類型 | 說(shuō)明 |
|---|---|---|
| code | Number | 接口信息。code 0:正常獲取數(shù)據(jù);99999:無(wú)網(wǎng)絡(luò);其他:服務(wù)異常 |
| longVideoInfo | Object | 長(zhǎng)視頻信息,對(duì)應(yīng)模板長(zhǎng)視頻信息區(qū)部分 |
| playVideoList | Array | 連播列表,對(duì)應(yīng)視頻播放區(qū)、短視頻標(biāo)題及輔助信息區(qū)和短視頻列表區(qū)部分 |
| operateInfo | Object | 運(yùn)營(yíng)位信息,對(duì)應(yīng)模板運(yùn)營(yíng)位部分 |
- JSON
{// 接口信息code: 0,// 長(zhǎng)視頻信息longVideoInfo: {// 長(zhǎng)視頻封面圖poster: '../../common/images/poster1.png',// 長(zhǎng)視頻名稱name: '延禧攻略',// 長(zhǎng)視頻詳情頁(yè)路徑,已完結(jié)、更新中的資源必須填寫path: '/longVideo',// 資源類型,如:電視劇
文章名稱:創(chuàng)新互聯(lián)百度小程序教程:page-video短視頻詳情頁(yè)模板
當(dāng)前URL:http://www.5511xx.com/article/dhphepd.html


咨詢
建站咨詢

