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

由于视频播放器加载mp4视频需要时间，HTML5是否支持在加载视频时播放“加载”徽标

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

谢谢

Joe使用标签id海报

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

---

可以找到更多信息

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

---

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

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

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

通过js和css加载时将加载bg图像添加到视频

准备好游戏时移除

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

HTML

JS

---

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

加载视频时添加预加载图像的简单解决方案： HTML:

---

我的解决方案是在window.fbAsyninit=function（）中添加以下内容：

---

发现：

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

<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>

不支持视频？
//我们在播放视频时隐藏视频控制按钮和播放头（观众可以欣赏）
函数hideControls（事件）{event.controls=false；}
//如果视频必须暂停并等待来自服务器的数据，如果用户在视频上悬停或轻触，我们会让控件显示出来。作为奖励，这也使得浏览器的内置加载动画出现，例如旋转的圆形，我们给它一点延迟（比如1秒），因为我们不希望控件闪烁，延迟的显示实际上看起来更好。
函数showControls（event）{setTimeout（function（）{event.controls=true；}，1000）；}

为了使它更好，您可以使用

ontimeupdate

而不是

onplaying

，后者将持续发射。

---

至于延迟时间，实际上不是1秒，而是4秒——对我来说——是最好的。

嗨，我已经贴了一张海报。但用户单击“播放”按钮和开始播放之间可能存在时间间隔当您看到视频本身的黑色时，您最好裁剪视频以消除开始的黑色或将同一位置的图像添加到视频的开头，如果用户按play，则视频正在播放，以便他们看到视频，如果暂停以缓冲，则他们会看到上次播放的图像。因为我的asp.net应用程序是一个移动页面，需要用户单击视频才能播放视频（安卓、iphone不支持自动播放）。这样我就不能把一个“加载”的标志作为海报，否则，用户会对此感到困惑。我想在用户点击iPad上的播放按钮时显示一个加载徽标。在这种情况下，您需要删除不需要的开始黑度，并在画面中添加一个图像，如果它缓冲，您不能规定一个图像显示为一旦视频开始，它将播放，然后在需要缓冲时停止，如果在开始时发生这种情况，它将显示图像或暂停的足部，这非常优雅/简单。在加载时仅启动触发器一次，但如果您希望在视频停止时加载，则应使用on waiting和on canplay事件。

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

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

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

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

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

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

<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>