Skip to content

Commit 09fed65

Browse files
ajay-dhangarajay-dhangar
committed
added html versions content
1 parent bf4007e commit 09fed65

13 files changed

+4147
-1097
lines changed

‎blog/2019-05-28-first-blog-post.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
slug: first-blog-post
33
title: First Blog Post
4-
authors: [slorber, yangshun]
4+
authors: [ajay-dhangar]
55
tags: [hola, docusaurus]
66
---
77

‎blog/2019-05-29-long-blog-post.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
slug: long-blog-post
33
title: Long Blog Post
4-
authors: yangshun
4+
authors: ajay-dhangar
55
tags: [hello, docusaurus]
66
---
77

‎blog/2021-08-01-mdx-blog-post.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
slug: mdx-blog-post
33
title: MDX Blog Post
4-
authors: [slorber]
4+
authors: [ajay-dhangar]
55
tags: [docusaurus]
66
---
77

‎blog/authors.yml

+14-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
1-
yangshun:
2-
name: Yangshun Tay
3-
title: Front End Engineer @ Facebook
4-
url: https://github.com/yangshun
5-
image_url: https://github.com/yangshun.png
6-
page: true
7-
socials:
8-
x: yangshunz
9-
github: yangshun
10-
11-
slorber:
12-
name: Sébastien Lorber
13-
title: Docusaurus maintainer
14-
url: https://sebastienlorber.com
15-
image_url: https://github.com/slorber.png
1+
ajay-dhangar:
2+
name: Ajay Dhangar
3+
title: Founder of CodeHarborHub
4+
url: https://ajay-dhangar.github.io/
5+
image_url: https://avatars.githubusercontent.com/u/99037494?v=4
6+
email: [email protected]
167
page:
178
# customize the url of the author page at /blog/authors/<permalink>
18-
permalink: '/all-sebastien-lorber-articles'
9+
permalink: '/all-ajay-dhangar-articles'
10+
description: >
11+
A passionate developer who loves to code and build new things. I am a Full Stack Developer and a Cyber Security, ML & AI Enthusiast. I am also a Technical Content Writer and a Speaker. I love to share my knowledge with the community. I am the Founder of CodeHarborHub. I am also a Technical Content Writer at GeeksforGeeks. I am a Girl Script Summer of Code 2024 Project Manager (PA).
1912
socials:
20-
x: sebastienlorber
21-
linkedin: sebastienlorber
22-
github: slorber
23-
newsletter: https://thisweekinreact.com
13+
x: CodesWithAjay
14+
linkedin: ajay-dhangar
15+
github: ajay-dhangar
16+
stackoverflow: 18530900
17+
newsletter: https://ajay-dhangar.github.io

‎docs/html-media/video.mdx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
id: video
3+
title: HTML Video Element
4+
sidebar_label: 🙋🏻 Video
5+
description: HTML Video Element is used to embed video content in a document.
6+
tags: ['video']
7+
keywords: ['html', 'video', 'video element', 'html video element']
8+
sidebar_position: 3
9+
---
10+
11+
Video element is used to embed video content in a document. It may contain one or more video sources, represented using the src attribute or the source element: the browser will choose the most suitable one.
12+
13+
## Syntax
14+
15+
```html title="Syntax"
16+
<video controls>
17+
<source src="video.mp4" type="video/mp4">
18+
<source src="video.ogg" type="video/ogg">
19+
Your browser does not support the video element.
20+
</video>
21+
```
22+
23+
## Attributes
24+
25+
- **autoplay**: It is a boolean attribute. If specified, the video will automatically begin playback as soon as it can do so, without waiting for the entire video file to finish downloading.
26+
- **controls**: It is a boolean attribute. If specified, the browser will display controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
27+
- **loop**: It is a boolean attribute. If specified, the video player will automatically seek back to the start upon reaching the end of the video.
28+
- **muted**: It is a boolean attribute. If specified, the video will be initially silenced.
29+
30+
## Example
31+
32+
```html title="index.html"
33+
<!DOCTYPE html>
34+
<html lang="en">
35+
<head>
36+
<meta charset="UTF-8">
37+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
38+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
39+
<title>Video Element Example</title>
40+
</head>
41+
<body>
42+
<h1>Video Element Example</h1>
43+
<video controls>
44+
<source src="video.mp4" type="video/mp4">
45+
<source src="video.ogg" type="video/ogg">
46+
Your browser does not support the video element.
47+
</video>
48+
</body>
49+
</html>
50+
```
51+
52+
<BrowserWindow url="https://.../index.html">
53+
<>
54+
<h1>Video Element Example</h1>
55+
<video controls>
56+
<source src="/videos/video.mp4" type="video/mp4" />
57+
<source src="video.ogg" type="video/ogg" />
58+
Your browser does not support the video element.
59+
</video>
60+
</>
61+
</BrowserWindow>
62+
63+
## Browser Support
64+
65+
Video element is supported in all major browsers. You can check the browser compatibility [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#browser_compatibility).
66+
67+
## Accessibility
68+
69+
- Always provide a text alternative for video content.
70+
- Use the `controls` attribute to provide a user interface for controlling the video playback.
71+
- Use the `autoplay` attribute with caution as it can be annoying for users.
72+
73+
## Resources
74+
75+
- [MDN Web Docs - Video Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
76+
- [W3Schools - HTML Video](https://www.w3schools.com/html/html5_video.asp)
77+
- [Can I use - Video Element](https://caniuse.com/video)
78+
79+
## Summary
80+
81+
Video element is used to embed video content in a document. It may contain one or more video sources, represented using the src attribute or the source element: the browser will choose the most suitable one.

0 commit comments

Comments
 (0)