video无法全端自动播放的问题--序列图片实现视频播放效果
2024-05-12 Umming js常用代码 评论(0) 浏览(246)
看看大神做的效果:
https://www.zhangxinxu.com/study/201805/image-sequence-frame-play.html
CSS代码: .container { width: 256px; height: 464px; margin: auto; background-color: #000; position: relative; } .container > img { position: absolute; width: 100%; height: 100%; } .loading { position: absolute; height: 8px; width: 150px; border: 1px solid #eee; background: linear-gradient(to top, #eee, #eee); background-size: 0 100%; transition: background-size .1s; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .loading::before { content: attr(data-percent)'%'; position: absolute; left: 0; top: -1.5em; font-size: 12px; color: #eee; } HTML代码: <div id="container" class="container"> <span id="loading" class="loading" data-percent="0"></span> </div> JS代码: var urlRoot = './thumbs/'; var indexRange = [1, 47]; var maxLength = indexRange[1] - indexRange[0] + 1; // loading var eleContainer = document.getElementById('container'); var eleLoading = document.getElementById('loading'); // 存储预加载的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'; })(start); } var play = function () { // loading进度 var percent = Math.round(100 * store.length / maxLength); eleLoading.setAttribute('data-percent', percent); eleLoading.style.backgroundSize = percent + '% 100%'; // 全部加载完毕,无论成功还是失败 if (percent == 100) { var index = indexRange[0]; eleContainer.innerHTML = ''; // 依次append图片对象 var step = function () { if (store[index - 1]) { eleContainer.removeChild(store[index - 1]); } eleContainer.appendChild(store[index]); // 序列增加 index++; // 如果超过最大限制 if (index <= indexRange[1]) { setTimeout(step, 42); } else { // 本段播放结束回调 // 我这里就放一个重新播放的按钮 eleContainer.insertAdjacentHTML('beforeEnd', '<button onclick="play()">再看一遍英姿</button>'); } }; // 等100%动画结束后执行播放 setTimeout(step, 100); } };
上一篇: 极致cms添加内容自动生成随机自定义链接
本文链接:https://www.umming.com/js/327.html 百度已收录
声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
也许你还会对下面的内容感兴趣:
发表评论: