Skip to Content

Wiki source code of Video einbinden (OPAL)

Last modified by Anna Paul-Hasenfuss on 10.05.2025
Hide last authors
Carina Enke 496.2 1 {{section}}
2 {{column width="60%"}}
Carina Enke 502.1 3 You can support the learning process visually or auditorily with a short video or audio excerpt. These types of media can be used in different ways in a course or course element. Apart from file storage, which is less suitable for larger media files, you can also provide users with a link or play media directly in the course element.
Carina Enke 161.1 4
Carina Enke 502.1 5 A very simple way to integrate media is via the internal text editor. This page offers step-by-step instructions on how to do this.
Carina Enke 161.1 6
Carina Enke 502.1 7 {{note title="Note"}}
8 Each media format can be played depending on the device and browser used. We recommend using the mp3 or mp4 formats.
Carina Enke 161.1 9 {{/note}}
Carina Enke 496.2 10 {{/column}}
Carina Enke 161.1 11
Carina Enke 496.2 12 {{column width="30%"}}
13 {{panel title="Inhalt"}}
14 {{toc start="2"/}}
15 {{/panel}}
16 {{/column}}
Carina Enke 496.13 17
Carina Enke 496.15 18
Carina Enke 496.2 19 {{/section}}
Carina Enke 161.1 20
Carina Enke 502.1 21 == Make videos available via Embed Code ==
Carina Enke 496.6 22
Carina Enke 161.1 23
Carina Enke 502.1 24 This option is suitable for videos that should not be uploaded to the OPAL learning platform because they are already available elsewhere. A video embedded in this way is displayed in the course view with a preview image. The video can be started directly from there by clicking the Play button. Users do not have to switch to another page or another tab.
Carina Enke 169.1 25
Carina Enke 502.1 26 [[image:attach:Kursrun - eingebettetes Video_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 27
28
Carina Enke 502.1 29 To embed a video on an internal page, proceed as follows:
Carina Enke 483.1 30
31 (% class="wrapped" data-snooker-col-series="numbers" data-snooker-locked-cols="0" %)
Carina Enke 502.1 32 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 33 (((
34 1
Carina Enke 502.1 35 )))|(((
36 First, you need the **Embed Code** of the video. You can usually find this code in the editing area of your video platform. The[[ Finding Embed Codes>>doc:.Einbettungscode finden.WebHome||shape="rect"]] page describes where you can copy this code for individual platforms. Save the code to your clipboard.
37 )))|(((
Carina Enke 483.1 38 (% class="content-wrapper" %)
39 (((
Carina Enke 502.1 40 [[image:attach:VCS - Einbettungscode_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 41 )))
42 )))
Carina Enke 502.1 43 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 44 (((
45 2
Carina Enke 502.1 46 )))|(((
47 Now open the **text editor**, e.g. in a single-page course element, to which you want to insert the video. Select **Insert** from the tool area of the text editor. This opens a list from which you can select the **media** option.
48 )))|(((
Carina Enke 483.1 49 (% class="content-wrapper" %)
50 (((
Carina Enke 502.1 51 [[image:attach:Tiny - Video einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 52 )))
53 )))
Carina Enke 502.1 54 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 55 (((
56 3
Carina Enke 502.1 57 )))|(((
58 In the dialogue that opens, select the displayed **Embed** tab. Enter your embed code in the text field and close the dialogue with **OK**.
59 )))|(((
Carina Enke 483.1 60 (% class="content-wrapper" %)
61 (((
Carina Enke 502.1 62 [[image:attach:Tiny - Einbettungscode_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 63 )))
64 )))
Carina Enke 502.1 65 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 66 (((
67 4
Carina Enke 502.1 68 )))|(((
69 A placeholder for the video will then appear in the text field. Save your page with **save and close**.
70 )))|(((
Carina Enke 483.1 71 (% class="content-wrapper" %)
72 (((
Carina Enke 502.1 73 [[image:attach:Tiny - Schließen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 74 )))
75 )))
Carina Enke 502.1 76 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 77 (((
78 5
Carina Enke 502.1 79 )))|(((
80 The editor view of the page closes, and you will see the playable video on the displayed page in the course view.
81 )))|(((
Carina Enke 483.1 82 (% class="content-wrapper" %)
83 (((
Carina Enke 502.1 84 [[image:attach:Kursrun - eingebettetes Video_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 85 )))
86 )))
87
88 {{info}}
Carina Enke 502.1 89 [[image:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.Video einbinden.Einbettungscode finden.WebHome@Icon_Logo VCS.png||data-xwiki-image-style="img-icon" height="60" width="103"]]
Carina Enke 483.1 90
Carina Enke 502.1 91 If you use a video from the Videocampus Sachsen for embedding, please check the options set there for your medium in the “Visibility of publication” area. **At least the “hidden” and “allow anonymous access” options** must be activated for the video to be visible in OPAL.
Carina Enke 483.1 92
Carina Enke 502.1 93 Here is a small overview of the other options available there:
Carina Enke 483.1 94
Carina Enke 502.1 95 * Private: Not available to other users
96 * Hidden (if applicable + Anonymous): Can be found via a link
97 * Public (if applicable + Anonymous): Can be found via the Videocampus’s media overview
98 * Anonymous: Access is also possible without login. This is important for embedding media on other websites.
Carina Enke 483.1 99 {{/info}}
100
101 {{info}}
Carina Enke 502.1 102 By using an embedded code, other content that is available via URL can also be integrated into an HTML page. You can find some application examples here [[Embed Content>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.Inhalte einbetten.WebHome]].
Carina Enke 483.1 103 {{/info}}
Carina Enke 161.1 104
Carina Enke 502.1 105 == How to insert a video link ==
Carina Enke 161.1 106
Moritz Baumgarten 496.1 107
Carina Enke 502.1 108 If you do not want to present the video prominently, as it is more of a supplement to the text, you can integrate the video/audio file as a link. In this case, users are shown a link to open the video in a new browser tab if they want to.
Moritz Baumgarten 496.1 109
Carina Enke 502.1 110 [[image:attach:Kursrun - Link_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 111
112
Carina Enke 502.1 113 To insert a video link, proceed as follows:
Carina Enke 483.1 114
115 (% class="wrapped" data-snooker-col-series="numbers" data-snooker-locked-cols="0" %)
Carina Enke 502.1 116 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 117 (((
118 1
Carina Enke 502.1 119 )))|(((
120 (% class="content-wrapper" %)
Carina Enke 483.1 121 (((
Carina Enke 502.1 122 Open the text editor and create or edit the text. Select the **Insert link** icon[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Link.png||data-xwiki-image-style="img-icon"]]from the menu bar of the editor.
Carina Enke 483.1 123 )))
Carina Enke 502.1 124 )))|(% rowspan="2" %)(% rowspan="2" %)
Carina Enke 483.1 125 (((
Carina Enke 502.1 126 (% class="content-wrapper" %)
Carina Enke 483.1 127 (((
Carina Enke 502.1 128 [[image:attach:Tiny - Link einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 129 )))
130 )))
Carina Enke 502.1 131 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 132 (((
133 2
Carina Enke 502.1 134 )))|(((
135 (% class="content-wrapper" %)
Carina Enke 483.1 136 (((
Carina Enke 502.1 137 A dialogue opens in which you can directly enter the link address. Alternatively, you can also access all linkable files via the[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Durchsuchen.png||data-xwiki-image-style="img-icon"]]icon at the end of the URL line.
Carina Enke 483.1 138 )))
139 )))
Carina Enke 502.1 140 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 141 (((
142 3
Carina Enke 502.1 143 )))|(((
144 (% class="content-wrapper" %)
Carina Enke 483.1 145 (((
Carina Enke 502.1 146 The file selection dialogue opens. Use the Add button [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Plus.png||data-xwiki-image-style="img-icon"]] to select the relevant target file or the Upload button[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Hochladen.png||data-xwiki-image-style="img-icon" height="27" width="29"]]to upload a new file, which can then also be selected.
Carina Enke 483.1 147 )))
Carina Enke 502.1 148 )))|(((
149 (% class="content-wrapper" %)
Carina Enke 483.1 150 (((
Carina Enke 502.1 151 [[image:attach:Tiny - Datei auswählen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 152 )))
153 )))
Carina Enke 502.1 154 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 155 (((
156 4
Carina Enke 502.1 157 )))|(((
158 After that, you can optionally enter the required link text to be displayed on the page instead of the URL. Furthermore, you can specify an alternative title and the target of the link. Confirm your entries with OK and save the page with **save and close**.
159 )))|(((
160 (% class="content-wrapper" %)
Carina Enke 483.1 161 (((
Carina Enke 502.1 162 [[image:attach:Tiny - Link konfigurieren_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 163 )))
164 )))
Carina Enke 502.1 165 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 166 (((
167 5
Carina Enke 502.1 168 )))|(((
169 The editor view of the page closes, and you will see the inserted link on the displayed page in the course view.
170 )))|(((
171 (% class="content-wrapper" %)
Carina Enke 483.1 172 (((
Carina Enke 502.1 173 [[image:attach:Kursrun - Link_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 174 )))
175 )))
176
Carina Enke 502.1 177 == How to insert an uploaded video directly ==
Carina Enke 496.17 178
Carina Enke 502.1 179 If a video or audio file is already available in the course storage folder, it can also be displayed in the page text in a playable format. This option is useful if the medium has not yet been uploaded to a video platform.
Carina Enke 496.17 180
Carina Enke 502.1 181 [[image:attach:Kursrun - Video direkt_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 182
183
Carina Enke 502.1 184 To insert a video in this way, proceed as follows:
Carina Enke 483.1 185
186 (% class="wrapped" data-snooker-col-series="numbers" data-snooker-locked-cols="0" %)
Carina Enke 502.1 187 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 188 (((
189 1
Carina Enke 502.1 190 )))|(((
191 Open the text editor and go to the position in the text where the medium should be displayed.
192 )))|(% rowspan="2" %)(% rowspan="2" %)
Carina Enke 483.1 193 (((
Carina Enke 502.1 194 (% class="content-wrapper" %)
Carina Enke 483.1 195 (((
Carina Enke 502.1 196 [[image:attach:Tiny - Video einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 197 )))
198 )))
Carina Enke 502.1 199 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 200 (((
201 2
Carina Enke 502.1 202 )))|Click on **Insert** in the menu area and then on **Media**.
203 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 204 (((
205 3
Carina Enke 502.1 206 )))|(((
207 (% class="content-wrapper" %)
Carina Enke 483.1 208 (((
Carina Enke 502.1 209 In the dialogue that opens, you can enter the source of the link. To display all linkable files, click on the browse icon[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Durchsuchen.png||data-xwiki-image-style="img-icon"]]next to Source.
Carina Enke 483.1 210 )))
Carina Enke 502.1 211 )))|(((
212 (% class="content-wrapper" %)
Carina Enke 483.1 213 (((
Carina Enke 502.1 214 [[image:attach:Tiny - Dialog Video einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 215 )))
216 )))
Carina Enke 502.1 217 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 218 (((
219 4
Carina Enke 502.1 220 )))|(((
221 (% class="content-wrapper" %)
Carina Enke 483.1 222 (((
Carina Enke 502.1 223 The media management dialogue opens. Use the Add button [[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Plus.png||data-xwiki-image-style="img-icon"]] to select the relevant target file or the Upload button[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Hochladen.png||data-xwiki-image-style="img-icon" height="24" width="25"]] to upload a new file, which can then also be selected.
Carina Enke 483.1 224 )))
Carina Enke 502.1 225 )))|(% rowspan="2" %)(% rowspan="2" %)
Carina Enke 483.1 226 (((
Carina Enke 502.1 227 (% class="content-wrapper" %)
Carina Enke 483.1 228 (((
Carina Enke 502.1 229 [[image:attach:Tiny - Videodatei auswählen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 230 )))
231 )))
Carina Enke 502.1 232 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 233 (((
234 5
Carina Enke 502.1 235 )))|(((
236 If necessary, enter further information. Confirm your entries with OK.
Carina Enke 483.1 237
Carina Enke 502.1 238 Save the page with **save and close**.
Carina Enke 483.1 239 )))
Carina Enke 502.1 240 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
Carina Enke 483.1 241 (((
242 6
Carina Enke 502.1 243 )))|(((
244 The video is now displayed on the page and can be directly played or downloaded depending on the device and media format.
245 )))|(((
246 (% class="content-wrapper" %)
Carina Enke 483.1 247 (((
Carina Enke 502.1 248 [[image:attach:Kursrun - Video direkt_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
Carina Enke 483.1 249 )))
250 )))