• 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 的最后。

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

• SWAN
• JS

 
 
 

  
  
  
 
  
  
  
 

  
  
  
 id="myVideo"
  
  
  
 class="video-header-player"
  
  
  
 src="{{playVideoList[playIndex] && playVideoList[playIndex].src}}"
  
  
  
 title="{{playVideoList[playIndex].title}}"
  
  
  
 autoplay="true"
  
  
  
 objectFit="fill"
  
  
  
 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
  
  
  
 });
  
  
  
 }
  
  
  
})
 
 
 

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 {{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">
  
  
  
 预约观看
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  

 
 
 

 
 
 

  
  
  

  
  
  

  
  
  
 
  
  
  
 
  
  
  
 {{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
  
  
  
 });
  
  
  
 }
  
  
  
})
 
 
 

 
 
 

  
  
  

  
  
  

  
  
  
 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
  
  
  
 }
  
  
  
 });
  
  
  
 }
  
  
  
})
 
 
 

 
 
 

  
  
  

  
  
  
 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: '测试文章标题'
  
  
  
 }
  
  
  
 });
  
  
  
 }
  
  
  
 },
  
  
  
});
 
 
 

 
 
 

  
  
  
{ 
  
  
  
 // 接口信息
  
  
  
 code: 0, 
  
  
  
 // 长视频信息
  
  
  
 longVideoInfo: { 
  
  
  
 // 长视频封面图
  
  
  
 poster: '../../common/images/poster1.png', 
  
  
  
 // 长视频名称
  
  
  
 name: '延禧攻略', 
  
  
  
 // 长视频详情页路径，已完结、更新中的资源必须填写
  
  
  
 path: '/longVideo', 
  
  
  
 // 资源类型，如：电视剧        

        网站名称：创新互联百度小程序教程：page-video短视频详情页模板        

        链接分享：http://cdbrznjsb.com/article/dhphepd.html