jquery - Videojs - 如何在控制栏中添加自定义图标
问题描述
我正在使用 videojs 库来构建播放器音频。我想在控制栏中的播放按钮之前添加自定义组件,例如图像。
我阅读了如何添加自定义按钮:
var button = videojs.getComponent('Button');
var closeButton = videojs.extend(button, {
constructor: function() {
button.apply(this, arguments);
},
/* handleClick: function() {
this.player().dispose();
}*/
});
但是添加图像不起作用。有人可以帮助我吗?非常感谢
解决方案
对于图像,您可以添加一个组件,该组件创建一个 div,并添加一个类来设置它的样式。
<script>
videojs('my_video').ready(function() {
var img = this.controlBar.addChild('Component', {}, 0); // 3rd arg is index, i.e. first
img.addClass("my-image");
});
</script>
<style>
.video-js .my-image {
width: 40px;
background: url(https://placekitten.com/38/28) center center no-repeat;
}
</style>
推荐阅读
- android - 在 soong bootsrap 期间 Android 构建失败 - 使用所有资源并挂起
- python - tflite_runtime 和 beaglebone ai 与 GPU 和 DSP
- reactjs - npx create-react-app 不能使用全局,即使我没有全局
- flutter - Flutter中的ChewiePlayer在进入全屏模式后处理控制器
- php - PHP Socket 服务器 - 将 verify_peer 设置为 false 是否安全
- python - ws.run_forever() 为我提供了与 dema_100 相同的值,这与不断实时变化的 websocket 值不同。dema值不同的api
- javascript - React className循环添加逗号
- php - 如何使用 PHP 从 HTML cURL 响应中提取嵌套在注释中的 CDATA
- java - Java离线生成波卡地址
- autohotkey - 由于脚本继续运行,暂停功能无法正常工作