Question

我的项目有问题。我使用了非常有用的“使用时间标记创建视频播放器-逐步操作”项目，该项目位于：https://www.endpoint.com/blog/2016/03/17/creating-video-player-with-time-markers

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

    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"
        },

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

Answer 1

该问题似乎在项目的GitHub页面上的issue中得到了解决。为了后代，我在下面复制了项目所有者的答案：

您是否只想更改1个特定标记或全部？你可以做什么   被分配了一个自定义标记类，如markers数组中所提供。   然后在onMarkerReached或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'
   }]
});

Answer 2

我不确定您要寻找什么。让我知道是否有帮助！

<button id="question" onclick="e.markerStyle['background-color']='red'; EnvoiQ();" type="button" class="btn btn-primary">Button 1</button>
<button id="question" onclick="e.markerStyle['background-color']='yellow'; EnvoiQ();" type="button" class="btn btn-primary">Button 2</button>

更改Video.js标记的颜色

2 个答案: