如何在加载HTML5视频时添加加载图像？

Question

当视频播放器加载mp4视频需要时间时，HTML5是否支持在加载视频时播放“加载中”标志？

由于我的asp.net应用程序是移动页面，需要用户点击视频才能播放视频（Android、iPhone不支持自动播放）。因此，我不能将“加载中”标志作为海报，否则用户会感到困惑。我希望在iPad上用户点击播放按钮时显示一个加载标志。

谢谢

乔

- Joe Yan

Answer 1

我实际上花了很长时间才找到如何做到这一点，但我会在这里分享它，因为我终于找到方法了！当你想想，加载是所有视频都必须做的事情，这是荒谬的。你会认为他们在创建html5视频标准时已经考虑到这一点了。

我最初认为应该奏效（但不会）的理论是：

1. 通过js和css在加载时添加背景图片到视频
2. 准备好播放后删除

简单吧？问题是，当设置源元素或video.src属性时，我无法让背景图片显示出来。最后的灵感/运气之举是通过实验发现，如果将海报设置为某个东西，则背景图像将不会消失。我使用了一个假海报图像，但我想使用透明的1x1图像也可以（但为什么要担心添加另一张图片）。所以这可能是一种“黑客方式”，但它有效，并且我不必在我的代码中添加额外的标记，这意味着它将适用于使用html5视频的所有项目。

HTML

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

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

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

JavaScript

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

这对我来说完美地运作，但仅在Mac上的Chrome和Safari中进行了测试。如果有人发现错误或改进，请告诉我！

- pixelearth

---

这相当优雅/简单。 - Oliver Holmberg

在“onloadstart”事件中，只会触发一次，但如果您想在视频停止时加载器，则应使用“onwaiting”和“oncanplay”事件。 - anees

Answer 2

同时，在视频加载过程中添加预加载图像的简单解决方案： HTML：

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

海报是一个透明的1像素图像。

CSS：

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

- Rob

Answer 3

使用标签id poster。

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

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

- Simon Davies

---

嗨，我已经放置了海报。但是用户点击“播放”按钮和开始播放之间可能会有时间差。 - Joe Yan

如果您看到视频本身的黑色部分，最好将视频裁剪以消除开头的黑色部分或在视频的开头添加相同位置的图像。如果用户按播放按钮，则视频正在播放，因此他们会看到它，如果然后暂停缓冲，则会看到它最后播放的图像。 - Simon Davies

由于我的ASP.NET应用是一个移动页面，它需要用户点击视频才能播放视频（Android，iPhone不支持自动播放）。因此我不能将“加载”标志作为海报，否则用户会感到困惑。我想在用户点击iPad上的播放按钮时显示一个加载标志。 - Joe Yan

在这种情况下，您需要删除不必要的开始黑色部分并向镜头添加图像。如果缓冲，您无法指定要显示的图像，因为一旦视频开始播放，它将播放，然后在需要缓冲时停止，如果发生在开头，它将显示您的图像或暂停的画面。 - Simon Davies

Answer 4

我的解决方案是在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

- user1574371

Answer 5

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

但是，您需要编写JavaScript来连接媒体API以检测视频何时准备好播放等（以便您可以再次隐藏图像），但这应该是可能的。

- Ian Devlin

Answer 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秒最好。

- HolyResistance