后浪云百度小程序教程：page-video 短视频详情页模板

后浪云

2023-9-16

小程序

page-video 短视频详情页模板
- 示例
- 页面内容
  - 短视频详情页
  - 评论详情页
- 字段说明
  - 返回示例说明
  - longVideoInfo 长视频信息说明
  - playVideoList 连播列表说明
  - operateInfo 运营位信息说明
- npm 依赖
- Bug & Tip

page-video 短视频详情页模板

从开发者工具 v2.25.1-rc 版本、基础库版本 3.190.1 版本开始支持。

解释：本模版适用于快速搭建视频片花、预告、短视频等视频类详情页。模版在保证用户交互体验的基础上，提供了不同模块，配合使用加入书架、预约和引导关注组件，实现兴趣激发，充分发挥短视频带长视频消费的种草价值，拉动二次重访。

示例

扫码体验

代码示例

请使用百度APP扫码

页面内容

模板包含两个页面：短视频详情页、评论详情页。

短视频详情页

默认配置为导航栏、视频播放器、短视频标题及辅助信息区、长视频信息区一站式互动区等模块。

包含导航栏、引导关注组件、视频播放器（含自动连播逻辑）、短视频标题及辅助信息区、长视频信息区、活动运营位、百青藤广告区、推荐短视频区和一站式互动区等模块，分为默认配置模块和可选配置模块。开发者可根据自身业务形态选择合适的模块进行自定义配置。

页面路径：pages/index

代码示例

