我想制作一个按钮,它是我正在使用的视频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'
这本身
最佳答案
您在选项中传递的文本可用作控制文本,而不是显示文本。 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
关于javascript - 如何向视频js播放器添加自定义按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56249256/