Question

我想创建一个按钮，该按钮链接到我正在使用的video 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'内部定义一些方法

Answer 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，您可以玩转并添加任何html DOM属性，因为最后它只是一个按钮。

如何向视频js播放器添加自定义按钮

1 个答案: