H5序列图实现视频播放效果

H5序列图实现视频播放效果

场景：公司业务需求在H5网页背景播放视频，但是手机上会出现各种奇葩问题，一个个解决过于麻烦于是我直接简单粗暴的使用序列图拼接成类似视频的效果话不多说，先上代码：

var urlRoot = './images/thumbs(';
var indexRange = [ 1, 475 ];
var maxLength = indexRange[ 1 ] - indexRange[ 0 ] + 1;
var eleContainer = document.getElementById( 'container' );
//存储预加载的DOM对象和长度信息
var store = {
    length: 0
};
//图片预加载
for ( var start = indexRange[ 0 ]; start <= indexRange[ 1 ]; start++ ) {
    ( function ( index ) {
        var img = new Image();
        img.onload = function () {
            store.length++;
            store[ index ] = this;
            play();
        };
        img.onerror = function () {
            store.length++;
            play();
        };
        img.src = urlRoot + index + ').jpg';
        //预加载的时候append图片
        eleContainer.appendChild( img );
    } )( start );
}
var play = function () {
    var percent = Math.round( 100 * store.length / maxLength );
    //全部加载完毕
    if ( percent == 100 ) {
        var index = indexRange[ 0 ];
        var step = function () {
        //依次添加class属性通过css控制显示隐藏
            store[ index ].setAttribute( 'class', 'active' )
            index++;
            //超出最大限制
            if ( index <= indexRange[ 1 ] ) {
                setTimeout( step, 42 );
            } else { // 本段播放结束回调
            }
        };
        step()
    }
};

原理其实很简单在预加载的时候append图片，然后给通过控制css属性实现图片的连贯，没什么高超的技巧，但就是这种实现策略，对页面的开销是上面几种方法中最小的，最终运行体验是最好的。如果要播放完重新播放的话就需要移除所有的class

.container {
  width: 100%;
  height: 300px;
  margin: auto;
  background: url('./images/thumbs(1).jpg') no-repeat;
  background-size: 100%;
  position: relative;
  will-change: transform;
}

.container>img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.container>img.active {
  opacity: 1;
  z-index: 1;
}

效果如下，大多数人都会以为是视频，其实就是图片，原理很简单，就是通过创建img标签，添加css属性实现图片显示隐藏，当然你可以通过增删dom元素实现相同的功能，不过那种方式会使图片资源加载慢，若是在线上问题会很大

至于序列图片，就找贵厂的UI设计师好了，让设计师处理，基本上，AE之类软件应该都了解。