如何通过代码让 Youtube 的播放控制器不隐藏?

[BostonCorbett]

在网页中看 youtube，只有在暂停时才显示播放控制器，播放时会自动隐藏。

有这个需求主要是因为使用没有键盘鼠标的触屏设备看 youtube 时，每次暂停都要点屏幕 2 下，第一下是显示播放控制器，第二下才能暂停，不仅麻烦，而且如果 2 次点击时间很短，就会触发全屏操作。

我不是搞前端的，这个问题难了我好久了，昨天到现在又研究了半天还没解决，饭都不想吃，望大佬指导要学习哪些前端的知识，用哪种办法才能解决这个问题。

[cheese]

css
.ytp-chrome-bottom {opacity: 1 !important;}

就可以了

[BostonCorbett]

感谢回复！
刚刚试了这么做确实在显示效果上控制器不隐藏了，但还没达到在触屏设备上一次点击就能暂停的效果，而且开启字幕后，字幕还是自动会掉下去，跟播放控制器重叠了。


在触屏设备上第一次点击的效果和鼠标在视频框里移动的效果是一样的，都是激活播放控制器，过了 3 秒后播放控制器就会自动隐藏。

在触屏设备上激活播放控制器后，3 秒以内点击一次就能够暂停，我觉得我的需求描述为在激活播放控制器后，让播放控制器自动隐藏的等待时间变得非常长，超过视频的总长度就是我想要的效果了。

[BostonCorbett]

@cheese

[autoxbc]

YouTube 这种量级的网站前端工程化非常彻底，使得几乎全部的控制状态和方法都在层层封装之中，精准的前端逆向是很困难的

好在你的需求本身并不真的需要去控制控制器和进度条，只是需要视频响应触摸事件，那么并不复杂

在有 JS 基础的情况下，看看触摸事件的处理
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events

然后把触摸事件关联到媒体控制，主要是 play 和 pause 方法
https://www.jianshu.com/p/efc29d72d7ec

然后用 Tampermonkey 写一段脚本应该就可以了

[BostonCorbett]

@autoxbc 感谢提醒，周末我试一下

[danngenel8788yyu]

如果是自己用的话，摸一下视频左下角是暂停 /播放，右下角是全屏，这个时候控制器是隐藏的。

[BostonCorbett]

@danngenel8788yyu 我有注意到，但是按键太小了不方便，容易误触到滚动条

[BostonCorbett]

@autoxbc @cheese @danngenel8788yyu

这个周末又研究了两天，现在快瞌睡成狗了找到了一段代码完美的解决了这个问题：

function clearAllSetTimeout() {
var id = window.setTimeout(function() {}, 0);
while (id--) {
window.clearTimeout(id);
}
}

window.setTimeout(clearAllSetTimeout, 3000);

代码摘自： https://stackoverflow.com/questions/8860188/javascript-clear-all-timeouts

我不敢相信，就这么几行代码就能解决的问题我前前后后花了几十个小时。

[BostonCorbett]

不对，这样暂停没问题了，但是把加载视频的函数也清理掉了，缓冲播放完就卡住了，得手动拉进度条才能加载视频，还得继续研究。。。