V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
BostonCorbett
V2EX  ›  前端开发

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

  •  
  •   BostonCorbett · 2020-11-01 01:41:56 +08:00 · 1843 次点击
    这是一个创建于 1485 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    9 条回复    2020-11-09 02:24:25 +08:00
    cheese
        1
    cheese  
       2020-11-01 04:27:26 +08:00
    css
    .ytp-chrome-bottom {opacity: 1 !important;}

    就可以了
    BostonCorbett
        2
    BostonCorbett  
    OP
       2020-11-01 13:53:08 +08:00 via Android
    感谢回复!
    刚刚试了这么做确实在显示效果上控制器不隐藏了,但还没达到在触屏设备上一次点击就能暂停的效果,而且开启字幕后,字幕还是自动会掉下去,跟播放控制器重叠了。


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

    在触屏设备上激活播放控制器后,3 秒以内点击一次就能够暂停,我觉得我的需求描述为在激活播放控制器后,让播放控制器自动隐藏的等待时间变得非常长,超过视频的总长度就是我想要的效果了。
    BostonCorbett
        3
    BostonCorbett  
    OP
       2020-11-01 13:54:17 +08:00 via Android
    autoxbc
        4
    autoxbc  
       2020-11-02 01:25:03 +08:00
    YouTube 这种量级的网站前端工程化非常彻底,使得几乎全部的控制状态和方法都在层层封装之中,精准的前端逆向是很困难的

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

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

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

    然后用 Tampermonkey 写一段脚本应该就可以了
    BostonCorbett
        5
    BostonCorbett  
    OP
       2020-11-03 13:00:53 +08:00
    @autoxbc 感谢提醒,周末我试一下
    danngenel8788yyu
        6
    danngenel8788yyu  
       2020-11-04 08:55:05 +08:00 via Android
    如果是自己用的话,摸一下视频左下角是暂停 /播放,右下角是全屏,这个时候控制器是隐藏的。
    BostonCorbett
        7
    BostonCorbett  
    OP
       2020-11-04 09:49:43 +08:00
    @danngenel8788yyu 我有注意到,但是按键太小了不方便,容易误触到滚动条
    BostonCorbett
        8
    BostonCorbett  
    OP
       2020-11-09 02:18:45 +08:00
    @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
        9
    BostonCorbett  
    OP
       2020-11-09 02:24:25 +08:00
    不对,这样暂停没问题了,但是把加载视频的函数也清理掉了,缓冲播放完就卡住了,得手动拉进度条才能加载视频,还得继续研究。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1008 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:53 · PVG 02:53 · LAX 10:53 · JFK 13:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.