Question

我正在使用video.js，我希望以不同的方式更改不同元素（图标，文本）的颜色。首先，我检索HTML中的 iconsColor 变量的值。然后，在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;
};

我没有看到任何变化。还有另一种方法吗？

Answer 1

我真的不鼓励你像这样在dom元素上抛出新的自定义属性。至少，将它们作为数据引脚或其他内容添加前缀，但我建议将其放在数据设置属性中。当我说＆＃34;劝阻＆＃34;在这里，我的意思是，＆＃34;你真的不应该这样做＆＃34;。您上面发布的视频标签是直言不讳的，有可能导致您的调试困境。

话虽如此，我还没有看到您实际为Video.js指定iconsColor选项的任何地方。如果你认为它在这里完成了：iconscolor="#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>

Answer 2

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

请在此处查看：https://www.grueandbleen.com/blog/its-not-easy-being-bleen-a-color-changing-javascript-adventure

video.js用jQuery动态改变颜色

2 个答案: