关于vue.js:Videojs-使用教程-手把手教你基于-Vue-搭建-HTML-5-视频播放器

本文首发：《Video.js 应用教程 – 手把手教你基于 Vue 搭建 HTML 5 视频播放器》

Video.js 是最弱小的网页嵌入式 HTML 5 视频播放器的组件库之一，也是大多数人首选的网页视频播放解决方案。简单的网页视频渲染，在引入 Video.js 后，轻松解决。本教程手把手教你搭建一套基于 Vue 的 Video.js 视频播放页。

追随本教程学习，最终你能够本人搭建一套能够播放本地视频文件及网络流媒体的网页视频播放器。学习如何批改 video.js 的默认款式来实现播放按钮自定义形态 (圆形)、居中及播放工夫的显示与否，如何播放 m3u8 格局，以及如何应用 video 的属性、事件及办法，音量增减，最终实现一个功能齐全的视频播放器。

追随本教程学习，搭建的最终 video.js HTML5 视频播放成果。

另外，这个世界曾经悄悄发生变化，当初基本无需写任何前端代码，间接应用卡拉云 —— 新一代低代码开发工具帮你搭建后盾工具，卡拉云可一键接入常见数据库及 API，无需懂前端，内置欠缺的各类前端组件，无需调试，拖拽即用。原来三天的工作量，当初 1 小时搞定，谁用谁晓得，用上早上班，详见本文文末。

配置 Vue 环境 – 根底局部

通过 npm 装置 Vue 脚手架 vue-cli

npm install -g @vue/cli

而后创立一个 Vue 我的项目 kalacloud-vue-video

vue create kalacloud-video

抉择适合的选项后，装置实现，通过 cd 命令进入 kalacloud-vue-video 目录 (此目录为咱们的主开发目录)，应用 npm run serve 命令，能够将我的项目运行起来。

在 Vue 中应用 videojs

首先应用 npm 装置 video.js

npm i video.js

装置结束后，在 main.js 中进行引入

import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$video = videojs;

为了代码复用性，咱们来创立一个 PlayerVideo 组件。在组件中咱们别离定义 template 局部和 script 如下

最开始咱们选用默认源链接: https://playtv-live.ifeng.com…

<!-- controls：向用户显示播放按钮控件 -->
<template>
  <video
    ref="video"
    class="video-js vjs-default-skin"
    width="600"
    height="400"
    controls
  >
    <source src="https://playtv-live.ifeng.com/live/06OLEGEGM4G.m3u8" />
  </video>
</template>
export default {data() {
    return {player: null, // 用来存储以后 video};
  },
  mounted() { // 渲染视频
    this.player = this.$video(this.$refs.video);
  },
};

而后删除掉初始化 vue 我的项目默认的 App.vue 内代码，将 PlayerVideo 组件增加到 App 中，并调整播放器至两头。

<template>
  <div id="app">
    <div class="video-content">
      <player-video :src="src"></player-video>
    </div>
  </div>
</template>
<script>
  import PlayerVideo from "./components/PlayerVideo.vue";
  export default {
    components: {
      PlayerVideo,
      data() {
        return {src: "http://vjs.zencdn.net/v/oceans.mp4",};
      },
    },
  };
</script>
<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;

    .video-content {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
    }
  }
</style>

在 kalacloud-vue-video 根目录应用 npm 运行下列命令:

npm run serve

在浏览器关上 http://localhost:8080/ 就能够胜利渲染视频。

咱们大抵的来看一下目前视频播放器领有的性能:

• 播放与暂停性能 (目前播放按钮位于左上角)
• 能够调节音量
• 反对全屏与小屏播放

同样咱们也能够发现一些不合乎日常习惯的中央:

• 播放按钮通常位于两头
• 播放按钮个别为圆形
• 暂停时会显示播放按钮

上面咱们就讲述一些 tips 优化一下播放器。

扩大浏览：《最好用的 6 款 Vue 拖拽组件库举荐》

如何使 Video.js 播放按钮垂直居中