获取页面数据。可将 getIndexData 替换以发送网络请求获取真实数据。
JS

 
 
 
  
  
  Page({
  
  
   ...
  
  
   attr: {
  
  
   // 请求的 url，请替换为真实的请求地址，该值仅做为示例，值为 defaultData 为默认配置示例，其他值为全配置示例
  
  
   url: '/index',
  
  
   // onLoad参数
  
  
   options: {}
  
  
   },
  
  
   onLoad(options) {
  
  
   this.getPageData();
  
  
   ...
  
  
   },
  
  
   getPageData() {
  
  
   const url = this.attr.url;
  
  
  
  
  
   // 模拟请求，请进行替换
  
  
   getIndexData({
  
  
   url
  
  
   }).then(
  
  
   res => {
  
  
   res.playVideoList.forEach(item => {
  
  
   // 格式化播放数量
  
  
   item.playNum = this.formatPlayNum(item.playNum);
  
  
   item.nextInfo = false;
  
  
   // 过滤出长视频
  
  
   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条时，先展示前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: {
  
  
   // 文章的唯一标识
  
  
   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: 正常获取数据 99999: 无网络 其他: 服务异常
  
  
   statusType: res.code === 99999 ? 'noNetwork' : res.code !== 0 ? 'warning' : ''
  
  
   });
  
  
   }
  
  
   );
  
  
   }
  
  
  })

引导关注组件。进入页面时，可选择是否展示引导关注组件。
JS

 
 
 
  
  
  Page({
  
  
   ...
  
  
   attr: {
  
  
   // 页面展示时是否显示关注引导tip
  
  
   showFavorite: true
  
  
   },
  
  
   onShow() {
  
  
   if (this.attr.showFavorite) {
  
  
   // 页面展示时显示关注引导
  
  
   this.showFavoriteGuide();
  
  
   }
  
  
   }
  
  
  })

视频播放器，支持自动连播。
自动连播逻辑：
- 触发时机：视频即将播放完毕，进入 5s 倒计时并展示提示气泡，若页面处于最上方倒计时结束后自动连播下一条短视频。否则阻断连播，展示蒙层。
- 自动连播顺序：根据 playVideoList 进行去重后的顺序进行播放，推荐开发者将长视频放在 playVideoList 的最后。

当前用户退出小程序后，即删除已观看记录，下次进入小程序短视频落地页，重新执行去重逻辑。
蒙层展示下一条播放的视频信息并提供重播、观看正片、立即播放等功能。

SWAN
JS

 
 
 
  
  
   <!-- 视频组件-->
  
  
   <video
  
  
   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"
  
  
   >
  
  
   </video>
  
  
  
  
  
   <!-- 蒙层 -->
  
  
   <view class="video-header-cover" s-if="{{!isPlaying && nextIndex != playIndex}}">
  
  
   <view class="video-header-cover-title" s-if="{{!timer}}">接下来播放</view>
  
  
   <view class="video-header-cover-title" s-else><view class="video-header-cover-title-remaining">{{remainingTime}}s</view>后播放</view>
  
  
   <view class="video-header-cover-content">
  
  
   <image class="video-header-cover-content-left" src="{{playVideoList[nextIndex].poster}}" mode="scaleToFill"></image>
  
  
   <view class="video-header-cover-content-right">
  
  
   <view class="video-header-cover-content-right-text c-line-clamp2">{{playVideoList[nextIndex].title}}</view>
  
  
   <view class="video-header-cover-content-right-num">{{playVideoList[nextIndex].playNum}}次播放</view>
  
  
   <view class="video-header-cover-content-right-button" bindtap="playVideo">立即播放</view>
  
  
   </view>
  
  
   </view>
  
  
   <view class="video-header-cover-buttons">
  
  
   <view class="video-header-cover-buttons-item" bindtap="replayVideo">
  
  
   <image class="video-header-cover-buttons-item-img" src="../../common/images/replay.png" mode="aspectFit"></image>
  
  
   重播
  
  
   </view>
  
  
   <view class="video-header-cover-buttons-item" bindtap="navigateTo" data-path="{{longVideoInfo.path}}">
  
  
   <image class="video-header-cover-buttons-item-img" src="../../common/images/play.png" mode="aspectFit"></image>
  
  
   观看正片
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
  
  
  
   <view class="video-header-cover replay" s-if="{{!isPlaying && nextIndex == playIndex}}" bindtap="replayVideo">
  
  
   <view class="video-header-cover-replay">
  
  
   <image class="video-header-cover-replay-icon" src="../../common/images/replay.png" mode="scaleToFill"></image>
  
  
   </view>
  
  
   重播
  
  
   <
  
  
   <!-- 下一条视频提示 -->
  
  
   <view class="video-header-tips c-line-clamp1" s-if="{{isMonitoring && isPlaying}}">即将播放：{{playVideoList[nextIndex].title}}</view>

 
 
 
  
  
  Page({
  
  
   ...
  
  
   /**
  
  
   * 播放下一条视频
  
  
   */
  
  
   playVideo() {
  
  
   this.setData({
  
  
   isMonitoring: false,
  
  
   isPlaying: true,
  
  
   playIndex: this.data.nextIndex
  
  
   });
  
  
   },
  
  
  
  
  
   /**
  
  
   * 重播
  
  
   */
  
  
   replayVideo() {
  
  
   this.attr.videoContext.play();
  
  
   this.setData({
  
  
   isMonitoring: false,
  
  
   isPlaying: true
  
  
   });
  
  
   },
  
  
  
  
  
   /**
  
  
   * 监听播放开始事件
  
  
   */
  
  
   videoPlayHandler() {
  
  
   const {
  
  
   timer,
  
  
   playVideoList,
  
  
   playIndex
  
  
   } = this.data;
  
  
  
  
  
   // 开始播放清除倒计时器
  
  
   if (timer) {
  
  
   clearInterval(timer);
  
  
   this.setData({
  
  
   timer: null
  
  
   });
  
  
   }
  
  
  
  
  
   if (!playVideoList[playIndex].nextInfo) {
  
  
   playVideoList[playIndex].nextInfo = true;
  
  
  
  
  
   // 根据已播列表获取下一条视频 index
  
  
   for (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
  
  
   });
  
  
   },
  
  
  
  
  
   /**
  
  
   * 监听播放结束事件
  
  
   */
  
  
   videoEndedHandler() {
  
  
   // 短视频去重
  
  
   if (this.data.playVideoList[this.data.playIndex].type === 1) {
  
  
   this.attr.playedList.push(this.data.playVideoList[this.data.playIndex].id);
  
  
   }
  
  
  
  
  
   // 没有可播放的视频
  
  
   if (this.data.nextIndex === this.data.playIndex) {
  
  
   // 存在长视频落地页时跳转长视频落地页
  
  
   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;
  
  
   }
  
  
   }
  
  
  
  
  
   // 播下一条视频时页面不在顶部
  
  
   if (this.attr.scrollTop !== 0) {
  
  
   // 取消自动连播
  
  
   this.attr.videoContext.stop();
  
  
   this.setData({
  
  
   isPlaying: false
  
  
   });
  
  
   // 开启计时器
  
  
   this.onTimer();
  
  
   } else {
  
  
   // 不被打断则直接播放下一条视频
  
  
   this.setData({
  
  
   playIndex: this.data.nextIndex
  
  
   });
  
  
   }
  
  
   },
  
  
  
  
  
   /**
  
  
   * 监听播放进度变化
  
  
   * @param {*} e 事件对象
  
  
   */
  
  
   videoTimeUpdateHandler(e) {
  
  
   if (this.data.nextIndex === this.data.playIndex) {
  
  
   return;
  
  
   }
  
  
  
  
  
   const {
  
  
   duration,
  
  
   currentTime
  
  
   } = e.detail;
  
  
  
  
  
   // 剩余5s 时进行自动播放提示
  
  
   if (duration !== 0 && currentTime !== 0 && duration - currentTime <= 5) {
  
  
   this.setData({
  
  
   isMonitoring: true
  
  
   });
  
  
   }
  
  
   }
  
  
  })

