Skip to content

Commit 341ffe7

Browse files
eshanrnheshanrnh
authored
Merge pull request #7099 from umbraco/media
Added more details about videos
2 parents 94ffb5b + 2627a0b commit 341ffe7

File tree

5 files changed

+170
-0
lines changed

5 files changed

+170
-0
lines changed

‎10/umbraco-cms/fundamentals/design/rendering-media.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
7878
It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
7979
{% endhint %}
8080

81+
## Working with Video files
82+
83+
If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
84+
85+
### Example: Rendering a Video Media item
86+
87+
```csharp
88+
@{
89+
var videoUrl = string.Empty;
90+
var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
91+
92+
if (videoMediaItem != null)
93+
{
94+
videoUrl = videoMediaItem?.Url();
95+
}
96+
}
97+
98+
@if (!string.IsNullOrEmpty(videoUrl))
99+
{
100+
<video width="640" height="360" controls>
101+
<source src="@videoUrl" type="video/mp4">
102+
Your browser does not support the video tag.
103+
</video>
104+
}
105+
```
106+
107+
The example above assumes that:
108+
109+
* You've uploaded an `.mp4` file to the **Media** section.
110+
* You want to include basic playback controls in the browser.
111+
* You know the media item’s ID.
112+
113+
You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
114+
81115
### Other Media Items such as `File`
82116

83117
Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.

‎13/umbraco-cms/fundamentals/design/rendering-media.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
7676
It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
7777
{% endhint %}
7878

79+
## Working with Video files
80+
81+
If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
82+
83+
### Example: Rendering a Video Media item
84+
85+
```csharp
86+
@{
87+
var videoUrl = string.Empty;
88+
var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
89+
90+
if (videoMediaItem != null)
91+
{
92+
videoUrl = videoMediaItem?.Url();
93+
}
94+
}
95+
96+
@if (!string.IsNullOrEmpty(videoUrl))
97+
{
98+
<video width="640" height="360" controls>
99+
<source src="@videoUrl" type="video/mp4">
100+
Your browser does not support the video tag.
101+
</video>
102+
}
103+
```
104+
105+
The example above assumes that:
106+
107+
* You've uploaded an `.mp4` file to the **Media** section.
108+
* You want to include basic playback controls in the browser.
109+
* You know the media item’s ID.
110+
111+
You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
112+
79113
### Other Media Items such as `File`
80114

81115
Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.

‎14/umbraco-cms/fundamentals/design/rendering-media.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
7676
It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
7777
{% endhint %}
7878

79+
## Working with Video files
80+
81+
If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
82+
83+
### Example: Rendering a Video Media item
84+
85+
```csharp
86+
@{
87+
var videoUrl = string.Empty;
88+
var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
89+
90+
if (videoMediaItem != null)
91+
{
92+
videoUrl = videoMediaItem?.Url();
93+
}
94+
}
95+
96+
@if (!string.IsNullOrEmpty(videoUrl))
97+
{
98+
<video width="640" height="360" controls>
99+
<source src="@videoUrl" type="video/mp4">
100+
Your browser does not support the video tag.
101+
</video>
102+
}
103+
```
104+
105+
The example above assumes that:
106+
107+
* You've uploaded an `.mp4` file to the **Media** section.
108+
* You want to include basic playback controls in the browser.
109+
* You know the media item’s ID.
110+
111+
You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
112+
79113
### Other Media Items such as `File`
80114

81115
Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.

‎15/umbraco-cms/fundamentals/design/rendering-media.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
7676
It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
7777
{% endhint %}
7878

79+
## Working with Video files
80+
81+
If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
82+
83+
### Example: Rendering a Video Media item
84+
85+
```csharp
86+
@{
87+
var videoUrl = string.Empty;
88+
var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
89+
90+
if (videoMediaItem != null)
91+
{
92+
videoUrl = videoMediaItem?.Url();
93+
}
94+
}
95+
96+
@if (!string.IsNullOrEmpty(videoUrl))
97+
{
98+
<video width="640" height="360" controls>
99+
<source src="@videoUrl" type="video/mp4">
100+
Your browser does not support the video tag.
101+
</video>
102+
}
103+
```
104+
105+
The example above assumes that:
106+
107+
* You've uploaded an `.mp4` file to the **Media** section.
108+
* You want to include basic playback controls in the browser.
109+
* You know the media item’s ID.
110+
111+
You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
112+
79113
### Other Media Items such as `File`
80114

81115
Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.

‎16/umbraco-cms/fundamentals/design/rendering-media.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,40 @@ As with example one, we are accessing a MediaType `image` using the same Guid as
7676
It is always worth having null-checks around your code when retrieving media in case the conversion fails or Media() returns null. This makes your code more robust.
7777
{% endhint %}
7878

79+
## Working with Video files
80+
81+
If you upload a video file (such as `.mp4`) to the Media library, Umbraco will store it as a Video Media Type by default. Unlike images, video files won’t include properties like `umbracoWidth` or `umbracoHeight`, but you can still retrieve the media item and render it using the `<video>` HTML tag.
82+
83+
### Example: Rendering a Video Media item
84+
85+
```csharp
86+
@{
87+
var videoUrl = string.Empty;
88+
var videoMediaItem = Umbraco.Media(Guid.Parse("8c49c5d3-cb2a-48b2-87c9-7e2c1873e948"));
89+
90+
if (videoMediaItem != null)
91+
{
92+
videoUrl = videoMediaItem?.Url();
93+
}
94+
}
95+
96+
@if (!string.IsNullOrEmpty(videoUrl))
97+
{
98+
<video width="640" height="360" controls>
99+
<source src="@videoUrl" type="video/mp4">
100+
Your browser does not support the video tag.
101+
</video>
102+
}
103+
```
104+
105+
The example above assumes that:
106+
107+
* You've uploaded an `.mp4` file to the **Media** section.
108+
* You want to include basic playback controls in the browser.
109+
* You know the media item’s ID.
110+
111+
You can also add custom properties to your Video Media Type (for example: `thumbnail`, `autoplay`, `caption`) under **Settings** > **Media Types**.
112+
79113
### Other Media Items such as `File`
80114

81115
Accessing other media items can be performed in the same way. The techniques are not limited to the `Image` type, but it is one of the most common use cases.

0 commit comments

Comments
 (0)