在element框架中使用videojs-markers插件时，无法正常引入的坑

接到需求：在视频播放的时候添加打点标志的功能。
原项目基本情况：基于element的vue框架，使用的播放视频的插件为：video.js
于是，在网上查找关于video.js插件的打点标志功能，很快就找到了videojs-markers
可参考：https://github.com/spchuang/videojs-markers
使用情况也很简单：如下：
页面中，添加视频

 <div class="demo">
      <video id="demo" controls class="video-js vjs-default-skin">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      </video>
  </div>

添加video.js和videojs-markers插件，

import videojs from 'video.js'
import 'videojs-markers'

js逻辑如下

  var players = videojs('demo');     
    players.markers({
       markerStyle: {
         'width':'8px',
         'background-color': 'red'
     },
       markers: [
            {time: 1, text: "this"},
            {time: 2,  text: "is"},
            {time:3,text: "so"},
            {time: 28,  text: "cool"}
       ],
       markerTip:{
         display: true,
         text: function(marker) {
            return "This is a break: " + marker.text;
            console.log(marker.text)
         }
      },
      onMarkerReached: function(marker) {
        console.log("marker reached: " + marker.text )
       },
    });

但就这样基本操作后，居然还是无法实现打点功能~~！！！
于是我另写了个。不基于element的demo…结果正常使用。
于是开始怀疑是element样式的问题，发现，原来是我的videojs-markers的插件样式没成功引入。于是，我将插件的css样式拷贝进来，使用深度指向。就成功了。如下：