vue视频 节点提示

安装
yarn add video.js -S
yarn add videojs-markers -S

在全局钟引入main.js
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-markers/dist/videojs-markers'
import 'videojs-markers/dist/videojs.markers.css'
import 'videojs-markers'

import Video from 'video.js'
Vue.prototype.$video = Video


<video
      id="videoid"
      controls
      class="video-js vjs-default-skin vjs-big-play-centered"
    >
      <source src="../assets/2.mp4" type="video/mp4" />
    </video>

===============
export default {
  data() {
    return {
      video: "",
    };
  },
  mounted() {
    //创建一个视频对象
    this.video = this.$video("videoid", {
      width: 800,
      height: 450,
    });

    //创建标记对象
    this.video.markers({
      markerTip: {
        text: function (marker) {
          return marker.text;
        },
      },
      markers: [
        { time: 9.5, text: "事故发生之前300米", class: "white-marker-class" },
        { time: 16, text: "事故发生点，2020年7月17日" },
        { time: 23.6, text: "事故发生后400米", class: "white-marker-class" },
      ],
    });
  },

  //页面离开时销毁视频对象
  destroyed() {
    this.videos.dispose();
  },
};
https://www.cnblogs.com/lp1996/p/13213569.html //属性方法


=====================分割线=========================
更新一个巨坑

<template>
  <div class="demo">
    <video id="demo"    dispose preload controls class="video-js vjs-default-skin">
      <source :src="srb" type="video/mp4" />
    </video>
  </div>
</template>

<script>
import videojs from "video.js";
import "videojs-markers";
import { getVideoData } from "@/api/pro/video";

export default {
  name: "viewVideo",
  data() {
    return {
      srb: "",
      makTips: [
        { time: 0.7, text: "页面5人" },
        { time: 1.6, text: "页面共6人" },
        { time: 3.4, text: "页面共7人" },
      ],
      list: [],
    };
  },
  mounted() {
    //获取视频列表
    this.test();
  },
  methods: {
    test() {
      const id = this.$route.params.id || this.$store.state.params.viewVideoId;
      if (!id) {
        return;
      }
      this.$store.dispatch("params/setViewVideoId", id);
      getVideoData({ id }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.msgError("对不起，您查看的视频信息不存在");
          } else {
            this.srb = res.url;
            res.list && (this.list = res.list);
            =============必须要把video.js写在请求内。存在异步问题=======================
            this.$nextTick(() => {
              console.log(2);
              var players = videojs(document.getElementById("demo"));
              players.markers({
                markerStyle: {
                  width: "8px",
                  "background-color": "red",
                },
                markers:this.makTips,
                markerTip: {
                  display: true,
                  text: function (marker) {
                    return marker.text;
                  },
                },
                onMarkerReached: function (marker) {
                  console.log("marker reached: " + marker.text);
                },
              });
            });
          }
        }
      });
    },
  },
  //页面离开时销毁视频对象
  destroyed() {
    this.videos.dispose();
  },
};
</script>

<style scoped lang="scss">
@import "../../../../node_modules/videojs-markers/dist/videojs.markers.min.css";
.video-js{
  width: 700px;
  height: 600px;
  cursor: pointer;
  margin:40px auto;
}
// ======================
::v-deep.video-js .vjs-time-control {
  display: block;
}
::v-deep.video-js .vjs-remaining-time {
  display: none;
}
::v-deep.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
  position: absolute;
  left: 50%;
  margin-left:-43px ;
  margin-top:-23px ;
  top: 50%;
}

::v-deep.video-js .vjs-play-progress {
  background-color: #01d3ff;
  position: relative;
}
::v-deep.video-js .vjs-play-progress:before {
  top: -0.39em;
}
::v-deep.vjs-play-progress {
  color: #01d3ff;
}
::v-deep .vjs-marker {
  background-color: #fff !important;
}
::v-deep.vjs-volume-level::before {
  color: #fff;
  top: -1.8em;
}
// ========================
.demo >>> .vjs-marker {
  position: absolute;
  left: 0;
  bottom: 0em;
  color: #00f;
  opacity: 1;
  height: 100%;
  transition: opacity 0.2s ease;
  -webkit-transition: opacity 0.2s ease;
  -moz-transition: opacity 0.2s ease;
  z-index: 100;
}
.demo >>> .vjs-marker:hover {
  cursor: pointer;
  -webkit-transform: scale(1.3, 1.3);
  -moz-transform: scale(1.3, 1.3);
  -o-transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  transform: scale(1.3, 1.3);
}

.demo >>> .vjs-tip {
  visibility: hidden;
  display: block;
  opacity: 0.8;
  padding: 5px;
  font-size: 10px;
  position: absolute;
  bottom: 14px;
  z-index: 100000;
}
.demo >>> .vjs-tip .vjs-tip-arrow {
  background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==)
    no-repeat top left;
  bottom: 0;
  left: 50%;
  margin-left: -4px;
  background-position: bottom left;
  position: absolute;
  width: 9px;
  height: 5px;
}
.demo >>> .vjs-tip .vjs-tip-inner {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 5px 8px 4px 8px;
  background-color: black;
  color: white;
  max-width: 200px;
  text-align: center;
}
.demo >>> .vjs-break-overlay {
  visibility: hidden;
  position: absolute;
  z-index: 100000;
  top: 0;
}
.demo >>> .vjs-break-overlay .vjs-break-overlay-text {
  padding: 9px;
  text-align: center;
}
</style>