时间戳

首页 > 解决方案 > 如果视频正在加载（缓冲），则显示带有加载 GIF 图像的 HTML5 视频

javascript - 如果视频正在加载（缓冲），则显示带有加载 GIF 图像的 HTML5 视频

问题描述

所以 HTML5 视频没有控件。基本上我想显示一个加载 gif，仅在视频加载（缓冲和暂停）时显示在视频上

<video id="myvideo" width="100%"><source src="video/Good.mp4" type="video/mp4"><source src="movie.html" type="video/ogg"></video>

标签： javascriptjquerycsshtml

解决方案

如何使用内置的浏览器动画而不是 gif。您所要做的就是将控件设置为 TRUE，然后根据缓冲状态返回 FALSE。对我来说最好的做法是这样的，

<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>

<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing and enjoyed by the viewer
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because I would say it looks and feels better.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>

也许你可以用whichontimeupdate代替onplayingwhich 会连续开火。至于延迟时间实际上不是 1 秒而是 4 秒——对我来说——是最好的。

推荐阅读