在vue项目中使用video.js实现视频播放和视频进度条打点

一、用video.js实现视频播放

1、安装video.js插件

// 安装video.js插件
npm install video.js -S 

// 如果需要播放rtmp直播流，需安装一下插件
npm install videojs-flash -S

2、在组件代码里使用

<template>

    <div data-vjs-player>
      <video ref="videoNode" class="video-js vjs-default-skin">
        抱歉，您的浏览器不支持
      </video>
    </div>

</template>

引入videojs插件

import videojs from "video.js";

//播放器中文，不能使用.js文件
import videozhCN from "video.js/dist/lang/zh-CN.json";

//样式文件注意要加上
import "video.js/dist/video-js.css"; 

//如果要播放RTMP要使用flash 需要先npm i videojs-flash
import "videojs-flash";


export default {

    data() {
        return {
          player: null,
          controls: true
        };
    },

    //初始化播放器
    mounted(){
        let options = {
            autoplay: true, // 自动播放
            language: "zh-CN",
            controls: this.controls, // 控制条
            preload: "auto", // 自动加载
            errorDisplay: true, // 错误展示
            // fluid: true, // 跟随外层容器变化大小，跟随的是外层宽度
            width: "500px",
            height: "500px",
            // controlBar: false,  // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但是存在
            // textTrackDisplay: false,  // 不渲染字幕相关DOM
            userActions: {
              hotkeys: true // 是否支持热键
            },
            notSupportedMessage: "此视频暂无法播放，请稍后再试",
            techOrder: ["h5","flash"], // 定义Video.js技术首选的顺序
            sources: [
              {
                src: './video/xxx.mp4', // 视频或者直播地址
                type: 'video/mp4',
                //type: 'rtmp/flv',
              }
            ]
        };

        this.player = videojs(

            this.$refs.videoNode,

            options,

            function onPlayerReady() {
              videojs.log(`Your player is ready!`);
            }
        );

        videojs.addLanguage("zh-CN", videozhCN);
    },

    beforeDestroy() {

        if (this.player) {
          this.player.dispose();
        }
    }
}

注意：controls 如果不是true的话，不会显示播放按钮

3、播放按钮居中 

播放按钮默认在左上角，是作者认为会遮挡内容考虑的，不过这个是可以根据参数修改的，只需要给video标签加一个class（vjs-big-play-centered）就可以了。

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

二、用videojs-markers实现视频进度条打点

要实现的功能是视频的进度条上面有一些小点，然后鼠标放上去会出现一些文字提示。

1、安装videojs-markers

npm i videojs-markers -S

2、引入videojs-markers

// 引入videojs-markers
import "videojs-markers";

//引入样式
import "videojs-markers/dist/videojs.markers.css";

3、使用videojs-markers

this.player.markers({

  markerStyle: {
    // 标记点样式
    width: "0.7em",
    height: "0.7em",
    bottom: "-0.20em",
    "border-radius": &#