Videojs-marker：如何自定义特殊标记而不是使用通用“标记”？

Question

I\xe2\x80\x99m 使用 videojs-marker 插件（http://www.sampingchuang.com/videojs-markers）构建一个自定义播放器，用户可以通过它注释（命名一个人的动作）某些部分（不是只是视频的一个点），所以我的计划是使每个标记都有其适当的宽度（因此它可以覆盖此操作的持续时间）以及覆盖文本的适当显示时间。

\n\n

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

\n\n

因此，用户将通过输入信息来操纵另一个 div 添加特殊标记：每个操作的开始时间、结束时间和定义。然后这个标记就会显示在时间轴上，我对这部分已经有了一些想法。所以现在，我只是想知道如何创建 \xe2\x80\x98marker\xe2\x80\x99 对象并设置自己的 \xe2\x80\x98markerStyle\xe2\x80\x99 而不是使用 \xe2\x80\x98markers\xe2\ x80\x99 类并在此标记\xe2\x80\x99 列表中输入新信息

\n\n

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

\n\n

我\xe2\x80\x99m是新来的，我\xe2\x80\x99m抱歉，如果描述不清楚，请给我您的反馈，谢谢！

\n

Answer 1

我花了太多时间考虑宽度，所以我省略了一个属性：“持续时间”。解决方案很简单，只需在片段中添加持续时间即可：

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