[Video.js]隐藏和显示视频播放器控件

最新推荐文章于 2024-05-09 16:44:18 发布

weixin_33849942

最新推荐文章于 2024-05-09 16:44:18 发布

阅读量9.4k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5adb020df265da0b7c06d970

版权

本文详细介绍了Video.js中视频播放器控制栏的隐藏和显示逻辑，包括用户状态检测、全屏模式下的行为以及在触摸设备上的交互。通过新增的属性和事件监听，实现了更智能的控制栏淡入淡出效果，适应全屏和移动设备的使用场景。

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

原文链接：Hiding and Showing Video Player Controls

上周我决定解决一些围绕控制栏的悬而未决的问题，然后进入相关播放器更新的流程。我现在很幸运地有了一些时间，并且我会写一些关于它的更新。

播放器控制栏的预期行为之一是，当用户在观看视频时处于非活动状态时，它会在几秒钟后淡出。以前，我们通过video.js实现这一点的方式是通过一些CSS技巧。当用户的鼠标移出视频播放器区域时，控制栏将被赋予名称为vjs-fade-out的class。这个class延迟了2秒后有一个转换动效。

.vjs-fade-out {
  display: block;
  visibility: hidden;
  opacity: 0;

  -webkit-transition: visibility 1.5s, opacity 1.5s;
     -moz-transition: visibility 1.5s, opacity 1.5s;
      -ms-transition: visibility 1.5s, opacity 1.5s;
       -o-transition: visibility 1.5s, opacity 1.5s;
          transition: visibility 1.5s, opacity 1.5s;

  /* 等一会儿，然后淡出控制栏 */
  -webkit-transition-delay: 2s;
     -moz-transition-delay: 2s;
      -ms-transition-delay: 2s;
       -o-transition-delay: 2s

最低0.47元/天解锁文章