如何将自定义按钮添加到视频 js 播放器答案

【问题标题】：How to add a custom button to video js player如何将自定义按钮添加到视频 js 播放器
【发布时间】：2019-05-22 04:20:38
【问题描述】：

我想制作一个按钮，该按钮是指向我正在使用的视频 js 视频播放器的另一个页面的链接，但似乎没有任何效果。添加按钮后，它被添加到播放器的控制面板中，但用户看不到该按钮。另外，我想在该按钮被按下后添加一个链接，它应该打开一个新页面。我找不到与我正在尝试发布的代码相同的好的文档。

var player = videojs('my-video');
  var button = player.addChild('button');
  var myButton = player.controlBar.addChild('button', {
      text: "Press me",
      // other options
    });

如何扩展此功能，例如 onclick 事件。我想会有一些方法我可以在player.controlBar.addChild('button'这本身里面定义

【问题讨论】：

How to create customs button in video js的可能重复
我只想要一个onclik事件和工具栏上的名字怎么做？提供的链接的答案太长了

标签： javascript video.js

【解决方案1】：

您在选项中传递的文本可用作 controlText 而不是显示文本。 ControlText 在您的按钮中创建一个跨度，悬停时显示。该控件文本存在于视频js中的所有组件中。

这里在videojs中添加文本是一种简单的方法。

var player = videojs('my_video_1');

// When you pass text in options it just creates a control text,
// which is displayed as tooltip when hovered on 
// this button viz the span in you div,
var myButton = player.controlBar.addChild("button");

// There are many functions available for button component 
// like below mentioned in this docs 
// https://docs.videojs.com/button. 
// You can set attributes and clasess as well.

// Getting html DOM
var myButtonDom = myButton.el();
// Since now you have the html dom element 
// you can add click events


// Now I am setting the text as you needed.
myButtonDom.innerHTML = "Hello";

myButtonDom.onclick = function(){
  alert("Redirecting");
  window.location.href = "https://www.google.com"
}

您可以随意添加任何 html DOM 属性，而不是设置内部 html，因为最后它只是一个按钮。

为代码演示添加 Codepen 链接 https://codepen.io/vaibhav281128/pen/NWawWjr

如果您想将按钮注册为自定义组件 https://codepen.io/vaibhav281128/pen/bGoYGPR

【讨论】：

是的，这很好用如何向该按钮添加操作，例如警告框或超链接？有什么想法吗？
@AdminRoy 只需像在 javasript 中一样注册一个 onlclick 事件。查看更新的答案。
除 Safari 外工作正常。按钮不会在 Safari 中呈现。
@VaibhavSingh 你能确定新按钮的位置吗？我希望它在全屏按钮之前。似乎“文本”选项不再起作用
@none 您可以在附加子项时添加索引，请在此处查看我的代码，codepen.io/vaibhav281128/pen/NWawWjr?editors=1010

【解决方案2】：

如果您还想控制按钮的位置，我的解决方案：

addButtonToPlayer() {
      let myButton = player.controlBar.addChild('button');
      myButton.controlText('tooltip text');
      player.controlBar
        .el()
        .insertBefore(
          myButton.el(),
          player.controlBar.getChild('fullscreenToggle').el()
        );
      let buttonDom = myButton.el();
      buttonDom.innerHTML = '⬇'; // button text/emoji
      buttonDom.onclick = function() {
        alert('Hey');
      };
    }

【讨论】：