百度智能小程序 短视频详情页模板

page-video 短视频详情页模板

解释: 本模版适用于快速搭建版权长视频小程序内与长视频相关联的短视频详情页，例如：搭建长视频的片花、预告、切片短视频的详情页。模版在保证用户交互体验的基础上，提供了视频播放器、长视频信息区、活动运营位、百青藤广告位、推荐短视频区等模块，旨在提升短视频落地页用户体验。同时，开发者可配合使用加入书架、预约和引导关注组件，实现兴趣激发，充分发挥短视频带长视频消费的种草价值，拉动二次重访。

示例

前提条件

• 已完成小程序创建。
• 已下载并安装百度小程序开发者工具（简称 IDE）。

使用说明

• 本示例为纯客户端代码，可直接在模拟器和真机预览。
• 模板中使用的是测试数据，你需要从接口中获取真实的数据。
• 页面模板功能从开发者工具 v2.25.1-rc 版本开始支持。
• 该模板使用了 es6 语法，需要开启开发者工具的增强编译，操作步骤参看开启说明；同时也需开启上传代码时样式自动补全。
• 该模版要求的最低基础库版本为 3.190.1 。

使用方式

方式一 【 NPM 】

1. 在小程序根目录执行下方命令，下载页面模板的 npm 包：

   npm i @smt-ui-template/page-video
   

2. 将/node_modules/@smt-ui-template/page-video 下的@smt-ui-template-page-video 文件夹拷贝到当前小程序合适的目录下 （如pages）:

   .
   ├── project.swan.json                   
   ├── app.json                            
   ├── app.js                              
   ├── pages
       └── @smt-ui-template-page-video     // 模板文件
   

3. 在小程序根目录的 app.json 中配置模板页面的 path 路径，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-page-video/pages/index/index",
           "pages/@smt-ui-template-page-video/pages/comment-detail/index
       ]
   }
   

4. 为了方便在开发者工具中查看模板页的效果，可以设置模板页为小程序预览的首页。详情请见自定义编译文档。
   

方式二 【 开发者工具-页面模板 】

1. 打开开发者工具，点击 ”页面模板“，在下方找到 ”短视频详情页模板“，选中该模板后点击右下角 ”立即使用”，填写相关信息点击右下角 ”完成“ 按钮。
2. 使用开发者工具的编辑器或者选择自己熟悉的编辑器对模板进行二次开发。

页面内容

模板包含 2 个页面，分别是：短视频详情页、评论详情页。

短视频详情页

页面路径：pages/index

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

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

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

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

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

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

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

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

    <!-- 视频组件-->
    <video
        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"
    >
    </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
            });
        }
    }
})

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

  <!-- 短视频标题及辅助信息区 -->
  <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-书架。

  <!-- 长视频信息区 -->
  <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>
  

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

  <!-- 运营位 -->
  <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 组件。

  <!-- 广告位 若使用可取消注释-->
  <!-- <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条短视频，包含视频的标题、播放次数、封面、时长等，点击后跳转到短视频落地页。

  <!-- 短视频列表 -->
  <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>
  </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
          });
      }
  })

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

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

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

评论详情页

页面路径：pages/comment-detail

展示评论详情。

<comment-detail
    comment-param="{{commentParam}}"
    srid="{{srid}}"
    bindunlogin="triggerLogin"
></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: '测试文章标题'
                }
            });

            const isLoginResult = swan.isLoginSync();

            // 当前用户已登录的条件下，利用登录 code 获取 openid
            // 当前用户未登录的条件下，不强制其登录
            if (isLoginResult && isLoginResult.isLogin) {
                this.triggerLogin();
            }
        }
    },
    triggerLogin(e) {
        login().then(res => {
            const commentParam = this.data.commentParam;
            this.setData({
                commentParam: {
                    ...commentParam,
                    openid: res.data.openid
                }
            }, () => {
                getApp().globalData.commentParam = this.data.commentParam;

            });
        });
    }
});

字段说明

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

返回示例

{
    code: 0, // 接口信息
    longVideoInfo: { // 长视频信息
        poster: '../../common/images/poster1.png', // 长视频封面图
        name: '延禧攻略', // 长视频名称
        path: '/longVideo', // 长视频详情页路径，已完结、更新中的资源必须填写
        type: '电视剧', // 资源类型，如：电视剧、电影、综艺、动漫等
        year: '2018年', // 发行时间
        area: '内地', // 发行地区
        tags: '剧情爱情古装', // 资源标签，建议1-3个
        update: '共52集', // 更新状态，如共X集、更新⾄X集、即将上映、已上映、更新至X期
        time: '单集片长45分钟' // 单集片长，电视剧/综艺等可直接填写单集⽚⻓X分钟，电影可填写⽚⻓X分钟

    },
    playVideoList: [{ // 连播列表
            id: 1, // 视频 id
            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: '这是简介内容这是简介内容这是简介内容这是简介内容这是简介内容这这是简介内容这', // 视频简介
            type: 1, // 视频类型，短视频为 1、长视频为2
            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 长视频信息说明

playVideoList 连播列表说明

operateInfo 运营位信息说明

NPM 依赖