Display Video Using HTML5: Part 1 - C# Corner

Trang chủ » Html5 Video Segment » Display Video Using HTML5: Part 1 - C# Corner

Có thể bạn quan tâm

HTML 5 Display Video Using HTML5: Part 1
  • Shirsendu Nandi
  • Oct 30, 2019
  • 41.8k
  • 0
  • 0
    • facebook
    • twitter
    • linkedIn
    • Reddit
    • WhatsApp
    • Email
    • Print
    • Other Artcile
htmlvideo.rar

Description

In this article, I will describe to you how to embed a video in your website using HTML 5 and display it.

Content

Today, most videos are shown through a plugin (like flash), Silverlight, etc. However, not all browsers have the same plugins. Now HTML5 specifies a standard way to include video, with the video element.

Video Formats

Currently, there are 3 supported video formats for the video element in HTML 5: Below are the supported browser list.
Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec
  • MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
The HTML5 <video> tag is used to specify video on an HTML document. For example, we could embed a music video on our web page for visitors to listen to and watch. The HTML5 <video> tag accepts some attributes that specify how the video should be played. Attributes include preload, autoload, loop and more. There are no closing <video> tags. Now below I will show you an example of how to display a video in HTM 5. It's very simple Step 1: Create a folder first with giving the folder name"video" Step 2: copy .ogg format video into this folder. Step 3: Create a simple text file name "video" and save the text file as "video.html". Step 4: Now open the video.html file in text mode and paste the below code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. background: black;
  7. color:#CCCCCC;
  8. }
  9. #c2 {
  10. background-image: url(foo.png);
  11. background-repeat: no-repeat;
  12. }
  13. div {
  14. float: left;
  15. border :1px solid #444444;
  16. padding:10px;
  17. margin: 10px;
  18. background:#3B3B3B;
  19. }
  20. </style>
  21. </head>
  22. <p>Godda Video</p>
  23. <br>
  24. <bodyonload="processor.doLoad()">
  25. <div>
  26. <videoid="video"src="You're my Love.ogg"controls="true"width="300"height="150"loop="true"/>
  27. </div>
  28. </body>
  29. </body>
  30. </html>
See in the above HTML code in the video tag I have given my video an id, with the video source. That video is included in my folder. I also mentioned the height and width. Now run the web page in chrome or Mozilla, firefox it will look like the below VideoHTML1.gif The interesting part of HTML 5 is that when you right-click above the video player, we will get a lot of option for downloading the video, copy the link location, full screen, unlike the flash player. VideoHTML2.gif

Conclusion

So in this article, we have seen the basic funda of displaying video using HTML 5. In my next article, I will show you other HTML 5 controls and more video operation in HTML 5 using .NET.

  • .net
  • CSS
  • Display video using HTML5
  • HTML 5
  • HTML 5 tutorials
Recommended Free Ebook C# Corner Ebook

Frontend Developer Interview Questions and Answers

Download Now! Similar Articles

Từ khóa » Html5 Video Segment