HTML5 Video


SUBMITTED BY: lakben

DATE: May 12, 2017, 12:57 p.m.

FORMAT: HTML

SIZE: 1.6 kB

HITS: 7831

  1. Playing Videos in HTML
  2. Before HTML5, a video could only be played in a browser with a plug-in (like flash).
  3. The HTML5 <video> element specifies a standard way to embed a video in a web page.
  4. The HTML <video> Element
  5. To show a video in HTML, use the <video> element:
  6. Example
  7. <video width="320" height="240" controls>
  8. <source src="movie.mp4" type="video/mp4">
  9. <source src="movie.ogg" type="video/ogg">
  10. Your browser does not support the video tag.
  11. </video>
  12. How it Works
  13. The controls attribute adds video controls, like play, pause, and volume.
  14. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
  15. The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
  16. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
  17. HTML <video> Autoplay
  18. To start a video automatically use the autoplay attribute:
  19. Example
  20. <video width="320" height="240" autoplay>
  21. <source src="movie.mp4" type="video/mp4">
  22. <source src="movie.ogg" type="video/ogg">
  23. Your browser does not support the video tag.
  24. </video>
  25. CODE:
  26. <!DOCTYPE html>
  27. <html>
  28. <body>
  29. <video width="400" controls>
  30. <source src="mov_bbb.mp4" type="video/mp4">
  31. <source src="mov_bbb.ogg" type="video/ogg">
  32. Your browser does not support HTML5 video.
  33. </video>
  34. <p>
  35. Video courtesy of
  36. <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
  37. </p>
  38. </body>
  39. </html>

comments powered by Disqus