vue.js项目实战运用篇之抖音视频APP-第八节：视频播放功能

Posted 2021-05-16 enjsky.G

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js项目实战运用篇之抖音视频APP-第八节：视频播放功能相关的知识，希望对你有一定的参考价值。

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

第八节：视频播放功能

回顾及介绍

在第五节中我们实现了视频列表及视频播放的组件，在这一章节中将进一步了解视频播放的自动播放、暂停、播放等功能的实现及详细解说。
视频播放组件详细地址：common/components/Vidoes。

视频播放器的配置介绍

1.autoplay：数据类型为bool类型，此参数的作用在于当打开浏览器后是否开始回放，若为true时，则回放；若为false时，则不回放。
2.muted：数据类型为bool类型，此参数是在默认情况下小长任何音频（视频声音）。若为true时，则消除；若为false时，则不消除。
3.loop：数据类型为bool类型，此参数作用于是否视频播放结束即重新开始播放。若为true时，则重新播放；若为false时，则不播放。
4.fluid：数据类型为bool类型，此参数作用于是否按比例缩放适应容器的大小，也可以表示为Video.js player将拥有流体大小。若为true时，则适应缩放；若为false时，则不适应缩放。
5.notSupportedMessage：数据类型为字符类型，此参数为设置默认信息。意思是在视频无法播放时，显示默认信息。如：“此视频暂无法播放，请稍后再试”。

export default {
  name: 'Videos',
  props: ['video', 'index'],
  data() {
    return {
      playerOptions: {
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: 'auto',
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            src: this.video.url,
            type: 'video/mp4', // 类型
          },
        ],
        // poster: "../../static/images/test.jpg", //你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: false,
      },
      playing: true,
      playBtn: '',
    };
  },
 }

自动播放、暂停、播放功能实现

1.自动播放功能
在app打开时即播放视频，或切换视频后自动播放。
如何实现呢？
其实在第三方插件中都考虑好了，只需要修改自动播放参数即可。如下：

export default {
  name: 'Videos',
  props: ['video', 'index'],
  methods: {
   // 控制视频的播放
    playOrStop() {
      if (this.playing) {
        this.$refs.videoPlayer.player.pause();
        this.playing = false;
      } else {
        this.$refs.videoPlayer.player.play();
        this.playing = true;
      }
    },
	// 自动播放 第一个视频
    autoPlayAction() {
      if (this.index === 0) {
        this.playerOptions.autoplay = true;
      }
    }
 }
}

2.暂停播放功能
实现的函数如下：

export default {
  name: 'Videos',
  props: ['video', 'index'],
  methods: {
   // 暂停
    stop() {
      this.$refs.videoPlayer.player.pause();
      this.playing = false;
    },
 }
}

2.开始播放功能
实现的函数如下：

export default {
  name: 'Videos',
  props: ['video', 'index'],
  methods: {
   // 播放事件
    play() {
      this.$refs.videoPlayer.player.play();
      this.playing = true;
    },
 }
}