使用videojs-markers添加打点功能

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情

前言

今日份需求：在视频播放的时候添加打点标志的功能。

项目背景：Vue2+vuec-cli3，选用UI框架element-ui,原播放器使用video.js

关于如何在使用video.js进行打点功能呢？肯定是去寻找video.js的周边拓展啦，果不其然找到了videojs-markers。官网在这：github.com/spchuang/vi…。

本文就来大致总结一下videojs-markers如何使用，并且在开发过程中遇到的坑。

使用

首先添加video.js和videojs-markers插件，并在h5页面上添加视频和视频源。

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

<video id="myVideo" controls class="video-js vjs-default-skin">
   <source src="http://xxxxx.mp4" type="video/mp4">
</video>

• 配置markerStyle属性：可以自定义打点标记的大小和颜色等css样式
• 配置markers属性：可以设置打点的时间点和需要标志的文本
• 配置markerTip属性：如果设置其display为true,那么可以设置当鼠标hover到对应的点时可出现的文本
• 配置onMarkerReached属性：可以触发到达某个打点标志时的事件，在此处编写任意业务逻辑。

  var players = videojs('myVideo');     
    players.markers({
       markerStyle: {
         'width':'5px',
         'background-color': 'red'
     },
       markers: [
            {time: 1, text: "this is number 1"},
            {time: 10,  text: "this is number 10"},
            {time:30,text: "this is number 30"},
            {time: 40,  text: "this is number 40"}
       ],
       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-ui，于是我用了深度指向，将videojs-markers引入进来。则成功了。

<style scoped>
import './../../../node_modules/videojs-markers/dist/videojs.markers.min.css';
.demo>>>.vjs-marker{
  position:absolute;
  left:0;
  bottom:0em;
  opacity:1;
  height:100%;
  transition:opacity .2s ease;
  -webkit-transition:opacity .2s ease;
  -moz-transition:opacity .2s ease;
  z-index:100;
}
</style>