CODEWITHSUNDEEP
javascripthtmlvideo.js
Jozx
Jozx

Reputation: 61

Videojs-marker: how can I customize a special marker rather than using general 'markers'?

I’m using videojs-marker plugin(http://www.sampingchuang.com/videojs-markers) to build a customized player by which the users can annotate (name the action of a person) some parts (not just a point) of a video, so my plan is to make every marker have its proper width(thus it can cover the duration of this action) and also a proper display time for the overlay text.

<script>
var player = videojs("my-video", {
    controls: true,
    autoplay: false,
    preload: 'auto',
...
player.markers({
       markerStyle: {
          'width':'10px',
          'border-radius': '30%',
          'background-color': '#009DE0'
       },
       markerTip:{
          display: true,
          text: function(marker) {
             return marker.text;
          },
          time: function(marker) {
             return marker.time;
          }
       },
       breakOverlay:{
          display: true,
          displayTime: 1,
          style:{
             'width':'100%',
             'height': '20%',
             'background-color': 'rgba(0,0,0,0.7)',
             'color': 'white',
             'font-size': '17px'
          },
          text: function(marker) {
             return marker.overlayText;
          }
       },
       onMarkerClick: function(marker) {},
       onMarkerReached: function(marker) {},
         markers: [
         {time: 9.5, text: "1",overlayText: 'attack', class: 'custom-marker'},
         {time: 15, text: "2",overlayText: 'defense'}
         ]

        });
...

So, the users will manipulate another div to add a special marker by entering the information: start time, end time and definition for each action. Then this marker will show in the timeline, I have already some ideas about this part. So now, I just wonder how to create ‘marker’ object and set its own ‘markerStyle’ rather than using ‘markers’ class and entering new informations in this markers’ list

markers: [
     {time: 9.5, text: "p1",overlayText: 'attack', class: 'custom-marker'},
     {time: 15, text: "p2",overlayText: 'defense'}
     ]

I’m new here, and I’m sorry if the description is not clear, please give me your feedback,thanks!

Upvotes: 5

Views: 3206

Answers (1)

Jozx
Jozx

Reputation: 61

I spent too much time thinking about the width, so that i omit an attribute: the 'duration'. The solution is simple , just by adding duration to the snippet:

markers: [
 {time: 9.5,duration:3, text: "p1",overlayText: 'attack', class: 'custom-marker'},
 {time: 15, duration:2 ,text: "p2",overlayText: 'defense'}
 ]

Upvotes: 1

Related Questions