Javascript video.js使用jQuery动态更改颜色

我正在使用video.js，我想以友好的方式更改不同元素（图标、文本）的颜色。 首先，我检索HTML中IConColor变量的值。然后，在JavaScript中，我在DOM中创建元素后执行以下操作：

if (vjs.options.template != 4) {
        $(".vjs-author-control").css("color", vjs.options.iconsColor);
}

这是我的HTML：

<video id="example_video_1" class="video-js vjs-test-skin" controls  width="640" height="360" avatar="" bufferbarcolor="0x9A9894" controlbarcolor="0x4f4c4b" data-preroll="" data-midroll="" data-postroll="" displaytimeline="false" embeded="false" embedibox="true" enableairtv="true" enableembed="true" enablepub="false" enableshare="true" from="Lea" iconscolor="#DA5ADC" idparam="player_1111111" idvideo="111111" isliveid="false" lang="fr" logo="true" position="1" poster="http://www.supportduweb.com/page/media/videoTag/BigBuckBunny.png" preload="auto" preroll="undefined" prerolllink="undefined" progressbarcolor="0x0088C9" ratio="1.33" randomid="1234567891" regie="" shorturl="Fullmetal_Alchemist_Brotherhood_46_French_Xvid http://xfru.it/HD6lnd http://xfru.it/kmBTqV" slice="10" srcga="" start="0" stats="" style="height: 482px" template="1" urlsite="" urlvideo="/videoviewdemo_v2.html" urlvideohd="" vidtitle="Player de test" data-setup="{}" { "autoplay": false }>
         <source id='mp4Source' src="test.mp4" type="video/mp4">
      </video>

以下是我创建元素的方式：

vjs.Author = vjs.Button.extend({
    init: function(player, options){
        vjs.Button.call(this, player, options);
    }
});

vjs.Author.prototype.buttonText = 'Author';

vjs.Author.prototype.buildCSSClass = function(){
  return 'vjs-author-control' + vjs.Button.prototype.buildCSSClass.call(this);
};

vjs.Author.prototype.onClick = function() {};

vjs.Author.prototype.createEl = function(){
  var el = vjs.Component.prototype.createEl.call(this, 'div', {
    className: 'vjs-author-control',
  });
    this.content = vjs.createEl('div', {
        innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">Author</span></div>',
        'aria-live': 'polite'
    });

    if (vjs.options.template != 4) {
        $(".vjs-author-control").css("color", "red");
}

    el.appendChild(vjs.createEl('div').appendChild(this.content));
    return el;
};

vjs.Author=vjs.Button.extend({
初始化：函数（播放器、选项）{
调用（这个，播放器，选项）；
}
});
vjs.Author.prototype.buttonText='Author'；
vjs.Author.prototype.buildCSSClass=函数（）{
返回'vjs author control'+vjs.Button.prototype.buildCSSClass.call（此）；
};
vjs.Author.prototype.onClick=function（）{}；
vjs.Author.prototype.createl=函数（）{
var el=vjs.Component.prototype.createl.call（这是'div'{
类名：“vjs作者控件”，
});
this.content=vjs.createEl（'div'{
innerHTML:'作者'，
“阿里亚现场”：“礼貌”
});
如果（vjs.options.template！=4）{
$（“.vjs作者控件”）.css（“颜色”、“红色”）；
}
el.appendChild（vjs.createEl（'div'）.appendChild（this.content））；
返回el；
};

---

我看不出有什么变化。还有另一种方法吗？

我真的不鼓励您像这样在dom元素上抛出新的自定义属性。至少，在它们前面加上data attr或类似的前缀，但我建议将它们放在data setup属性中。当我在这里说“劝阻”时，我的意思是，“你真的不应该这样做”。坦率地说，您在上面发布的视频标签根本无效，这可能是导致调试困难的原因之一

话虽如此，我看不到有任何地方实际为Video.js指定了

iconcolor

选项。如果您认为它是在这里完成的：

iconcolor=“#DA5ADC”

，它不是，除非您设置了查找自定义属性的内容。同样，我强烈建议您按照这些思路重新设计所有内容，但为了简单起见，我将重点关注图标颜色属性

<video id="example_video_1" class="video-js" controls  width="640" height="360" poster="http://www.supportduweb.com/page/media/videoTag/BigBuckBunny.png" preload="auto" data-setup='{"iconsColor": "#DA5ADC"}'>
    ...
</video>

...

我们有一篇有趣的文章，介绍如何使用Javascript实时动态更改颜色。（我们以青蛙克米特为主题！）

---

在这里查看：

你得到了什么颜色名称？你能把你的html dom结构发布为well@dreamweiver是的，我做到了。@Sid我很抱歉，但我不理解你的问题：x。@Daelis:嘿，兄弟，我不能将你的js代码与html结构联系起来，我的意思是我在你的html代码中看不到任何类似

.vjs author control

的类你好，Matt，谢谢你回答我。关于iconColor属性，我有一个get函数，它可以工作，所以我认为这是可以的。我有一个旧版本的video.js，现在，我正在尝试使用video.js的最后一个版本来创建一个新版本。在上一个版本中，我们使用canvas创建所有元素（playbutton…），并使用iconcolor等自定义属性更改了设计。事实上，我已经制作了4个不同的模板。我必须能够动态修改一些东西，比如组件的颜色。你有办法吗？我明白你的意思，马特。您知道如何更改伪元素的颜色吗？