HTML5视频加载完成后如何使文本消失？

Posted 2023-05-07

【中文标题】HTML5视频加载完成后如何使文本消失？

【英文标题】：How to make text disappear when HTML5 Video has finished loading?

【发布时间】：2016-06-13 01:53:17

【问题描述】：

标题几乎说明了一切。我正在尝试在 html5 视频上添加一些显示“视频加载”和 75% 不透明背景的文本，一旦完全加载，我希望文本和背景消失。我该怎么做？

感谢您的时间和精力！ 我正在尝试执行此操作的页面是jeffarries.com/videos。如果需要可以提供代码。

---

dup 链接指向试图获取 HTML5 视频持续时间的帖子，我正在尝试在 HTML5 视频完全加载到浏览器中时让 javascript 更改 css 属性。

【问题讨论】：

当然有很多例子展示了如何显示 HTML5 视频的加载进度指示器。你尝试过什么，你还在纠结什么？

重复***.com/questions/13864795/…

@Quantastical 我是 JavaScript 新手，不太了解标记，希望有一个完成/接近完成的解决方案。

@Jeff 查看 HTML5 视频“onloadeddata”或“canplaythru”事件，这将是您想要隐藏叠加层的时候 - w3.org/2010/05/video/mediaevents.html

@Offbeatmammal 很棒的链接，非常感谢！！！看起来“canplaythrough”会更好，您能否给我一些 JavaScript 代码，将 ID 为“video_loading”的 HTML 元素的 CSS display: block; 更改为 display: none;？我不太懂 JavaScript，谢谢！

【参考方案1】：

当 HTML5 视频元素“myVideo”触发 canplaythrough 时，我最终使用此 JavaScript 代码通过将 CSS display: block; 更改为 display: none; 来隐藏 ID 为“video_cover”的 HTML 元素：

<script>
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() 
    var e = document.getElementById("video_cover");
       e.style.display = 'none'
;
</script> 

资源： W3Schools canplaythrough JavaScript 事件。

对不起，如果我的 JavaScript 术语不好，我只是在学习它！

---

再次感谢@Quantastical 和@Offbeatmammal 的所有帮助！