在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样式拷贝进来，使用深度指向。就成功了。如下：

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

Jenkins中安装Credentials Binding插件时提示:Failed to load: SSH Credentials Plugin (1.18.2),Jenkins(2.282)or
场景 Jenkins中安装Credentials Binding插件时提示 Failed to load: SSH Credentials Plugin (1.18.2),Jenkins(2.282) ...
Element ui中table标签上下滚动时表格错位
在style中加 /deep/.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 20px; }
VSCode中安装live server插件时出现Open a folder or workspace... (File -＞ Open Folder）错误
当安装完live server插件时运行会在右下角报Open a folder or workspace... (File -> Open Folder)错误时,大家不必着急,这个就是vscod ...
在iframe框架中全屏不好使的原因
遇到的问题:我是在iframe框架中添加了一个插件在360和火狐中不好使,将allowfullscreen="true" 属性配置好就没问题了: 可能出现的原因:将allowful ...
安装Eclipse ADT插件时遇到的问题
最近开学Android开发,大家都知道Android开发入门必需掌握的是Android开发环境的搭建,在搭建Android开发环境过程中安装Eclipse ADT插件时遇到了: Android DDM ...
解决安装Eclipse ADT插件时连接不上-报错
最近开学Android开发,大家都知道Android开发入门必需掌握的是Android开发环境的搭建,在搭建Android开发环境过程中安Eclipse ADT插件时遇到了: Android DDMS ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...
[DT框架使用教程01]如何在DT框架中创建插件
[DT框架使用教程01]如何在DT框架中创建插件 DT框架代码地址: https://github.com/huifeng-kooboo/DT 由于国内访问速度的问题也可以访问gitee的地址: h ...
SSM框架中分页插件pageHelper的使用实例
文章目录分页原理 1.导入依赖 2.在mybatis配置文件中配置 3.controller 4.前端展示 5.pageInfo工具类中的属性分页原理物理分页实现原理: SELECT * FR ...
【Android 插件化】Hook 插件化框架 ( 使用 Hook 方式替换插件 Activity 的 mResources 成员变量 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...

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

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

最新文章

热门文章