时间戳

首页 > 解决方案 > 更改 Video.js 标记的颜色

javascript - 更改 Video.js 标记的颜色

问题描述

我的项目有问题。我使用了非常有用的“创建带有时间标记的视频播放器 - 逐步”项目，可在此处获得：https ://www.endpoint.com/blog/2016/03/17/creating-video-player-with-time -标记

我创建了自己的代码，如下所示：

    function EnvoiQ(){
    			var current = video.currentTime();
    			var texteQ = $("#texteQ").val();

    			video.markers.add({
            		markers: {time: current,  text: texteQ},
          		});
    		}
<button id="question" onclick="EnvoiQ()" type="button" class="btn btn-primary">Hello</button>

当我单击“嘿”按钮时，我会在单击按钮的位置创建一个新标记。

但现在，我想编辑我的标记的颜色。事实上，我有 2 个按钮，当我点击第一个时，我的标记应该是红色的，当我点击第二个时，我的标记应该是黄色的。

问题是：经过数小时的操作，我无法让一种颜色对应一个按钮。标记是一个 JS 对象，它的颜色定义如下：

var e = {
        markerStyle: {
            width: "7px",
            "border-radius": "30%",
            "background-color": "red"
        },

默认情况下，颜色是红色，但是如何根据单击的按钮更改此颜色？

标签： javascripthtmlvideo.js

解决方案

这个问题似乎在项目的 GitHub 页面上的一个问题中得到解决。我已经为后代复制了项目所有者的答案：

您只想更改 1 个特定标记还是全部？您可以做的是分配一个自定义标记类，如markers数组中提供的那样。然后在onMarkerReachedor的回调中onMarkerClick，手动更改此类的 css。

让我知道这是否有效。

// setup plugin
player.markers({
   onMarkerClick: function(marker) {
     // change stlye here based on marker.class
   },
   markers: [{
      time: 9.5, 
      text: "marker", 
      overlayText: 'overlay', 
      class: 'custom-marker1'
   }]
});

推荐阅读