短视频标题及辅助信息区。展示用户头像、昵称、播放次数、简介。可展开收起，默认为收起态。
SWAN
JS

 
 
 
  
  
  <!-- 短视频标题及辅助信息区 -->
  
  
  <view class="video-content-introduction">
  
  
   <view class="video-content-introduction-title">
  
  
   {{playVideoList[playIndex].title}}
  
  
   <image
  
  
   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">
  
  
   </image>
  
  
   </view>
  
  
   <view class="video-content-introduction-other">
  
  
   <view class="video-content-introduction-other-num">{{playVideoList[playIndex].playNum}}次播放</view>
  
  
   <image class="video-content-introduction-other-img video-img" mode="scaleToFill"
  
  
   s-if="{{playVideoList[playIndex].authorImage}}" src="{{playVideoList[nextIndex].autorImage}}"></image>
  
  
   <view class="video-content-introduction-other-name c-line-clamp1">{{playVideoList[playIndex].authorName}}</view>
  
  
   </view>
  
  
   <view class="video-content-introduction-more"
  
  
   s-if="{{introSwitch && (playVideoList[playIndex].time || playVideoList[playIndex].introduction)}}">
  
  
   <view class="video-content-introduction-more-time" s-if="{{playVideoList[playIndex].time}}">
  
  
   发布时间：{{playVideoList[playIndex].time}}
  
  
   </view>
  
  
   <view class="video-content-introduction-more-text c-line-clamp3"
  
  
   s-if="{{playVideoList[playIndex].introduction}}">{{playVideoList[playIndex].introduction}}
  
  
   </view>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  Page({
  
  
   ...
  
  
   /**
  
  
   * 展开、收起简介信息
  
  
   */
  
  
   introductionSwitch() {
  
  
   this.setData({
  
  
   introSwitch: !this.data.introSwitch
  
  
   });
  
  
   }
  
  
  })

