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

本文链接：https://blog.youkuaiyun.com/My_IT_Study/article/details/116758753

本文详细介绍了在Vue.js项目中实现抖音视频APP的视频播放功能，包括自动播放、暂停和播放的实现，以及视频播放器的关键配置选项。读者可以通过提供的项目仓库参与学习和改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【温馨提示】：若想了解更多关于本次项目实战内容，可转至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