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

 
 
 
  
  
   
  
  
   

  
  
   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"
  
  
   >
  
  
   
  
  
  
  
  
   
  
  
   
  
  
   接下来播放
  
  
   {{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
  
  
   });
  
  
   },
  
  
  
  
  
   /**
  
  
   * 监听播放开始事件
  
  
   */
  
  
   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


 
 
 
  
  
  
  
  
  
  
  
   
  
  
   {{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)}}">
  
  
   
  
  
   发布时间：{{playVideoList[playIndex].time}}
  
  
   
  
  
   

  
  
   s-if="{{playVideoList[playIndex].introduction}}">{{playVideoList[playIndex].introduction}}
  
  
   
  
  
   
  
  
  
 
 
 
 
 
 
  
  
  Page({
  
  
   ...
  
  
   /**
  
  
   * 展开、收起简介信息
  
  
   */
  
  
   introductionSwitch() {
  
  
   this.setData({
  
  
   introSwitch: !this.data.introSwitch
  
  
   });
  
  
   }
  
  
  })
 
 
 


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


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


SWAN


 
 
 
  
  
  
  
  
  
  
  
  
 
 
 


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


SWAN


 
 
 
  
  
  
  
  
  
 
 
 


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


SWAN

JS

 
 
 
  
  
  
  
  
  
  
  
   
  
  
   
  
  
   {{item.title}}
  
  
   
  
  
   
  
  
   {{item.playNum}}次播放
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   {{item.duration}}
  
  
   
  
  
   
  
  
  
  
  
  
  
  
   
  
  
   {{feedMore ? '查看更多': '没有更多了'}}
  
  
   
  
  
   
  
  
  
 
 
 
 
 
 
  
  
  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

 
 
 
  
  
  
  
  
  

  
  
   class="video-comment"
  
  
   is-page-scroll="false"
  
  
   comment-param="{{commentParam}}"
  
  
   detail-path="{{detailPath}}"
  
  
   toolbar-config="{{toolbarConfig}}">
  
  
  
 
 
 
 
 
 
  
  
  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-param="{{commentParam}}"
  
  
   srid="{{srid}}">
  
  
  
 
 
 
 
 
 
  
  
  {
  
  
   "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', 
  
  
   // 资源类型，如：电视剧                                                

                                                文章标题：创新互联百度小程序教程：page-video短视频详情页模板                                                

                                                URL分享：http://www.jxjierui.cn/article/dhphepd.html

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


                                            
                                                
                                                    其他资讯
                                                
                                                
                                                    
                                                        
                                                                切片云服务器怎么使用
                                                            

                                                                如何防止dos攻击？(如何应对doss攻击)
                                                            

                                                                如何使用Java连接MySQL数据库？(java程序连接mysql数据库)
                                                            

                                                                从Redis缓存中恢复力量（redis缓存恢复）
                                                            

                                                                rashost的windowsVPS重装系统的方法

新闻中心

page-video 短视频详情页模板

示例

页面内容

短视频详情页

`评论详情页`

`字段说明`

返回示例说明

其他资讯