长视频信息区。当资源配置了落地页时，展示加入书架按钮和观看正片按钮，点击长视频封面和观看正片按钮可跳转至长视频落地页。当资源未配置落地页时（资源未上映），默认仅展示预约观看按钮。加入书架功能具体接入流程参考书架同步功能介绍，支持将资源同步至百度 App -书架；预约功能具体接入流程参考预约订阅组件（平台配置版）和预约订阅组件（API版）。
SWAN

 
 
 
  
  
  <!-- 长视频信息区 -->
  
  
  <view class="video-content-detail">
  
  
   <view class="video-content-detail-left" bindtap="navigateTo" data-path="{{longVideoInfo.path}}">
  
  
   <image class="video-content-detail-left-img video-img" src="{{longVideoInfo.poster}}" mode="scaleToFill">
  
  
   </image>
  
  
   <view class="video-content-detail-left-play">
  
  
   </view>
  
  
   <image class="video-content-detail-left-play-icon" src="../../common/images/play3.png" mode="scaleToFill">
  
  
   </image>
  
  
   </view>
  
  
   <view class="video-content-detail-right">
  
  
   <view class="video-content-detail-right-name">
  
  
   {{longVideoInfo.name}}
  
  
   </view>
  
  
   <view class="video-content-detail-right-tags c-line-clamp2">
  
  
   {{longVideoInfo.info}}
  
  
   </view>
  
  
   <view class="video-content-detail-right-buttons">
  
  
   <!-- 立即观看按钮 -->
  
  
   <view class="video-content-detail-right-buttons-primary" s-if="{{longVideoInfo.path}}" bindtap="navigateTo"
  
  
   data-path="{{longVideoInfo.path}}">观看正片</view>
  
  
   <!-- 加入书架按钮 -->
  
  
   <view class="video-content-detail-right-buttons-normal" bindtap="insertBookshelf"
  
  
   s-if="{{longVideoInfo.path || longVideoInfo.bookInfo}}">加入书架</view>
  
  
   <!-- 预约观看按钮 -->
  
  
   <form s-if="{{!longVideoInfo.path || longVideoInfo.subscribeId}}" report-submit="true"
  
  
   report-type="subscribe" template-id="BD2305" subscribe-id="1235" bindsubmit="formSubmit">
  
  
   <button class="video-content-detail-right-buttons-normal" formType="submit" type="primary">预约观看</button>
  
  
   </form>
  
  
   </view>
  
  
   </view>
  
  
  </view>

活动运营位。开发者提供活动运营图片和跳转地址，支持跳转到当前小程序内的其他页面。例如：可配置新用户购买会员优惠活动。
SWAN

 
 
 
  
  
  <!-- 运营位 -->
  
  
  <view class="video-content-operational video-img" s-if="{{operateInfo.path}}" style="background-image: url({{operateInfo.img}});" bindtap="navigateTo" data-path="{{operateInfo.path}}">
  
  
  </view>

百青藤广告区。具体接入流程参考 ad 广告组件。获取 ad 组件代码后可替换模板中的 ad 组件。
SWAN

 
 
 
  
  
  <!-- 广告位 若使用可取消注释-->
  
  
  <!-- <view class="video-ad">
  
  
   <view class="video-ad-container">
  
  
   <ad appid="f71feede"
  
  
   apid="7182325"
  
  
   type="feed"
  
  
   >
  
  
   </ad>
  
  
   </view>
  
  
   <view class="video-divider wrapper" s-if="{{!showFeed}}"></view>
  
  
  </view> -->

