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

最新推荐文章于 2024-06-11 15:46:01 发布

八了个戒

最新推荐文章于 2024-06-11 15:46:01 发布

阅读量1.1k

点赞数

分类专栏： Vue 实战系列文章标签： vue javascript js web

本文链接：https://blog.csdn.net/XH_jing/article/details/116979809

版权

Vue 实战系列专栏收录该内容

22 篇文章 3 订阅

订阅专栏

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

项目仓库地址，欢迎 Star

实现效果

功能实现

首个视频自动播放

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

VideoList.vue
给 <Videos> 组件传递当前视频的索引值 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>

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>

视频的播放与暂停

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

Videos.vue

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

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>

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

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

Videos.vue

部分代码：

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

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() 方法来实现视频的自动播放与暂停。