videojs隐藏控制栏(详细信息)

文章介绍了如何在使用VideoJS创建实例时,通过option参数将children属性设置为null,以便进行特定配置和事件逻辑的添加。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建实例的时候给option指定chidren为空就行

this.player = videojs(this.$refs.myVideo, {
                    children: null,  // 指定显示
                    // height: '50%',//可以指定高度
                }, function () {
                    // 此处可添加额外的配置和事件处理逻辑
                });

如果你想要自己控制字幕的切换,可以通过以下步骤重写字幕轨道: 1. 首先,你需要获取到视频元素的 `TextTrackList` 对象,可以通过 `video.textTracks()` 方法获取。 2. 接着,你可以从 `TextTrackList` 中找到你需要的字幕轨道对象,可以通过 `find` 方法查找,或者使用 `getTrackById` 方法根据 ID 获取。 3. 一旦找到了需要的字幕轨道对象,你可以使用 `mode` 属性来控制它的显示状态。将 `mode` 属性设置为 `'showing'` 将会显示该字幕轨道,将其设置为 `'disabled'` 将会隐藏该字幕轨道。 下面是一个示例代码,演示如何重写字幕轨道并控制它的显示状态: ```javascript var video = videojs('my-video'); // 获取字幕轨道对象 var subtitlesTrack = video.textTracks().find(function(track) { return track.kind === 'subtitles' && track.label === 'English'; }); // 自定义按钮控制字幕切换 var subtitlesButton = document.getElementById('subtitles-button'); subtitlesButton.addEventListener('click', function() { if (subtitlesTrack.mode === 'showing') { // 隐藏字幕 subtitlesTrack.mode = 'disabled'; } else { // 显示字幕 subtitlesTrack.mode = 'showing'; } }); ``` 在这个示例中,我们首先找到了一个名为 `'English'` 的字幕轨道对象。然后,我们创建了一个自定义按钮,来控制字幕的显示和隐藏。每次点击按钮时,我们检查当前字幕轨道的显示状态。如果它已经显示,则将其设置为隐藏,反之则将其设置为显示。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值