推荐短视频区。展示播放列表的短视频。默认最多展示 5 条短视频，超过数量的短视频将被折叠，点击查看更多每次可再展开 10 条短视频，包含视频的标题、播放次数、封面、时长等，点击后跳转到短视频落地页。
SWAN
JS

 
 
 
  
  
  <!-- 短视频列表 -->
  
  
  <view s-for="item in feedShowList" class="video-feed-item" bindtap="navigateTo" data-path="{{item.path}}">
  
  
   <view class="video-feed-item-left">
  
  
   <view class="video-feed-item-left-title c-line-clamp2">
  
  
   {{item.title}}
  
  
   </view>
  
  
   <view class="video-feed-item-left-num">
  
  
   {{item.playNum}}次播放
  
  
   </view>
  
  
   </view>
  
  
   <view class="video-feed-item-right">
  
  
   <image class="video-feed-item-right-img video-img" src="{{item.poster}}" mode="scaleToFill"></image>
  
  
   <view class="video-feed-item-right-time">
  
  
   <image class="video-feed-item-right-time-icon" src="../../common/images/play2.png" mode="scaleToFill">
  
  
   </image>
  
  
   {{item.duration}}
  
  
   </view>
  
  
   </view>
  
  
  </view>
  
  
  <view class="video-feed-more" bindtap="feedMoerHandler">
  
  
   <view>
  
  
   {{feedMore ? '查看更多': '没有更多了'}}
  
  
   <image class="video-feed-more-icon" s-if="{{feedMore}}" src="../../common/images/arrow.png" mode="scaleToFill"></image>
  
  
   </view>
  
  
  </view>

 
 
 
  
  
  Page({
  
  
   ...
  
  
   /**
  
  
   * 查看更多短视频
  
  
   */
  
  
   feedMoerHandler() {
  
  
   let {
  
  
   feedMore,
  
  
   feedShowList
  
  
   } = this.data;
  
  
   const start = feedShowList.length;
  
  
   let end = start + 10;
  
  
   // 结束位超出，展示剩余的视频
  
  
   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
  
  
   });
  
  
   }
  
  
  })

互动区。使用一站式互动组件。

使用点赞、评论功能时需要进行登入。
从其他页面跳转到本模板时，snid 文章 id 需要在加在跳转到本页面的路径上，跳转本页面的路径如：@smt-ui-template-page-video/pages/index/index?snid=10070000311753961

SWAN
JS

 
 
 
  
  
  <!-- 评论列表组件 -->
  
  
  <comment-list
  
  
   class="video-comment"
  
  
   is-page-scroll="false"
  
  
   comment-param="{{commentParam}}"
  
  
   detail-path="{{detailPath}}"
  
  
   toolbar-config="{{toolbarConfig}}">
  
  
  </comment-list>

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   ...
  
  
   // 评论参数
  
  
   commentParam: {},
  
  
   // 评论详情页面路径
  
  
   detailPath: '/@smt-ui-template-page-video/pages/comment-detail/index',
  
  
   },
  
  
   onLoad(options) {
  
  
   this.getPageData();
  
  
   // 获取文章 id，示例中 mock 数据，使用时请使用真实数据
  
  
   if (!options.snid) {
  
  
   options.snid = '10070000311753961';
  
  
   }
  
  
  
  
  
   this.attr.options = options;
  
  
  
  
  
   },
  
  
   onReady() {
  
  
   requireDynamicLib('myDynamicLib').listenEvent();
  
  
   },
  
  
   getPageData() {
  
  
   ...
  
  
   this.setData({
  
  
   ...
  
  
   commentParam: {
  
  
   // 文章的唯一标识
  
  
   snid: this.attr.options.snid,
  
  
   path: `/@smt-ui-template-page-video/pages/index/index?snid=${this.attr.options.snid}`,
  
  
   title: res.longVideoInfo.name
  
  
   }
  
  
   });
  
  
   }
  
  
  })

评论详情页

展示评论详情。

页面路径：pages/comment-detail

SWAN
JSON
JS

 
 
 
  
  
  <comment-detail
  
  
   comment-param="{{commentParam}}"
  
  
   srid="{{srid}}">
  
  
  </comment-detail>

 
 
 
  
  
  {
  
  
   "navigationBarTitleText": "评论详情",
  
  
   "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: '测试文章标题'
  
  
   }
  
  
   });
  
  
   }
  
  
   },
  
  
  });

字段说明

对模板使用到的字段进行说明，此部分的数据在使用模板时需从 server 获取。模板作为示例进行了 mock ，开发者可参考数据格式进行开发。

返回示例说明