将播放按钮垂直居中非常容易实现，video 官网提供了 vjs-big-play-centered。给 <video> 标签增加 vjs-big-play-centered 类名就能够实现播放按钮垂直居中。

<video class="video-js vjs-default-skin vjs-big-play-centered"></video>

如何批改 Video.js 播放按钮为圆形

批改播放按钮为圆形须要批改对应类名的 CSS 款式。咱们在 PlayerVideo 组件的 style 中增加下列款式代码。

批改时属性必须设置为 !important，否则不会失效。

.video-js .vjs-big-play-button {
  font-size: 2.5em !important;
  line-height: 2.3em !important;
  height: 2.5em !important;
  width: 2.5em !important;
  -webkit-border-radius: 2.5em !important;
  -moz-border-radius: 2.5em !important;
  border-radius: 2.5em !important;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5) !important;
  border-width: 0.15em !important;
  margin-top: -1.25em !important;
  margin-left: -1.75em !important;
}
.vjs-big-play-button .vjs-icon-placeholder {font-size: 1.63em !important;}

扩大浏览：《最好用的 12 款 Vue Timepicker 工夫日期选择器测评举荐》

如何批改 Video.js 暂停时显示播放按钮

这个性能同样能够通过批改 CSS 实现。在 PlayerVideo 组件的 style 中增加下列款式代码。

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {display: block !important;}

如何设置 Video.js 显示以后播放工夫

通过批改两个类的状态能够实现显示播放工夫的性能，在 PlayerVideo 组件中设置下列款式代码:

.video-js .vjs-time-control {display: block !important;}
.video-js .vjs-remaining-time {display: none !important;}

扩大浏览：《vue.draggable 入门指南 – 手把手教你开发工作看板》

进阶应用局部

根底局部咱们应用 this.$video(this.$refs.video) 渲染出播放器，但 this.$video 实质上是 video.js 提供的 videojs 函数，videojs 函数共有三个参数，第一个参数是绑定播放器的元素，第二参数为 options 对象，提供播放器的配置项，第三个参数为播放器渲染后的回调函数。

咱们给 PlayerVideo 组件的 data 增加 options 对象，并设置 controls 为 false，同时设定一个简略的回调函数。

controls 属性是用来管制播放器是否具备与用户交互的控件——播放按钮等。如果设置为 false，播放器将不显示播放控件，那么视频只能通过 Player API 或者 autoplay 管制播放。

export default {data() {
    return {
      player: null,
      options: {controls: false},
    };
  },
  mounted() {this.player = this.$video(this.$refs.video, this.options, () => {alert("播放器渲染实现");
    });
  },
};

咱们能够发现，播放器渲染实现后，浏览器收回了告诉，并且播放器上没有控件呈现。

更多的配置项链接: video-options

Video.js 罕用事件

video 提供了很多罕用事件，咱们能够通过监测事件来解决不同的逻辑。

例如监测 play/pause 事件，给用户发送揭示

批改 PlayerVideo 组件中的 mounted 办法:

mounted() {this.player = this.$video(this.$refs.video, this.options, function () {this.on("play", () => {alert("视频曾经开始播放，祝你有好的体验");
    });
    this.on("pause", () => {alert("视频曾经暂停");
    });
  });
}

扩大浏览：《Vue 实现 PDF 文件在线预览 – 手把手教你写 Vue PDF 预览性能》

Video.js 音量记忆性能

为了让大家更能了解监听事件的用途，咱们举一下理论的案例: 音量记忆性能。

为了更好的用户体验，用户每次调整音量后，咱们应该帮其记住以后音量。当用户刷新页面或者从新进入页面后，无需再次调整音量。

这个性能其实不难实现:

• 监听 volumechange 事件，当用户批改音量时，把此音量存储到 localStorage 中 (如果音量性能会有多个组件应用，倡议同时寄存在 Vuex 中 )
• 当页面刷新或进入页面后，从 localStorage 中取出音量值，同步设置播放器音量。

咱们批改一下 PlayerVideo 组件，使其能够承受属性 volume 音量值，同时增加事件 volumechange 和 play 事件的监听。

