2.2.5 Videos

Revision as of 15:41, 8 December 2023

EmbedVideo_(fork) is available from BlueSpice 4.4. It replaces the extension EmbedVideo

BlueSpice integrates the MediaWiki extension EmbedVideo_(fork) to embed video files from external video services such as YouTube or Vimeo. EmbedVideo supports more than 20 video services. In addition, you can also embed videos that have been uploaded to the wiki itself.

Embedding external videos

By default, placeholders are displayed for embedded videos until users provide their consent to load the video from the video service. This consent requirement can be disabled via server configuration.

Video placeholder

Content droplet

Videos hosted on supported external services can be added as a Content Droplet.

Source-editing mode

Note:These instructions are taken and adapted from the Mediawiki help page for EmbedVideo.

Syntax

Individual videos are embedded with the #ev tag:

{{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}}

Placeholders for unused arguments between two arguments have to remain empty and cannot be removed::

{{#ev:service|id|||description}}

The shortest option to embed a video is by specifying the service name and the video ID:

{{#ev:youtube|MLIE2642neg}}

Example with video description (- you can include a line break with the <br /> tag):

{{#ev:youtube|MLIE2642neg|||ISS - Life on the space station <br/> 1:04:27}}

Attributes for parser tag #ev

attribute	required	default	description
`service="(see supported services below)"`	yes		The video service that is called when the player is created.
`id="[id\|url]"`	yes		The video ID or full URL of the external video.
`dimensions="[width\|widthxheight\|xwidth]"`	no	640	Dimensions in pixelsto size the container for the player. The default format is width x height. It is possible to omit one of the dimensions. The `x` always has to be included before the height. Examples: `480`, `480x320`, `x320`. If the height is not specified, it is calculated using the width and the default ratio of the video service. Some video services such as Gfycat don't have a standard height. Therefore, the height setting should be included for each video. With `$wgEmbedVideoDefaultWidth` the default width can be overwritten in the file `LocalSettings.php` on the server.
`alignment="[left\|center\|right\|inline]"`	no	none	The video can be placed left, center, right, or inline. Inline allows to add multiple videos in one row. In mobile view, the videos are automatically aligned vertically.
`description="[wiki text]"`	no	none	Shows a description below the player container.
`container="[frame]"`	no	none	Determines the container type for the player. `frame`: Places the video player in a Mediawiki preview box.
`urlargs="modestbranding=1&version=3"`	no	none	Allows adding additional URL-arguments to the embedded url. This is useful for settings that are only offered by an individual video service.
`autoresize="false"`	no	true	Automatically adjusts the video size if the video would extend beyond the size of the container.
`valignment="[top\|middle\|bottom\|baseline]"`	no	none	Aligns the vertical placement of the video either to the top, middle, bottom, or baseline of the parent element. Using this parameter forces the alignment parameter to be inline.
`width`			Width of the video. The height is calculated automatically
`height`			Height of the video. The width is calculated automatically.
`poster` / `cover`			Only considered if consent is required to load the video($wgEmbedVideoRequireConsent=true).
`title`			Only considered if consent is required to load the video($wgEmbedVideoRequireConsent=true).

Embedding local videos

Media dialog

Like images, videos can be inserted directly on a page via the media dialog. The wiki recognizes the file extension and automatically generates the necessary HTML player.

BlueSpicePlayer and EmbedVideo

Videos that have been uploaded to the Wiki can also be embedded in source editing mode. This can also be done using the extension BlueSpicePlayer. BlueSpicePlayer has no functions to embed external videos, however.

The two extensions have the following differences when embedding local video files:


Syntax/Parameter	EmbedVideo	BlueSpicePlayer
Syntax	corresponds to the syntax of embedding image files: `[[File:samplename.mp4]]`	`<bs:showtime>samplename.mp4</bs:showtime>`
Size	Only the width can be defined. The video fills the entire width of the player container: `[[File:Manual:300px-video-size-showtime-600.PNG]]`	Width and height can be defined separately. If the width of the video is smaller than the video container, the canvas is filled in black. `<bs:showtime width="600">`.. BlueSpicePlayer with 600px width .
Loop	-	`<bs:showtime repeat="yes"</code>`
Autostart	-	`<bs:showtime autostart="yes"</code>`
Star/End	`[[File:samplename.mp4\|start=2\|end=6]]` Time can be added as: ss, mm:ss, hh:mm:ss	-
HTML-Output	embedded as <video> tag	embedded through nested <div> tags
Adjusts to mobile display	yes	no
Player controls
play button	yes	yes
progress bar	yes	yes
volume adjustment	yes	yes
fullscreen mode	yes	yes
picture-in-picture	yes	yes
download	yes	no
speed adjustment	no	yes

Supported video services

The following video services are supported. In parentheses, you find the service names that are used with the tag #ev:

Archive.org Videos (archiveorg), Bilibili (bilibli), KakaoTV (kakaotv), NaverTIV (navertv), Niconico (niconico), SoundCloud (soundcloud), Spotify Album (spotifyalbum), Spotify Artist (spotifyartist), Spotify Song (spotifytrack), Twitch (twitch), Vimeo (vimeo), YouTube (youtube), YouTube Playlist (youtubeplaylist), YouTube Video List (youtubevideolist).

New services can be requested viaGitHub from the developer.

Related info

Technical Reference: EmbedVideo (fork)

To submit feedback about this documentation, visit our community forum.

@@ Line 5: / Line 5: @@
 ==Embedding external videos==
 By default, placeholders are displayed for embedded videos until users provide their consent to load the video from the video service. This consent requirement can be disabled [https://www.mediawiki.org/w/index.php?title=Extension:EmbedVideo_(fork)#Configuration via server configuration].
-[[Datei:EmbedVideo (fork)-Zustimmung.png|link=https://de.wiki.bluespice.com/wiki/Datei:EmbedVideo%20(fork)-Zustimmung.png|alt=Grauer Hintergrund mit der Schaltfläche zur Zustimmung zum Video-Dienst|center|thumb|Video-Platzhalter]]
-=== Content droplet ===
+[[File:EmbedVideo (fork)-Zustimmung.png|alternativetext=Gray background with video service consent button|center|thumb|Video placeholder]]
+===Content droplet===
 Videos hosted on supported external services can be added as a [[Manual:Extension/ContentDroplets|Content Droplet]].
-=== Source-editing mode ===
+===Source-editing mode===
 {{Messagebox|boxtype=note|Note text=These instructions are taken and adapted from the [https://www.mediawiki.org/wiki/Extension:EmbedVideo Mediawiki help page] for EmbedVideo.}}
-==== Syntax ====
+====Syntax====
 Individual videos are embedded with the <code>#ev</code> tag:
 <syntaxhighlight lang="text">
@@ Line 28: / Line 29: @@
 </syntaxhighlight>
-==== Attributes for parser tag #ev ====
+====Attributes for parser tag #ev====
 {| class="contenttable-blue" style="width:100%;" data-sourcepos="123:1-133:266" dir="auto"
 ! data-sourcepos="123:2-123:46" |attribute
@@ Line 45: / Line 46: @@
 | data-sourcepos="126:70-126:263" |The video ID or full URL of the external video.
 |- data-sourcepos="127:1-127:596"
-| data-sourcepos="127:2-127:48" |<code><nowiki>dimensions="[width|widthxheight|xwidth]"</nowiki></code>
+| data-sourcepos="127:2-127:48" | <code><nowiki>dimensions="[width|widthxheight|xwidth]"</nowiki></code>
 | data-sourcepos="127:50-127:59" |no
 | data-sourcepos="127:61-127:69" |640
@@ Line 64: / Line 65: @@
 |- data-sourcepos="130:1-130:263"
 | data-sourcepos="130:2-130:46" |<code>container="[frame]"</code>
 | data-sourcepos="130:48-130:57" |no
 | data-sourcepos="130:59-130:67" |none
 | data-sourcepos="130:69-130:262" |Determines the container type for the player.
@@ Line 72: / Line 73: @@
 | data-sourcepos="131:48-131:57" |no
 | data-sourcepos="131:59-131:67" |none
 | data-sourcepos="131:69-131:262" |Allows adding additional URL-arguments to the embedded url. This is useful for settings that are only offered by an individual video service.
 |- data-sourcepos="132:1-132:263"
 | data-sourcepos="132:2-132:46" |<code>autoresize="false"</code>
 | data-sourcepos="132:48-132:57" |no
 | data-sourcepos="132:59-132:67" |true
 | data-sourcepos="132:69-132:262" |Automatically adjusts the video size if the video would extend beyond the size of the container.
@@ Line 102: / Line 103: @@
 |
 |
-|Only considered if consent is required to load the video($wgEmbedVideoRequireConsent=true).
+| Only considered if consent is required to load the video($wgEmbedVideoRequireConsent=true).
 |}
@@ Line 110: / Line 111: @@
 [[Manual:Extension/VisualEditor/Insert images|Like images]], videos can be inserted directly on a page via the media dialog. The wiki recognizes the file extension and automatically generates the necessary HTML player.
-===BlueSpicePlayer and EmbedVideo===
+=== BlueSpicePlayer and EmbedVideo===
 Videos that have been uploaded to the Wiki can also be embedded in source editing mode. This can also be done using the extension [[Manual:Extension/BlueSpicePlayer|BlueSpicePlayer]]. BlueSpicePlayer has no functions to embed external videos, however.
@@ Line 117: / Line 118: @@
 {| class="contenttable-blue" style="width:100%;"
 |+
-! style="width:20%;" |Syntax/Parameter
+! style="width:20%;" | Syntax/Parameter
 ! style="width:39%;" |EmbedVideo
 !BlueSpicePlayer
@@ Line 149: / Line 150: @@
 |embedded through nested <nowiki><div> tags</nowiki>
 |-
 | style="width:20%;" |Adjusts to mobile display
 | style="width:39%;" |yes
-|no
+| no
 |-
-| colspan="3" class="col-blue-light-bg" |Player controls
+| colspan="3" class="col-blue-light-bg" | Player controls
 |-
 | style="width:20%;" |play button
@@ Line 167: / Line 168: @@
 |yes
 |-
 | style="width:20%;" |fullscreen mode
 | style="width:39%;" |yes
 |yes