字段名	类型	说明
code	Number	接口信息。code 0：正常获取数据；99999：无网络；其他：服务异常
longVideoInfo	Object	长视频信息，对应模板长视频信息区部分
playVideoList	Array	连播列表，对应视频播放区、短视频标题及辅助信息区和短视频列表区部分
operateInfo	Object	运营位信息，对应模板运营位部分

JSON

 
 
 
  
  
  { 
  
  
   // 接口信息
  
  
   code: 0, 
  
  
   // 长视频信息
  
  
   longVideoInfo: { 
  
  
   // 长视频封面图
  
  
   poster: '../../common/images/poster1.png', 
  
  
   // 长视频名称
  
  
   name: '延禧攻略', 
  
  
   // 长视频详情页路径，已完结、更新中的资源必须填写
  
  
   path: '/longVideo', 
  
  
   // 资源类型，如：电视剧、电影、综艺、动漫等
  
  
   type: '电视剧', 
  
  
   // 发行时间
  
  
   year: '2018年', 
  
  
   // 发行地区
  
  
   area: '内地', 
  
  
   // 资源标签，建议1-3个
  
  
   tags: '剧情爱情古装',
  
  
   // 更新状态，如共X集、更新⾄X集、即将上映、已上映、更新至X期
  
  
   update: '共52集', 
  
  
   // 单集片长，电视剧/综艺等可直接填写单集⽚⻓X分钟，电影可填写⽚⻓X分钟
  
  
   time: '单集片长45分钟' 
  
  
   },
  
  
   playVideoList: [
  
  
   { 
  
  
   // 连播列表
  
  
   // 视频 id
  
  
   id: 1, 
  
  
   // 视频地址
  
  
   src: 'https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4', 
  
  
   // 视频封面
  
  
   poster: '../../common/images/poster2.png', 
  
  
   // 视频标题
  
  
   title: '聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了', 
  
  
   // 视频播放次数
  
  
   playNum: 6334000, 
  
  
   // 视频作者
  
  
   authorName: '我是作者1', 
  
  
   // 视频作者头像
  
  
   authorImage: '../../common/images/author.png', 
  
  
   // 视频时长
  
  
   duration: '03:20', 
  
  
   // 视频上传时间
  
  
   time: '2020年3月10日', 
  
  
   // 视频简介
  
  
   introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这', 
  
  
   // 视频类型，短视频为 1、长视频为2
  
  
   type: 1, 
  
  
   path: '/dasda'
  
  
   }, 
  
  
   {
  
  
   id: 2,
  
  
   src: 'https://b.bdstatic.com/miniapp/development_tool/2020-6/1591258607615/a332aa39e1ff.mp4',
  
  
   poster: '../../common/images/poster3.png',
  
  
   title: '贺涵强势向子君表白，子君无所君无所适从',
  
  
   playNum: 110011000001,
  
  
   authorName: '2我是作者as大大说大厦的撒旦的撒',
  
  
   authorImage: '../../common/images/author2.png',
  
  
   duration: '103:20',
  
  
   time: '2020年3月10日',
  
  
   introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
  
  
   type: 1,
  
  
   path: '/dasda'
  
  
   }, 
  
  
   {
  
  
   id: 3,
  
  
   src: 'https://b.bdstatic.com/swan-temp/940fe716b0eaad38f47b209d61657490.mp4',
  
  
   poster: '../../common/images/poster2.png',
  
  
   title: '《前半生》大结局，贺涵离职和子君远走，唐晶不原谅',
  
  
   playNum: 1000000,
  
  
   authorName: '我是作者',
  
  
   authorImage: '../../common/images/author3.png',
  
  
   duration: '03:20',
  
  
   time: '2020年3月10日',
  
  
   introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
  
  
   type: 1,
  
  
   path: '/dasda'
  
  
   },
  
  
   {
  
  
   id: 4,
  
  
   src: 'https://b.bdstatic.com/miniapp/development_tool/Smartprogram.mp4',
  
  
   poster: '../../common/images/poster3.png',
  
  
   title: '4聂远年轻照片跟现在',
  
  
   playNum: 6334000,
  
  
   authorName: '我是作者',
  
  
   authorImage: 'https://b.bdstatic.com/miniapp/images/demo-dog.png',
  
  
   duration: '03:20',
  
  
   time: '2020年3月10日',
  
  
   introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
  
  
   type: 2,
  
  
   path: '/dasda'
  
  
   },
  
  
   {
  
  
   id: 5,
  
  
   src: 'https://b.bdstatic.com/miniapp/development_tool/2020-6/1591258607615/a332aa39e1ff.mp4',
  
  
   poster: '../../common/images/poster2.png',
  
  
   title: '5聂远年轻照片跟现在几乎是判若两人终于明白为什么现在才火了',
  
  
   playNum: 1010000,
  
  
   authorName: '我是作者',
  
  
   authorImage: '../../common/images/author3.png',
  
  
   duration: '03:20',
  
  
   time: '2020年3月10日',
  
  
   introduction: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这',
  
  
   type: 1,
  
  
   path: '/dasda'
  
  
   }
  
  
   ],
  
  
   // 运营位信息
  
  
   operateInfo: { 
  
  
   // 运营位封面
  
  
   img: '../../common/images/operational.png', 
  
  
   // 运营位落地页地址
  
  
   path: '/dsadassdsa' 
  
  
   }
  
  
  }