当 volumechange 触发时，将以后音量值存储到 localStorage 中；当 play 事件触发时，更新音量值。

<template>
  <video
    ref="video"
    controls
    class="video-js vjs-default-skin vjs-big-play-centered"
    width="600"
    height="400"
  >
    <source src="https://playtv-live.ifeng.com/live/06OLEGEGM4G.m3u8" />
  </video>
</template>

<script>
  export default {
    // 承受 App 传值
    props: ["volume"],
    data() {
      return {
        player: null,
        // volumnVideo 记录音量
        volumeVideo: this.volume,
      };
    },
    mounted() {
      const _this = this;
      this.player = this.$video(this.$refs.video, this.options, function () {this.on("volumechange", () => {
          // 存储音量
          _this.volumeVideo = this.volume();
          window.localStorage.volume = this.volume();});
        this.on("play", () => {this.volume(this.volumeVideo);
        });
      });
    },
  };
</script>

同时在 App.vue 中应用全局钩子函数 beforeCreate 获取到 localStorage 中存取的 volume

beforeCreate() {this.volume = window.localStorage.volume;},

通过上述步骤，就能够胜利实现音量记忆性能。

扩大浏览：《顶级好用的 8 款 Vue 弹窗组件测评与举荐》

Video.js 简略视频播放器搭建

上面我带大家实现一下播放器的各种管制办法: 开始、暂停、从新加载、快进、后退、增大音量、升高音量以及换台性能。

video.js 对于这些管制办法都对应提供了办法。咱们只需对提供的办法略作封装，即可应用。

上面咱们就利用 video.js 提供的办法实现一个简略的播放器性能。

咱们别离批改 PlayerVideo 组件和 App 组件如下:

PlayerVideo.vue 代码如下:

<template>
  <video
    ref="video"
    controls
    class="video-js vjs-default-skin vjs-big-play-centered"
    width="600"
    height="400"
  >
    <source :src="src" />
  </video>
</template>

<script>
  export default {props: ["volume", "src"],
    data() {
      return {
        player: null,
        volumeVideo: this.volume,
      };
    },
    methods: {
      // 封装播放器办法
      play() {this.player.src({ src: this.src});
        this.player.load(this.src);
        this.player.play(this.volumeVideo);
      },
      stop() {this.player.pause();
      },
      reload() {this.stop();
        this.player.load({});
        this.play();},
      forward() {const currentTime = this.player.currentTime();
        this.player.currentTime(currentTime + 5);
      },
      back() {const currentTime = this.player.currentTime();
        this.player.currentTime(currentTime - 5);
      },
      volumeUp() {this.player.volume(this.volumeVideo + 0.1);
      },
      volumeDown() {this.player.volume(this.volumeVideo - 0.1);
      },
      toggleTv(obj) {this.player.src(obj.src);
        this.player.load(obj.load);
        this.player.play(this.volumeVideo);
      },
    },
    mounted() {
      const _this = this;
      this.player = this.$video(this.$refs.video, this.options, function () {this.on("volumechange", () => {
          // 存储音量
          _this.volumeVideo = this.volume();
          window.localStorage.volume = this.volume();});
        this.on("play", () => {this.volume(this.volumeVideo);
        });
      });
    },
  };
</script>

<style>
  .video-js .vjs-time-control {display: block !important;}
  .video-js .vjs-remaining-time {display: none !important;}

  .video-js .vjs-big-play-button {
    font-size: 2.5em !important;
    line-height: 2.3em !important;
    height: 2.5em !important;
    width: 2.5em !important;
    -webkit-border-radius: 2.5em !important;
    -moz-border-radius: 2.5em !important;
    border-radius: 2.5em !important;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, 0.5) !important;
    border-width: 0.15em !important;
    margin-top: -1.25em !important;
    margin-left: -1.25em !important;
  }
  .vjs-big-play-button .vjs-icon-placeholder {font-size: 1.63em !important;}

  .vjs-paused .vjs-big-play-button,
  .vjs-paused.vjs-has-started .vjs-big-play-button {display: block !important;}
