media.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>reveal.js - Video, Audio and Iframes</title>
  6. <meta
  7. name="viewport"
  8. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  9. />
  10. <link rel="stylesheet" href="../dist/reveal.css" />
  11. <link rel="stylesheet" href="../dist/theme/white.css" id="theme" />
  12. </head>
  13. <body>
  14. <div class="reveal">
  15. <div class="slides">
  16. <section>
  17. <h2>Examples of embedded Video, Audio and Iframes</h2>
  18. </section>
  19. <section>
  20. <h2>Iframe</h2>
  21. <iframe
  22. data-autoplay
  23. width="700"
  24. height="540"
  25. src="https://slides.com/news/auto-animate/embed"
  26. frameborder="0"
  27. ></iframe>
  28. </section>
  29. <section
  30. data-background-iframe="https://www.youtube.com/embed/h1_nyI3z8gI"
  31. data-background-interactive
  32. >
  33. <h2 style="color: #fff">Iframe Background</h2>
  34. </section>
  35. <section>
  36. <h2>Video</h2>
  37. <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-autoplay></video>
  38. </section>
  39. <section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
  40. <h2>Background Video</h2>
  41. </section>
  42. <section>
  43. <h2>Auto-playing audio</h2>
  44. <audio src="assets/beeping.wav" data-autoplay></audio>
  45. </section>
  46. <section>
  47. <h2>Audio inside slide fragments</h2>
  48. <div class="fragment">
  49. Beep 1
  50. <audio src="assets/beeping.wav" data-autoplay></audio>
  51. </div>
  52. <div class="fragment">
  53. Beep 2
  54. <audio src="assets/beeping.wav" data-autoplay></audio>
  55. </div>
  56. </section>
  57. <section>
  58. <h2>Audio with controls</h2>
  59. <audio src="assets/beeping.wav" controls></audio>
  60. </section>
  61. </div>
  62. </div>
  63. <script src="../dist/reveal.js"></script>
  64. <script>
  65. Reveal.initialize({ hash: true });
  66. </script>
  67. </body>
  68. </html>