media.html 1.8 KB

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