Html 仅在加载视频时显示描述(<；Video>；标签)

发布于01月23日

在该网站(书面ReactJS)上，用户有机会从他的屏幕上播放视频.为此，我使用了HTML标记.我在视频的顶部放了一个小描述(稍微模糊了背景，这样用户就可以同时看到描述和视频).

问题是，当页面加载时，视频加载需要一些时间(从3秒到5秒)，但带有描述的文本会立即出现.它看起来不是很好.

export function ShowVideo() {
   const videoRef = useRef<HTMLVideoElement>(null);
   return (
    <div>
      {videoSourceId && (
          <div className="overflow-hidden">
            <div>
              <DiscriptionForVideo />
              <video ref={videoRef} muted />
            </div>
          </div>
      )}
    </div>
  );
}

请告诉我如何确保在视频出现时出现带有描述的文本.

推荐答案

要将描述文本的外观与视频同步，可以使用视频元素的onLoadedData事件.此事件在加载视频的元数据时触发，这是视频即将开始播放的良好指示.以下是您的showVideo组件的更新版本:

import React, { useRef, useState } from 'react';
export function ShowVideo() {
const videoRef = useRef<HTMLVideoElement>(null);
const [isVideoLoaded, setIsVideoLoaded] = useState(false);
const handleVideoLoaded = () => {
setIsVideoLoaded(true);
 };
return (
<div>
{videoSourceId && (
<div className="overflow-hidden">
<div>
<DiscriptionForVideo />
<video
          ref={videoRef}
          muted
          onLoadedData={handleVideoLoaded}
          style={{ visibility: isVideoLoaded ? 'visible' : 'hidden' }}
        />
</div>
</div>
)}
</div>
);
}

在此代码中，onLoadedData事件触发handleVideoLoaded函数，该函数将isVideoLoaded状态设置为True.然后基于该状态控制视频元素的可见性，从而确保描述文本和视频一起出现.根据您的特定布局需要调整样式.

Html相关问答推荐

springBoot + Thymeleaf：属性中的UTF-8

Html 仅在加载视频时显示描述(<；Video>；标签)

推荐答案

Html相关问答推荐

springBoot + Thymeleaf：属性中的UTF-8

如何打破长URL，包含连字符在HTML与CSS

我已经在我的网站上创建了按钮，但我不能让它们正确排列.'

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表？

如何让QML`Text`元素内的链接在悬停时显示鼠标指针？

选中/取消选中带有_hyperscript的多个复选框

Div内容防止同级大小增加

有没有一种方法可以动态地从网格或Flexbox中取出HTML元素？

我无法使用背景图像css，因为我在VS代码中将照片放在不同的文件夹中

仅向上扩展并以最大高度滚动的Div

伪元素：after和溢出隐藏

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充？

具有 css 高度的输入元素：100% 溢出父 div

CSS 跨度与子元素交替 colored颜色

如何在div中设计伪元素？

子 div 在父 div 中溢出

父背景仅在子元素中可见

如何从 razor 页面打开 html 页面

正确使用视频作为背景

html元素可以被css跳过吗？