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

5 回答

• 1

  我花了太长时间才弄清楚如何做到这一点，但我将在这里分享，因为我最终找到了一条路！当你想到它时，这是荒谬的，因为加载是所有视频必须做的事情 . 您认为在创建html5视频标准时他们会考虑到这一点 .

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

  • 通过js和css加载时，将bg图像加载到视频中

  • 准备好比赛时删除

  简单吧？问题是我无法在设置源元素或设置video.src属性时显示背景图像 . 天才/运气的最后一击就是找出（通过实验）如果将海报设置为某种东西，背景图像将不会消失 . 我正在使用假海报图像，但我想它可以使用透明的1x1图像（但为什么要担心有另一个图像） . 所以这使得这可能是一种黑客攻击，但它可以工作，我不需要为我的代码添加额外的标记，这意味着它可以使用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 . 如果有人发现错误或改进，请告诉我！

  回复于 2024-05-09T03:38:51+08:00
• 1

  您可以通过创建带有动画“加载”gif的图像叠加来实现JavaScript，只有在视频加载且尚未准备好播放时才会显示 .

  您必须编写JavaScript以链接Media API以检测视频何时可以播放等等（因此您可以再次隐藏图像），但它应该是可能的 .

  回复于 2024-05-09T03:38:51+08:00
• 14

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

  回复于 2024-05-09T03:38:51+08:00
• 4

  也是在加载视频时添加预加载器图像的简单解决方案：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;
    }
  

  回复于 2024-05-09T03:38:51+08:00
• 2

  使用标签ID海报

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

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

  回复于 2024-05-09T03:38:51+08:00