Невозможно отобразить маркеры, используя уже существующие аннотации в видео js -annotation-comments - PullRequest
Новая
       47

Невозможно отобразить маркеры, используя уже существующие аннотации в видео js -annotation-comments

0 голосов
/ 02 апреля 2020

У меня есть несколько аннотаций, которые я пытаюсь визуализировать на проигрывателе видео js с использованием видео js -annotation-comments. Проблема, с которой я сталкиваюсь, заключается в том, что аннотации отображаются на игроке. Но я не могу видеть маркеры на временной шкале. Принимая во внимание, что когда я создаю новую аннотацию внутри плеера, в это время видны маркеры

Ниже javascript и html файл

my. js

const annotationsObjects = [{
    id: 10,
    range: {
        start: 100,
        end: 100
    },
    shape: {
         x1: 35,
        x2: 44,
        y1: 19,
        y2: 56
    },
    comments: [{
        id: 1,
        meta: {
            datetime: '2017-03-28T19:17:32.238Z',
            user_id: 1,
            user_name: 'tarun'
        },
        body: 'tarun 1'
    }]
},
{
    id: 11,
    range: {
        start: 200,
        end: 200
    },
    shape: {
         x1: 35,
        x2: 44,
        y1: 19,
        y2: 56
    },
    comments: [{
        id: 1,
        meta: {
            datetime: '2017-03-28T19:17:32.238Z',
            user_id: 1,
            user_name: 'varun'
        },
        body: 'varun1'
    }]
}];

const pluginOptions = {
    // Collection of annotation data to initialize
    annotationsObjects: annotationsObjects,
    // Flexible meta data object (currently used for user data, but addl data can be provided to wrap each comment with metadata - provide the id of the current user and fullname of the current user at minimum, which are required for the UI)
    meta: { user_id: 123, user_name: "tarun" },
    // Use arrow keys to move through annotations when Annotation mode is active
    bindArrowKeys: true,
    // Show or hide the control panel and annotation toggle button (NOTE - if controls are hidden you must provide custom UI and events to drive the annotations - more on that in "Programmatic Control" below)
    showControls: true,
    // Show or hide the comment list when an annotation is active. If false, the text 'Click and drag to select', will follow the cursor during annotation mode
    showCommentList: true,
    // If false, annotations mode will be disabled in fullscreen
    showFullScreen: true,
    // Show or hide the tooltips with comment preview, and annotation shape, on marker hover or timeline activate
    showMarkerShapeAndTooltips: false,
    // If false, step two of adding annotations (writing and saving the comment) will be disabled
    internalCommenting: true,
    // If true, toggle the player to annotation mode immediately after init. (NOTE - "annotationModeEnabled" event is not fired for this initial state)
    startInAnnotationMode: false
};

var player = videojs('my-player');
var plugin = player.annotationComments(pluginOptions);
plugin.registerListener('onStateChanged', (event) => {
  console.log(event);
});

player.markers({
 breakOverlay:{
      display: false
   },
 markerStyle: {
     'width':'8px',
     'background-color': 'red'
  },
  markers: [
     {time: 100, text: "Tarun Annotate 1"},
     {time: 200,  text: "Tarun Annotate 2"}
  ]
});

plugin.registerListener('annotationModeEnabled', (event) => {

});
$( "#showAnnotation1" ).click(function() {
  
plugin.fire('openAnnotation', { id: 10 });
});
$( "#showAnnotation2" ).click(function() {
plugin.fire('openAnnotation', { id: 11 });
});
<html>

<head>
<style>
#my-player{
	width: 50%;
	height: 50%;
	margin-left: 25%;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link href="http://vjs.zencdn.net/6.7/video-js.min.css" rel="stylesheet">
<link href="./annotations.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/6.7/video.min.js"></script>
<script src="./videojs-annotation-comments.js"></script>
<link href="./videojs.markers.css"></link>
<script src="./videojs-markers.js"></script>
</head>

<body>

<video id="my-player" class="video-js vjs-default-skin" controls preload="auto" data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'>
  <source src="./video.mp4" type="video/mp4"></source>
</video>

<a id="showAnnotation1">tarun</a>
<a id="showAnnotation2">varun</a>

</body>
<script src="./my.js"></script>

</html>
...