index.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <style>
  9. body {
  10. margin: 0;
  11. }
  12. * {
  13. margin: 0;
  14. padding: 0;
  15. }
  16. .video-wrap {
  17. position: relative;
  18. width: 100%;
  19. }
  20. .video-tool {
  21. position: absolute;
  22. left: 0;
  23. right: 0;
  24. top: 0;
  25. bottom: 0;
  26. margin: auto;
  27. height: 50px;
  28. text-align: center;
  29. font-size: 16px;
  30. color: #fff;
  31. display: none;
  32. }
  33. .video-wrap canvas {
  34. width: 100%;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="video-wrap">
  40. <canvas width="375" height="211" id="img2video1"></canvas>
  41. <div class="loadedPercent" id="loadedPercent"></div>
  42. <div class="video-tool" id="videoPlayBtn">点击继续</div>
  43. <div class="video-tool" id="videoEndBtn">点击重播</div>
  44. </div>
  45. <script src="./index.js"></script>
  46. </body>
  47. </html>