尤明明Blog

网站建设 | 前端切图,技术不仅是一种专业,更是一种责任!

您的当前位置: 首页 » 前端学习 » js常用代码 »

video无法全端自动播放的问题--序列图片实现视频播放效果

2024-05-12   Umming   js常用代码    评论(0)    浏览(1110)


看看大神做的效果:

https://www.zhangxinxu.com/study/201805/image-sequence-frame-play.html


  1. CSS代码:
  2. .container {
  3. width: 256px; height: 464px;
  4. margin: auto;
  5. background-color: #000;
  6. position: relative;
  7. }
  8. .container > img {
  9. position: absolute;
  10. width: 100%; height: 100%;
  11. }
  12. .loading {
  13. position: absolute;
  14. height: 8px; width: 150px;
  15. border: 1px solid #eee;
  16. background: linear-gradient(to top, #eee, #eee);
  17. background-size: 0 100%;
  18. transition: background-size .1s;
  19. left: 0; top: 0; right: 0; bottom: 0;
  20. margin: auto;
  21. }
  22. .loading::before {
  23. content: attr(data-percent)'%';
  24. position: absolute;
  25. left: 0; top: -1.5em;
  26. font-size: 12px;
  27. color: #eee;
  28. }
  29. HTML代码:
  30. <div id="container" class="container">
  31. <span id="loading" class="loading" data-percent="0"></span>
  32. </div>
  33. JS代码:
  34. var urlRoot = './thumbs/';
  35. var indexRange = [1, 47];
  36. var maxLength = indexRange[1] - indexRange[0] + 1;
  37. // loading
  38. var eleContainer = document.getElementById('container');
  39. var eleLoading = document.getElementById('loading');
  40. // 存储预加载的DOM对象和长度信息
  41. var store = {
  42. length: 0
  43. };
  44. // 图片序列预加载
  45. for ( var start = indexRange[0]; start <= indexRange[1]; start++) {
  46. (function (index) {
  47. var img = new Image();
  48. img.onload = function () {
  49. store.length++;
  50. // 存储预加载的图片对象
  51. store[index] = this;
  52. play();
  53. };
  54. img.onerror = function () {
  55. store.length++;
  56. play();
  57. };
  58. img.src = urlRoot + index + '.jpg';
  59. })(start);
  60. }
  61.  
  62. var play = function () {
  63. // loading进度
  64. var percent = Math.round(100 * store.length / maxLength);
  65. eleLoading.setAttribute('data-percent', percent);
  66. eleLoading.style.backgroundSize = percent + '% 100%';
  67. // 全部加载完毕,无论成功还是失败
  68. if (percent == 100) {
  69. var index = indexRange[0];
  70. eleContainer.innerHTML = '';
  71. // 依次append图片对象
  72. var step = function () {
  73. if (store[index - 1]) {
  74. eleContainer.removeChild(store[index - 1]);
  75. }
  76. eleContainer.appendChild(store[index]);
  77. // 序列增加
  78. index++;
  79. // 如果超过最大限制
  80. if (index <= indexRange[1]) {
  81. setTimeout(step, 42);
  82. } else {
  83. // 本段播放结束回调
  84. // 我这里就放一个重新播放的按钮
  85. eleContainer.insertAdjacentHTML('beforeEnd', '<button onclick="play()">再看一遍英姿</button>');
  86. }
  87. };
  88. // 等100%动画结束后执行播放
  89. setTimeout(step, 100);
  90. }
  91. };

本文链接:https://www.umming.com/js/327.html

声明:本站信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!


发表评论:

//