demo.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!doctype html>
  2. <html lang='en'>
  3. <head>
  4. <meta charset='utf-8'>
  5. <meta name='viewport' content='width=device-width'>
  6. <title>Show</title>
  7. <style type='text/css'>
  8. * { margin: 0; padding: 0; }
  9. html, body, main { height: 100%; width: 100%; }
  10. body { background: #000; }
  11. video, img { display: block; margin: 0 auto; cursor: none; }
  12. .fillwidth { width: 100%; height: auto; }
  13. .fillheight { height: 100%; width: auto; }
  14. footer { display: none; height: 0; width: 0; }
  15. </style>
  16. </head>
  17. <body>
  18. <main></main>
  19. <footer>
  20. <script src='show.js'></script>
  21. <script>
  22. let files = [
  23. 'image.png',
  24. 'image.jpg',
  25. {
  26. file: 'animated.gif',
  27. delay: 5,
  28. latency: 960
  29. },
  30. {
  31. file: 'substitute/%s.png',
  32. range: [4, 9],
  33. },
  34. {
  35. file: 'substitutev2/%s.png',
  36. range: ["one", "two", "three", "four"],
  37. },
  38. {
  39. file: 'prefixed-group/%03s.png',
  40. range: [1, 200],
  41. delay: 200,
  42. },
  43. {
  44. file: 'video.webm',
  45. delay: 3,
  46. },
  47. {
  48. file: 'video.mp4',
  49. delay: 5,
  50. },
  51. ];
  52. let s = new Show(document.getElementsByTagName('main')[0], files, 1500);
  53. </script>
  54. </footer>
  55. </body>
  56. </html>