Vue.js 实战系列之实现视频类WebApp的项目开发——8. 视频自动播放和上滑下拉播放与暂停

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

---

实现效果

---

功能实现

1. 首个视频自动播放

   当你打开抖音APP 时，它首页的视频是自动播放的。我们不能直接修改 vue-video-player 上的 options -> autoplay，因为 autoplay 为 true 的话，则所有的视频都会自动播放，我们只需要让数组中的第一个播放就行了，所以我们传递数组的所以给 video 组件，在 video 组件内判断 如果 index 为 0 的话则自动播放。

   1. VideoList.vue
      给 组件传递当前视频的索引值 index。

      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item , index) in dataList" :key="index">
          <Videos :video="item" :index="index"></Videos>
          <div class="info-bar">
            <InfoBar :infoName="item.author" :infoDesc="item.desc" :infoMusic="item.music"></InfoBar>
          </div>
          <div class="right-bar">
            <RightBar></RightBar>
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      

   2. Videos.vue
      在组件中接收父组件传入的 index 的值，判断是否为第一个视频自动播放。

      <script>
      import 'video.js/dist/video-js.css';
      import {
                videoPlayer } from 'vue-video-player';
      
      export default {
               
          components: {
               
              videoPlayer,
          },
          props: ['video', 'index'], //video 是数据 index标识自动播放第一个视频
          data() {
               
            return {
               
              // videojs options
              playerOptions: {
               
                  // 默认情况下将会消除任何音频。
                  muted: true,
                  // 如果true,浏览器准备好时开始回放。
                  autoplay: false,
                  // 导致视频一结束就重新开始。
                  loop: true,
                  preload: 'auto',
                  // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器.
                  fluid: true,
                  sources: [{
               
                      type: 'video/mp4', // 类型
                      // src: require('@/assets/videos/sucai.mp4'),
                      src: this.video.url,
                  }],
                  // 视频宽度,获取客户端宽度
                  width: document.documentElement.clientWidth,
                  // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                  notSupportedMessage: '此视频暂无法播放，请稍后再试',
                  controlBar: false,
              },
              // 用于判断当前视频是否处于播放状态
              palying: true,
            };
          },
          created() {
               
              this.autoPlayAction();
          },
          methods: {
               
            // 自动播放第一个视频
            autoPlayAction() {
               
              if (this.index === 0) {
               
                this.playerOptions.autoplay = true;
              }
            },
         },
      };
      </script>
      

2. 视频的播放与暂停

   vue-video-player 组件播放与暂停的api
   parse：暂停
   play：播放

   1. Videos.vue

      methods: {
               
        // 视频播放或暂停
        playOrStop() {
               
          if (this.palying) {
               
            // 如果视频处于播放状态 则点击时 暂停此视频的播放
            this.$refs.videoPlayer.player.pause();
            // 设置播放标识为未播放
            this.palying = false;
          } else {
               
            // 如果视频处于暂停状态 则点击时 继续视频的播放
            this.$refs.videoPlayer.player.play();
            // 设置播放标识为正在播放
            this.palying = true;
          }
        },
      },
      

   2. VideoList.vue

      <template>
        <div class="video-list">
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(item , index) in dataList" :key="index">
              <Videos ref="videos" :video="item" :index="index"></Videos>
      		// ...
            </swiper-slide>
          </swiper>
        </div>
      </template>
      
      <script>
      data() {
               
        return {
               
          swiperOptions: {
               
            // swiper组件提供的方法
            on: {
               
              tap: () => {
               
                this.playAction(this.page - 1);
                console.log('点击: ', this.page);
              },
              slidePrevTransitionStart: () => {
               
                if (this.page > 1) {
               
                  this.page -= 1;
                }
                this.playAction(this.page - 1);
                console.log('下拉：', this.page);
              },
              slideNextTransitionStart: () => {
               
                this.page += 1;
                this.playAction(this.page - 1);
                console.log('上滑：', this.page);
              },
            },
          },
          // 标识翻页
          page: 1,
        };
      },
      methods: {
               
        playAction(index) {
                // index 当前屏幕上显示的视频是第几个视频
          // 调用videos组件的playOrStop 方法
          this.$refs.videos[index].playOrStop();
        },
      },
      </script>
      

3. 控制上滑、下滑视频的播放与暂停

   在 methods 中声明两个方法，play()播放方法、stop()暂停方法，控制视频的播放与暂停

   1. Videos.vue

      部分代码：

      methods: {
               
        // 播放
        play() {
               
          this.$refs.videoPlayer.player.play();
          this.palying = true;
        },
        // 暂停
        stop() {
               
          this.$refs.videoPlayer.player.pause();
          this.palying = false;
        },
      },
      

   2. VideoList.vue

      在 methods 属性声明两个方法：

      • nextVideo：用户上滑时暂停当前正在播放的视频并自动播放下一个视频；
      • preVideo：用户下拉时暂停当前正在播放的视频并自动播放上一个视频；

      data() {
               
            return {
               
              swiperOptions: {
               
                // swiper组件提供的方法
                on: {
               
                  tap: () => {
               
                    this.playAction(this.page - 1);
                    console.log('点击: ', this.page);
                  },
                  // 上滑 当屏幕向上滑动时
                  slidePrevTransitionStart: () => {
               
                    if (this.page > 1) {
               
                      this.page -= 1;
                      this.preVideo(this.page - 1);
                    }
                  },
                  // 下滑动 当屏幕向下滑动时
                  slideNextTransitionStart: () => {
               
                    this.page += 1;
                    this.nextVideo(this.page - 1);
                  },
                },
              },
              // 标识翻页
              page: 1,
            };
          },
          methods: {
               
            playAction(index) {
               
              // index 当前屏幕上显示的视频是第几个视频
              // 调用videos组件的playOrStop 方法
              this.$refs.videos[index].playOrStop();
            },
            // 用户下拉时暂停当前正在播放的视频并自动播放上一个视频
            preVideo(index) {
               
              this.$refs.videos[index].play();
              this.$refs.videos[index + 1].stop();
            },
            // 用户上滑时暂停当前正在播放的视频并自动播放下一个视频
            nextVideo(index) {
               
              this.$refs.videos[index].play();
              this.$refs.videos[index - 1].stop();
            },
          },
      

---

总结

本章节主要内容包括：

• 视频播放与暂停
• ref 在父组件内调用子组件的方法（父子组件方法调用）
• 视频自动播放
• swiper 组件的点击事件 on tap
• swiper 的上滑下滑的事件：
  • slidePrevTransitionStart 上滑方法
  • slideNextTransitionStart 下拉方法
• 要知道当前正在播放的视频是 videoList 中 data 数组中的哪一个，然后在父组件 VideoList 组件内调用子组件 Videos 中的 play()/stop() 方法来实现视频的自动播放与暂停。

---

上一章节： 7. 点赞评论分享以及唱片旋转动画

下一章节： 9. 视频评论列表

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

---

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。