</style>

App.vue 代码如下:

<template>
  <div id="app">
    <div class="video-content">
      <h2> 应用 video.js 在网站中搭建视频 </h2>
      <h3> 卡拉云——低代码开发工具，1 秒搭建上传后盾 </h3>
      <player-video :volume="volume" ref="video" :src="src"></player-video>
    </div>
    <div class="button-group">
      <el-button class="primary" @click="playVideo"> 开始视频 </el-button>
      <el-button class="primary" @click="stopVideo"> 暂停视频 </el-button>
      <el-button class="primary" @click="reloadVideo"> 从新加载 </el-button>
      <el-button class="primary" @click="forwardVideo"> 视频快进 </el-button>
      <el-button class="primary" @click="backVideo"> 视频后退 </el-button>
      <el-button class="primary" @click="volumeUpVideo"> 增大音量 </el-button>
      <el-button class="primary" @click="volumeDownVideo"> 升高音量 </el-button>
      <el-button class="primary" @click="toggleToFenghuangwang"
        > 凤凰卫视 </el-button
      >
      <el-button class="primary" @click="toggleToDefault"> 默认频道 </el-button>
    </div>
  </div>
</template>
<script>
  import PlayerVideo from "./components/PlayerVideo.vue";

  export default {
    components: {PlayerVideo,},
    data() {
      return {
        volume: 0.5,
        src: "http://vjs.zencdn.net/v/oceans.mp4",
      };
    },
    computed: {video() {return this.$refs.video;},
    },
    methods: {
      // 父类组件调用子组件办法，触发播放器性能
      stopVideo() {this.video.stop();
      },
      playVideo() {this.video.play();
      },
      reloadVideo() {this.video.reload();
      },
      forwardVideo() {this.video.forward();
      },
      backVideo() {this.video.back();
      },
      fullScreenVideo() {this.video.fullScreen();
      },
      screenVideo() {this.video.exitScreen();
      },
      volumeUpVideo() {this.video.volumeUp();
      },
      volumeDownVideo() {this.video.volumeDown();
      },
      toggleToFenghuangwang() {
        this.video.toggleTv({
          src: {
            type: "application/x-mpegURL",
            src: "https://playtv-live.ifeng.com/live/06OLEGEGM4G.m3u8",
          },
          load: "https://playtv-live.ifeng.com/live/06OLEGEGM4G.m3u8",
        });
      },
      toggleToDefault() {
        this.video.toggleTv({
          src: {
            type: "video/mp4",
            src: "http://vjs.zencdn.net/v/oceans.mp4",
          },
          load: "http://vjs.zencdn.net/v/oceans.mp4",
        });
      },
    },
    beforeCreate() {this.volume = window.localStorage.volume;},
  };
</script>
<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    display: flex;
    .video-content {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
    }
    .button-group {
      margin-top: 20px;
      display: flex;
      flex: 0 0 100px;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
    }
  }
</style>

搭建实现。

应用 video.js 搭建视频总结

本教程零碎的带大家学习如何应用 video.js 在网站中搭建视频播放器，如果你跟着教程走下来，肯定也实现了和教程中一样的视频播放器。如果你感觉太简单，不想解决前端问题，举荐应用卡拉云，卡拉云是新一代低代码开发工具，内置各类前端组件，无需懂任何前端，仅需拖拽即可疾速生成。

下图为应用卡拉云搭建的外部视频审核零碎的 Demo 版，仅需拖拽，1 小时搞定。

卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。

扩大浏览：

• 最好用的 10 款 MySQL GUI 数据库管理工具横向测评 – 收费和付费到底怎么选?
• 最好用的 7 款 Vue3 admin 后盾管理系统框架测评
• 最好的 6 个收费天气预报 API 接口比照测评 – 和风天气、高德天气等 API 接入详解
• 最棒的 7 个 Laravel admin 后盾管理系统举荐
• Vue Router 手把手教你搭 Vue3 路由页面跳转
• React Draggable 实现拖拽组件库 – 最具体中文应用教程
• Echarts 折线图齐全配置指南