Wiki source code of Video einbinden

Last modified by Moritz Baumgarten on 15.01.2024
Show last authors
1 {{layout}}
2 {{layout-section ac:type="two_right_sidebar"}}
3 {{layout-cell}}
4 You can support the learning process visually or auditorily with a short video or audio excerpt. Therefore, appropriate media can be used in a course or course element in different ways. Besides file storage, which is rather unsuitable for larger media files, you can for example provide the user with a link or offer media that can be played directly in the course element.
5
6 For easy integration of media, use the internal text editor. This page offers step-by-step instructions on how to do this.
7
8 {{note title="Note"}}
9 The playback of the different media formats depends on the device and browser used. The formats mp3 or mp4 are recommended.
10 {{/note}}
11 {{/layout-cell}}
12
13 {{layout-cell}}
14
15 {{/layout-cell}}
16 {{/layout-section}}
17
18 {{layout-section ac:type="single"}}
19 {{layout-cell}}
20
21 {{/layout-cell}}
22 {{/layout-section}}
23
24 {{layout-section ac:type="single"}}
25 {{layout-cell}}
26 == Make video available by embed code ==
27
28
29
30 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. The user does not have to switch to another page or tab.
31
32 [[image:attach:Kursrun - eingebettetes Video_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
33
34
35 To embed a video on an internal page, proceed as follows:
36
37 (% class="wrapped" data-snooker-col-series="numbers" data-snooker-locked-cols="0" %)
38 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
39 (((
40 1
41 )))|(((
42 First, you need the **embed code** of the video. You can usually find this code in the editing area of your video platform. For individual platforms, the [[Find embed code>>doc:.Einbettungscode finden.WebHome||shape="rect"]] page describes from where you can copy this code. Save the code to a clipboard.
43 )))|(((
44 (% class="content-wrapper" %)
45 (((
46 [[image:attach:VCS - Einbettungscode_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
47 )))
48 )))
49 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
50 (((
51 2
52 )))|(((
53 Now open the **text editor**, e. g. in a single page course element, to which you wish to paste the video. Select **Insert** from the tool area of the text editor. A list opens. Here click on the **Media** selection option.
54 )))|(((
55 (% class="content-wrapper" %)
56 (((
57 [[image:attach:Tiny - Video einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
58 )))
59 )))
60 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
61 (((
62 3
63 )))|(((
64 In the dialogue that opens, select the displayed **Embed** tab. Enter your embed code in the text field. Close the dialogue with **OK**.
65 )))|(((
66 (% class="content-wrapper" %)
67 (((
68 [[image:attach:Tiny - Einbettungscode_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
69 )))
70 )))
71 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
72 (((
73 4
74 )))|(((
75 A placeholder for the video will then appear in the text field. Save your page with **Save and close**.
76 )))|(((
77 (% class="content-wrapper" %)
78 (((
79 [[image:attach:Tiny - Schließen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
80 )))
81 )))
82 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
83 (((
84 5
85 )))|(((
86 The editor view of the page closes, and you will see the playable video on the displayed page in the course view.
87 )))|(((
88 (% class="content-wrapper" %)
89 (((
90 [[image:attach:Kursrun - eingebettetes Video_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
91 )))
92 )))
93
94 {{info}}
95 [[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"]]
96
97 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.
98
99 Here is a small overview of the other options available there:
100
101 * Private: Not available to other users
102 * Hidden (if applicable + Anonymous): Can be found via a link
103 * Public (if applicable + Anonymous): Can be found via the Videocampus’s media overview
104 * Anonymous: Access is also possible without login. This is important for embedding media on other websites.
105 {{/info}}
106
107 {{info}}
108 By using an embedded code, other content that is available via URL can also be integrated into an HTML page. Application examples can be found here [[Inhalte einbetten>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.Inhalte einbetten.WebHome]].
109 {{/info}}
110 {{/layout-cell}}
111 {{/layout-section}}
112
113 {{layout-section ac:type="single"}}
114 {{layout-cell}}
115
116 {{/layout-cell}}
117 {{/layout-section}}
118
119 {{layout-section ac:type="single"}}
120 {{layout-cell}}
121 == Insert video link ==
122
123
124 If the video should not be visible in such a prominent way, as it is rather complementary to the text, it might be a good idea to include the video/audio file as a link. Here the user is shown a simple link entry, which can optionally be used to open the video in a new browser tab.
125
126 [[image:attach:Kursrun - Link_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
127
128
129 To insert the link to a video, proceed as follows:
130
131 (% class="wrapped" data-snooker-col-series="numbers" data-snooker-locked-cols="0" %)
132 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
133 (((
134 1
135 )))|(((
136 (% class="content-wrapper" %)
137 (((
138 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.
139 )))
140 )))|(% rowspan="2" %)(% rowspan="2" %)
141 (((
142 (% class="content-wrapper" %)
143 (((
144 [[image:attach:Tiny - Link einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
145 )))
146 )))
147 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
148 (((
149 2
150 )))|(((
151 (% class="content-wrapper" %)
152 (((
153 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.
154 )))
155 )))
156 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
157 (((
158 3
159 )))|(((
160 (% class="content-wrapper" %)
161 (((
162 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 desired target file or the Upload button[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Hochladen.png||data-xwiki-image-style="img-icon"]]to upload a new file which can then also be selected.
163 )))
164 )))|(((
165 (% class="content-wrapper" %)
166 (((
167 [[image:attach:Tiny - Datei auswählen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
168 )))
169 )))
170 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
171 (((
172 4
173 )))|(((
174 As a next optional step, you can specify a link text to be displayed on the page instead of the URL as well as an alternative title and the link's jump target. Confirm your entries in the dialogue by clicking on OK.
175
176 Save the page with **Save and close**.
177 )))|(((
178 (% class="content-wrapper" %)
179 (((
180 [[image:attach:Tiny - Link konfigurieren_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
181 )))
182 )))
183 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
184 (((
185 5
186 )))|(((
187 The editor view of the page closes, and you will see the inserted link on the displayed page in the course view.
188 )))|(((
189 (% class="content-wrapper" %)
190 (((
191 [[image:attach:Kursrun - Link_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
192 )))
193 )))
194 {{/layout-cell}}
195 {{/layout-section}}
196
197 {{layout-section ac:type="single"}}
198 {{layout-cell}}
199
200 {{/layout-cell}}
201 {{/layout-section}}
202
203 {{layout-section ac:type="single"}}
204 {{layout-cell}}
205 == Insert uploaded video directly ==
206
207
208
209 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.
210
211 [[image:attach:Kursrun - Video direkt_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
212
213
214 To insert a video in this way, proceed as follows:
215
216 (% class="wrapped" data-snooker-col-series="numbers" data-snooker-locked-cols="0" %)
217 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
218 (((
219 1
220 )))|(((
221 Open the text editor and go to the position in the text where the medium should be displayed.
222 )))|(% rowspan="2" %)(% rowspan="2" %)
223 (((
224 (% class="content-wrapper" %)
225 (((
226 [[image:attach:Tiny - Video einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
227 )))
228 )))
229 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
230 (((
231 2
232 )))|(((
233 In the menu area, select **Insert** and then click on **Media**.
234 )))
235 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
236 (((
237 3
238 )))|(((
239 (% class="content-wrapper" %)
240 (((
241 A dialogue opens in which you can enter the link source. To display all files that can be linked, click the browse icon[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Durchsuchen.png||data-xwiki-image-style="img-icon"]]next to the link source.
242 )))
243 )))|(((
244 (% class="content-wrapper" %)
245 (((
246 [[image:attach:Tiny - Dialog Video einfügen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
247 )))
248 )))
249 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
250 (((
251 4
252 )))|(((
253 (% class="content-wrapper" %)
254 (((
255 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 desired target file or the Upload button[[image:LMS.Benutzerhandbuch OPAL.Icons.WebHome@Icon_Hochladen.png||data-xwiki-image-style="img-icon"]] to upload a new file which can then also be selected.
256 )))
257 )))|(% rowspan="2" %)(% rowspan="2" %)
258 (((
259 (% class="content-wrapper" %)
260 (((
261 [[image:attach:Tiny - Videodatei auswählen_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
262 )))
263 )))
264 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
265 (((
266 5
267 )))|(((
268 If necessary, enter additional optional information. Confirm your entries in the dialogue by clicking on OK.
269
270 Save the page with **Save and close**.
271 )))
272 |(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)(% class="numberingColumn" data-mce-resize="false" contenteditable="false" %)
273 (((
274 6
275 )))|(((
276 The video is now displayed on the page and can be directly played or downloaded depending on the device and media format.
277 )))|(((
278 (% class="content-wrapper" %)
279 (((
280 [[image:attach:Kursrun - Video direkt_en.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
281 )))
282 )))
283 {{/layout-cell}}
284 {{/layout-section}}
285 {{/layout}}