加载 HTML5 视频时如何制作加载图像？

Posted 2023-05-07

【中文标题】加载 HTML5 视频时如何制作加载图像？

【英文标题】：How to make a loading image when loading HTML5 video?

【发布时间】：2012-02-24 05:43:13

【问题描述】：

由于视频播放器加载mp4视频需要时间，html5是否支持在加载视频时播放“正在加载”的标志？

由于我的asp.net应用是移动页面，需要用户点击视频才能播放视频（android、iphone不支持自动播放）。所以，我不能做一个“加载”的标志作为海报，否则，用户会对此感到困惑。当用户单击 iPad 上的播放按钮时，我想显示加载徽标。

谢谢

乔

【参考方案1】：

我花了很长时间才真正弄清楚如何做到这一点，但我将在这里分享它，因为我终于找到了一种方法！想想看，这很荒谬，因为加载是所有视频都必须做的事情。您会认为他们在创建 html5 视频标准时会考虑到这一点。

我认为应该有效（但不会）的原始理论是这样的

通过js和css加载视频时添加加载bg图片 准备播放时移除

很简单，对吧？问题是我无法在设置源元素或设置 video.src 属性时显示背景图像。天才/幸运的最后一击是（通过实验）发现如果海报设置为某些东西，背景图像不会消失。我使用的是假海报图像，但我想它可以与透明的 1x1 图像一起使用（但为什么要担心有另一个图像）。所以这使得这可能是一种 hack，但它可以工作，而且我不必在我的代码中添加额外的标记，这意味着它可以在我所有使用 html5 视频的项目中工作。

HTML

<video controls="" poster="data:image/gif,AAAA">
    <source src="yourvid.mp4"
</video>

CSS（用 JS 应用于视频的加载类）

video.loading 
  background: black url(/images/loader.gif) center center no-repeat;

JS

  $('#video_id').on('loadstart', function (event) 
    $(this).addClass('loading');
  );
  $('#video_id').on('canplay', function (event) 
    $(this).removeClass('loading');
    $(this).attr('poster', '');
  );

这对我来说非常有效，但仅在 mac 上的 chrome 和 safari 中进行了测试。如果有人发现错误和/或改进，请告诉我！

【讨论】：

这很优雅/简单。

在 loadstart 上只触发一次，但如果你想在视频停止时加载，那么你应该在等待和 canplay 事件上使用。

【参考方案2】：

也是在加载视频时添加预加载器图像的简单解决方案： HTML：

<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">

海报是1px的透明图片。

CSS：

video 
    background-image: url(images/preload_30x30.gif);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center;

【参考方案3】：

使用标签ID海报

    <video controls="controls" poster="/IMG_LOCATION/IMAGENAME">

更多信息可以找到http://www.w3schools.com/html5/att_video_poster.asp

【讨论】：

嗨，我已经放了一张海报。但用户点击“播放”按钮和开始播放之间可能存在时间间隔

那么你看到的是视频本身的黑色，你最好裁剪视频以去除开始的黑色或在视频的开头添加相同的位置图像，如果用户按下播放然后视频正在播放，所以他们看到了，如果它然后暂停缓冲，他们会看到它正在播放的最后一张图片

因为我的asp.net应用程序是一个移动页面，它需要用户点击视频来播放视频（android，iphone不支持自动播放）。这样我就不能将“加载”标志作为海报，否则，用户会对此感到困惑。当用户点击 iPad 上的播放按钮时，我想显示一个加载徽标。

在这种情况下，您将需要删除不需要的开始黑度并将图像添加到素材中，如果它缓冲您不能指定图像显示为一旦视频开始播放然后停止如果需要缓冲，并且如果在开始时发生这种情况，它将向您显示图像或暂停的镜头

【参考方案4】：

您可以使用 javascript 创建一个带有动画“加载” gif 的图像叠加层，仅在视频正在加载且未准备好播放时显示。

您必须编写 JavaScript 来与 Media API 链接，以检测视频何时可以播放等等（这样您可以再次隐藏图像），但应该可以。

【参考方案5】：

我的解决方案是在 window.fbAsyncInit = function() 中添加以下内容：

var finished_rendering = function() 
    var el = document.querySelector('div#loading_msg');
    el.style.display="none";


FB.Event.subscribe('xfbml.render', finished_rendering);

找到：https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12

【参考方案6】：

我个人认为最优雅的方法是使用这样的代码，

<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 we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event) setTimeout(function() event.controls=true; ,1000); 
</script>

为了让它变得更好，你可以使用ontimeupdate 而不是onplaying，它会连续触发。 至于延迟时间其实不是 1 秒，而是 4 秒——对我来说——是最好的。