视频懒加载

情景：当页面存在视频时，视频过大会影响页面的加载速度，采用视频的懒加载。

实现思路：在页面中用视频的封面代替视频，当页面划到视频的位置，在加载出视频

代码：

<section class="index-video">
                <div class="video-content">
                    <picture>
                        <source media="(max-width: 768px)" srcset="xxx.webp"
                            type="image/webp">
                        <source media="(max-width: 768px)"
                            srcset="xxx.jpg  ">
                        <source srcset="xxx.webp" type="image/webp">
                        <img src="xxx.jpg" alt="brand_display">
                    </picture>
                    <div class="video-play">
                    </div>
</section>

<script>
var videoPlay = function () {
   // 视频数据
var videoDataList = {
"pc": {
video: "xxx",
svg: "xxx"
},
 "mobile": {
video: "xxx",
svg: "xxx"
}
 }
    // 判断分辨率大小 视图小于或等于768
var videoData = $(window).width() <= 768 ? videoDataList.mobile : videoDataList.pc
    // 视频挂载
var videoStatus = false;
var $videoDom = $(".index-video .video-play")
var videoCreate = new IntersectionObserver(function (entrys) {
if (entrys[0].isIntersecting && !videoStatus) {
     // 创建视频
$videoDom.html(videoHtml(videoData));
     // 判断视频是否载入
$videoDom.children("video").on("loadedmetadata", function () {
     // console.log('载入完成')
$videoDom.parent().append('<img class="video-bg" src="' + videoData.svg + '" alt="video bg"/>') $(".video-content picture").hide(); $videoDom.css("position", "relative");})
      videoStatus = true;}
      })
videoCreate.observe($videoDom[0])
      // video Dom节点
function videoHtml(data) {
 return '<video playsinline="" autoplay="" loop="" muted="" src="' + data.video +'" ></video>';}}
videoPlay()
</script>