javascript - 如何将自定义按钮添加到视频 js 播放器
问题描述
我想制作一个按钮,该按钮是指向我正在使用的视频 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'
This 本身
解决方案
您在选项中传递的文本可用作 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 属性,因为最后它只是一个按钮。
添加 Codepen 链接以进行代码演示 https://codepen.io/vaibhav281128/pen/NWawWjr
如果您想将按钮注册为自定义组件 https://codepen.io/vaibhav281128/pen/bGoYGPR
推荐阅读
- swift - UICollectionView 过滤的正确方法
- angular - TS2307:找不到模块(所有模块) - 移动文件夹后
- php - Laravel Carbon::today() 方法返回前一天
- sql - 如何更快地使用自联接进行查询?
- html - 当 ul 只有一个 li 标签时隐藏 ul 和 li 标签
- sql-server - SQL Server - 插入新数据会降低查询性能
- ms-access - 如何在数据透视表中获取值作为标题字段?
- jhipster - 键入'{ id:数字;}' 不满足约束 '{ id?: string; }'
- gmail-api - 这是 Google 批处理 API 中的错误吗?
- javascript - 无法更改 redux 布尔状态