实现类似 Medium 风格的视频加载

非常早之前写过关于一篇《[译]Medium 是如何优化图片加载的》 的文章。

最近在看一些视频封面的优化，其中会有一些黑屏的问题，于是乎想到了是不是可以借鉴这种风格。

大概原理还是，可以根据视频的 loadeddata 事件，然后将覆盖在上面的模糊的封面图隐藏，然后播放视频。

html

<div class="video-container">
  <video width="720" src=""></video>
  <div class="cover"></div> 
</div>  

CSS

.video-container {
  position: relative;
  width: 720px;
  display: none;
}

.video-container .cover {
  position: absolute;
  top:0;
  left: 0px;
  right: 0;
  height: 100%;
  background: url(https://img-1252472236.cos.ap-beijing.myqcloud.com/blog%2FWX20240518-130027%402x-min.png) 100% 100%;
  filter: blur(3px);
  transition: opaicty 0.05s 0.35s linear;
}

.video-container .cover.hide{
  opacity: 0;
}

这里面会有一个 transition 来增加动画效果。

JS 部分

var videoUrl = 'https://img-1252472236.cos.ap-beijing.myqcloud.com/%E3%80%904K%E3%80%91_72%20Seasons_%20of%20Makoto%20Shinkai%20%20%E6%96%B0%E6%B5%B7%E8%AA%A0%20%E3%80%8C%E4%BA%8C%E5%8D%81%E5%9B%9B%E7%AF%80%E6%B0%97%20%C2%B7%20%E4%B8%83%E5%8D%81%E4%BA%8C%E5%80%99%E3%80%8D.mp4';

var loadVideo = function() {
  $('.video-container').css('display', 'block');
  $('video')[0].src = videoUrl;
  $('video').on('loadeddata', function() {
    $('.cover').addClass('hide');
    this.play();
  })
}
$(document).ready(function() {
  $('.button').click(function() {
     loadVideo();                
  });
})

最后附上 Codepen

Codepen