longVideoInfo 长视频信息说明

字段名	类型	说明
poster	String	长视频封面图
name	String	长视频名称
path	String	长视频详情页路径，已完结、更新中的资源必须填写
type	String	资源类型，如：电视剧、电影、综艺、动漫等
year	String	发行时间
area	String	发行地区
tags	String	资源标签，建议1-3个
update	String	更新状态，如共X集、更新⾄X集、即将上映、已上映、更新至X期
time	String	单集片长，电视剧/综艺等可直接填写单集⽚⻓X分钟，电影可填写⽚⻓X分钟

playVideoList 连播列表说明

字段名	类型	说明
id	Number	视频 id
src	String	视频地址
poster	String	视频封面
title	String	视频标题
playNum	Number	视频播放次数
authorName	String	视频作者
authorImage	String	视频作者头像
duration	String	视频时长
time	String	视频上传时间
introduction	String	单视频简介
type	Number	视频类型，短视频为 1、长视频为2
path	String	视频落地页地址

operateInfo 运营位信息说明

字段名	类型	说明
img	String	运营位封面地址
path	String	运营位落地页地址

npm 依赖

名称	版本号
@smt-ui/component	^1.1.41
@smt-ui/content-component	^0.3.3

Bug & Tip

Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
Tip：以上代码示例为纯客户端代码，可直接在模拟器和真机预览。
Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。
Tip：预览时，控制台报错[Dynamic(swan-interaction)][Request failed] get comment list fail with data:，是由于一站式互动组件需要填写正确的appid和snid，请开发者自行补充修改，修改方式参考一站式互动组件的使用方法。

作者：后浪云

链接：https://www.idc.net/help/185953/

文章版权归作者所有，未经允许请勿转载。

THE END

香港云服务器
1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

后浪云百度小程序教程：page-video 短视频详情页模板

page-video 短视频详情页模板

示例

页面内容

短视频详情页

评论详情页

字段说明

返回示例说明

longVideoInfo 长视频信息说明

playVideoList 连播列表说明

operateInfo 运营位信息说明

npm 依赖

Bug & Tip

香港云服务器1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

后浪云百度小程序教程：page-video 短视频详情页模板

page-video 短视频详情页模板

示例

页面内容

短视频详情页

评论详情页

字段说明

返回示例说明

longVideoInfo 长视频信息说明

playVideoList 连播列表说明

operateInfo 运营位信息说明

npm 依赖

Bug & Tip

香港云服务器
1核2G内存30G硬盘