如何使用Echo.js延遲加載視頻（mp4）？

Question

我正在努力理解為什么未顯示視頻（mp4）。

HTML標記看起來像...

<video muted="" loop="" autoplay="autoplay" poster="" width="380" height="718" >
    <source  data-echo="path/video.mp4" type="video/mp4"/>
</video>    

在瀏覽器中，DOM看起來像...

<video muted="" loop="" autoplay="autoplay" poster="" width="380" height="718">
    <source data-echo="path/video.mp4" type="video/mp4" src="path/video.mp4">
</video>

Echo.js似乎可以正常工作，但視頻不會出現。 我想念什么？

這是一個帶有工作示例的jsFiddle 。

Answer 1

在一點幫助下，我將echo.js與Suave.js結合在一起。 演示

window.Echo = (function (window, document, undefined) {

  'use strict';

  var store = [], offset, throttle, poll;

  var _inView = function (el) {
    var coords = el.getBoundingClientRect();
    return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
  };

 var _pollImages = function () {
    for (var i = store.length; i--;) {
      var self = store[i];
      var videoHTML = self.parentNode.innerHTML;
      var dataAttr = self.getAttribute('data-echo');
      var videoSource = dataAttr.substr(0, dataAttr.lastIndexOf('.')+ 1);
      var fileExts = dataAttr.substring(dataAttr.indexOf('{')+1,dataAttr.indexOf('}')).replace(/\s/g, '').split(',');
      var sourceVideo = "";
        for (var d = 0; d < fileExts.length; d++) {
          var extension = fileExts[d];
          var sourceSrc = videoSource + extension;
          var sourceType = 'video/' + extension;
          sourceVideo += "<source" + " " + "src=\"" + sourceSrc + "\"" + " " + "type=\"" + sourceType + "\"" + "/>";
        }
      if (_inView(self)) {
        var videoHybrid = videoHTML.replace(/></, '>' + sourceVideo + '<');
        self.parentNode.innerHTML = videoHybrid;
        store.splice(i, 1);
      }
    }
  };

  var _throttle = function () {
    clearTimeout(poll);
    poll = setTimeout(_pollImages, throttle);
  };

  var init = function (obj) {
    var nodes = document.querySelectorAll('[data-echo]');
    var opts = obj || {};
    offset = opts.offset || 0;
    throttle = opts.throttle || 250;

    for (var i = 0; i < nodes.length; i++) {
      store.push(nodes[i]);
    }

    _throttle();

    if (document.addEventListener) {
      window.addEventListener('scroll', _throttle, false);
    } else {
      window.attachEvent('onscroll', _throttle);
    }
  };

  return {
    init: init,
    render: _throttle
  };

})(window, document);