The EmbedVideo extension adds a parser function called #ev for embedding video clips from over 24 popular video sharing services in multiple languages and countries. It also adds video and audio media handlers to support transforming standard [[File:Example.mp4]] file links into embedded HTML5 <video> and <audio> tags.
- Project Homepage: Documentation at GitLab
- Source Code: Source code at GitLab
- Bugs:Issues at GitLab
- Licensing: EmbedVideo is released under The MIT License.
For locally uploaded content the process for displaying it on a page is the same as an image. See the image syntax documentation on MediaWiki.org for complete reference on this feature.
This example would display a video in page using a HTML5 <video> tag.
[[File:Example.mp4]]
To specify the start and end timestamps in the media use the start and end parameters. The timestamp can be formatted as one of: ss, :ss, mm:ss, hh:mm:ss, or dd:hh:mm:ss.
[[File:Example.mp4|start=2|end=6]]
The EmbedVideo parser function expects to be called in any of the following ways:
{{#ev:service|id}}{{#ev:service|id|dimensions}}{{#ev:service|id|dimensions|alignment}}{{#ev:service|id|dimensions|alignment|description}}{{#ev:service|id|dimensions|alignment|description|container}}{{#ev:service|id|dimensions|alignment|description|container|urlargs}}{{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize}}{{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}}
{{#ev:service|id|||description}}
The #evt parser tag allows for key=value pairs which allows for easier templating and readability.
{{#evt:
service=youtube
|id=https://www.youtube.com/watch?v=StPSujfX0YI
|alignment=right
}}
The #evu parser tag is like the #evt tag, but its first parameter is a URL that will be parsed to determine the service automatically.
{{#evu:https://www.youtube.com/watch?v=StPSujfX0YI
|alignment=right
}}
Videos can easily be embedded with the <embedvideo></embedvideo> tag hook. The ID/URL goes as the input between the tags and parameters can be added as the tag arguments.
<embedvideo service="youtube">https://www.youtube.com/watch?v=StPSujfX0YI</embedvideo>
Alternativly, you can also use the service id as the tag (assuming another extension isn't already using this tag).
<youtube>https://www.youtube.com/watch?v=StPSujfX0YI</youtube>
| Attribute | Description |
|---|---|
service="(See Supported Services below.)"
|
Required: yes
|
id="[id|url]"
|
Required: yes
|
dimensions="[WIDTH|WIDTHxHEIGHT|xHEIGHT]"
|
Required: no, Default: 640
|
alignment="[left|center|right|inline]"
|
Required: no, Default: none
|
description="[wiki text]"
|
Required: no, Default: none
|
container="[frame]"
|
Required: no, Default: none
|
urlargs="modestbranding=1&version=3"
|
Required: no, Default: none
|
autoresize="false"
|
Required: no, Default: true
|
valignment="[top|middle|bottom|baseline]"
|
Required: no, Default: none
|
For example, a video from YouTube uses the 'youtube' service selector. You can specify either the raw ID:
{{#ev:youtube|StPSujfX0YI}}
Or specify the full URL:
{{#ev:youtube|https://www.youtube.com/watch?v=StPSujfX0YI}}
To display the same video as a right aligned large thumbnail with a description:
{{#ev:youtube|https://www.youtube.com/watch?v=StPSujfX0YI|1000|right|Let eet GO|frame}}
For YouTube to have the video start at a specific time code utilize the urlargs(URL arguments) parameter. Take the rest of the URL arguments from the custom URL and place them into the urlargs. Please note that not all video services support extra URL arguments or may have different keys for their URL arguments.
https://www.youtube.com/watch?v=StPSujfX0YI&start=76
{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|||||start=76}}
URL arguments can be used to chop up a video and loop it:
https://www.youtube.com/watch?v=StPSujfX0YI&start=160&end=180&loop=1
{{#ev:youtube|https://www.youtube.com/watch?v=StPSujfX0YI|||||start=160&end=180&loop=1}}
Support for the unmaintained VideoLink extension’s tags has been added since version 2.5.
From the original extension documentation:
The <evlplayer /> specifies where the player should appear within the page, and the {{#vlink}} parser function allows creation of links that load a specific video.
Note that the use of the <vplayer> tag is also acceptable here for backwards compatibility.
This evlplayer tag is used to position the video player container within the page.
<evlplayer id="player id" w="width" h="height" class="class" style="style">default content</evlplayer>
A default video can be set to fill the container by default instead of default content as well.
<evlplayer id="player1" w="480" h="360" service="youtube" defaultid="StPSujfX0YI" />
| Attributes | Required | Default | Description |
|---|---|---|---|
| id | no | default | An optional unique identifier for this container |
| w | no | 800 | Width to send to the embedded player when its generated |
| h | no | achieve 16:9 from width | Height to send to the embedded player when its generated |
| class | no | Additional CSS class to add to the container div | |
| style | no | Additional in-line CSS to apply to the container div | |
| defaultid | no | Video ID of default video, if you want a default video. | |
| service | no | Service of default video, if you want a default video. |
An important caveat to make note of, is that the w and h attributes only effect the video that is being included into the container div, and not the actual container. For styling of the container, please use the class or style attributes.
Note that the use of the {{#vlink}} parser function is also acceptable here for backwards compatibility.
{{#evl:<video id>|<Link text>>|<video to play>|service=youtube|player=<player id>}}
In addition to all of the attributes supported by the #evt tag, these specific attributes apply to the #evl (and #vlink) tags. To maintain backwards compatibility, if you do not define a service then youtube is assumed.
| Attributes | Required | Default | Description |
|---|---|---|---|
| video id | yes | none | The ID of the video you would like to play or a comma separated list of videos to play. Please note that the use of multiple video IDs separated by a semicolon is now deprecated. |
| link text | yes | none | The text to display inside the link |
| video to play | no | none | The number that represents the video to play from video id if its is a comma separated list of ids. |
| player | no | ‘default’ | Player container to load video in. Note that the ID ‘default’ will only exist if you’ve defined a player with no ID. |
| initial video | deprecated |
In the original VideoLink, this would define what video to play first if multiple videos were define. Please see notes about in video id and start.
| |
| start | deprecated | 0:00 |
In the original VideoLink, this defined the start time of a video. Since we support multiple video services, this feature can now be replicated with the urlargs parameter. For backwards compatibility, this attribute will be respect on videos with the service youtube.
|
Creating a video list allows video links to create a playlist on the fly using the youtube and youtubevideolist service. Note: even if you define a service the system will use youtube if a list of videos is provided.
<evlplayer w="width" h="height" class="class" style="style" id="example-player">default content</evlplayer>
{{#evl:21X5lGlDOfg|NASA Live|1|player=example-player}}
{{#evl:lEyCq2KRZik|IIS Q&A|2|player=example-player}}
{{#evl:OLeWbRdW6rY|Space Station Tour|3|player=example-player}}
As of version 2.x, EmbedVideo supports embedding video content from the following services:
| Site | Service name(s) | ID example | URL example(s) | Notes | |
|---|---|---|---|---|---|
| Archive.org Videos |
archiveorg
| electricsheep-flock-244-80000-6 | https://archive.org/embed/electricsheep-flock-244-80000-6 | ||
| Bambuser |
bambuser
| 5262334 | http://bambuser.com/v/5262334 | Broadcasts | |
bambuser_channel
| Channels | ||||
| Bing |
bing
| 31ncp9r7l | http://www.bing.com/videos/watch/video/adorable-cats-attempt-to-eat-invisible-tuna/31ncp9r7l | ||
| Blip.tv |
blip
| http://blip.tv/vinylrewind/review-6864612 | Blip requires the full URL to the video page and does not accept the raw ID. | ||
| C3TV |
mediacccde
| 32c3-7305-quantum_cryptography | https://media.ccc.de/v/32c3-7305-quantum_cryptography | ||
| CollegeHumor |
collegehumor
| 6875289 | http://www.collegehumor.com/video/6875289/batman-says-his-goodbyes | ||
| Dailymotion |
dailymotion
| x1adiiw_archer-waking-up-as-h-jon-benjamin_shortfilms | http://www.dailymotion.com/video/x1adiiw_archer-waking-up-as-h-jon-benjamin_shortfilms | ||
| Daum TVPot |
tvpot - Obtain the URL or ID from the share menu URL.
| s9011HdLzYwpLwBodQzCHRB | http://tvpot.daum.net/v/s9011HdLzYwpLwBodQzCHRB | ||
| Div Share |
divshare
| ||||
| Edutopia | Edutopia content moved to YouTube. Please use the YouTube service selector below. | ||||
| FunnyOrDie |
funnyordie
| c61fb67ac9 | http://www.funnyordie.com/videos/c61fb67ac9/to-catch-a-predator-elastic-heart-edition | ||
facebook
| https://www.facebook.com/Warcraft/videos/10155717024919034/ | ||||
| Gfycat |
gfycat
| BruisedSilentAntarcticfurseal | http://www.gfycat.com/BruisedSilentAntarcticfurseal | ||
| Hitbox |
hitbox
| Washuu | http://www.hitbox.tv/Washuu | ||
| JW Player |
jwplayer
| cr5d8nbu-8ZpoNmmJ | https://content.jwplatform.com/players/cr5d8nbu-8ZpoNmmJ.html | ||
| Kickstarter |
kickstarter
| elanlee/exploding-kittens | https://www.kickstarter.com/projects/elanlee/exploding-kittens | ||
| Metacafe |
metacafe
| 11404579 | http://www.metacafe.com/watch/11404579/lan_party_far_cry_4/ | ||
| Microsoft Stream |
microsoftstream
| 3aaec3c4-01b7-46e1-b2fb-1a9b1ee444f5 | https://web.microsoftstream.com/video/3aaec3c4-01b7-46e1-b2fb-1a9b1ee444f5 | Videos require authentication to Office 365 services to view | |
| Mixer |
mixer
| RocketBear | https://mixer.com/RocketBear | Beam and Mixer Streams | |
| Nico Nico Video |
nico
| sm24394325 | http://www.nicovideo.jp/watch/sm24394325 | ||
| RuTube |
rutube
| b698163ccb67498db74d50cb0f22e556 | http://rutube.ru/video/b698163ccb67498db74d50cb0f22e556/ | ||
| SoundCloud |
soundcloud
| https://soundcloud.com/skrillex/skrillex-rick-ross-purple-lamborghini | SoundCloud requires the full URL. | ||
| Spotify |
spotifyalbum
| 1EoDsNmgTLtmwe1BDAVxV5 | https://open.spotify.com/album/1EoDsNmgTLtmwe1BDAVxV5 | ||
| Spotify |
spotifyartist
| 06HL4z0CvFAxyc27GXpf02 | https://open.spotify.com/artist/06HL4z0CvFAxyc27GXpf02 | ||
| Spotify |
spotifytrack
| 1EoDsNmgTLtmwe1BDAVxV5 | https://open.spotify.com/track/72jCZdH0Lhg93z6Z4hBjgj | ||
| TeacherTube |
teachertube
| 370511 | http://www.teachertube.com/video/thats-a-noun-sing-along-hd-version-370511 | ||
| TED Talks |
ted
| bruce_aylward_humanity_vs_ebola_the_winning_strategies_in_a_terrifying_war | http://www.ted.com/talks/bruce_aylward_humanity_vs_ebola_the_winning_strategies_in_a_terrifying_war | ||
| Tubi TV |
tubitv
| 318409 | http://tubitv.com/video/318409 | ||
| Tudou |
tudou
| mfQXfumwiew | http://www.tudou.com/listplay/mfQXfumwiew.html | ||
| Twitch |
twitch
| twitchplayspokemon | http://www.twitch.tv/twitchplayspokemon | Live Streams | |
twitchvod
| Archived Videos on Demand | ||||
| Videomaten |
videomaten
| ||||
| Vimeo |
vimeo
| 105035718 | http://vimeo.com/105035718 | ||
| Vine |
vine
| h2B7WMtuX2t | https://vine.co/v/h2B7WMtuX2t | ||
| Yahoo Screen |
yahoo
| katy-perry-dances-sharks-2015-024409668 | https://screen.yahoo.com/videos-for-you/katy-perry-dances-sharks-2015-024409668.html | ||
| YouTube |
youtube
| pSsYTj9kCHE | https://www.youtube.com/watch?v=pSsYTj9kCHE | Single videos | |
youtubeplaylist
| https://www.youtube.com/watch?v=CW_PbErQ_c8&list=PL76E80C7F756A2047 | Playlists | |||
youtubevideolist
| https://www.youtube.com/watch?v=CW_PbErQ_c8&playlist=CW_PbErQ_c8,CW_PbErQ_c8 | Video list | |||
| Youku |
youku
| XODc3NDgzMTY4 | http://v.youku.com/v_show/id_XODc3NDgzMTY4.html |
| Variable | Default Value | Description |
|---|---|---|
$wgEmbedVideoAddFileExtensions
|
true
| Boolean - Enable or disable adding video/audio file extensions to the list of allowable files to be uploaded. |
$wgEmbedVideoEnableVideoHandler
|
true
| Boolean - Enable or disable the video media handlers for displaying embedded video in articles. |
$wgEmbedVideoEnableAudioHandler
|
true
| Boolean - Enable or disable the audio media handlers for displaying embedded audio in articles. |
$wgEmbedVideoDefaultWidth
|
''
| Integer - Globally override the default width of video players. When not set this uses the video service's default width which is typically 640 pixels. |
$wgEmbedVideoMinWidth
|
''
| Integer - Minimum width of video players. Widths specified below this value will be automatically bounded to it. |
$wgEmbedVideoMaxWidth
|
''
| Integer - Maximum width of video players. Widths specified above this value will be automatically bounded to it. |
$wgFFmpegLocation
|
/usr/bin/ffmpeg
| String - Set the location of the ffmpeg binary. |
$wgFFprobeLocation
|
/usr/bin/ffprobe
| String - Set the location of the ffprobe binary. |
- v2.9.0
- Fix stored XSS in AudioTransformOutput and VideoTransformOutput.
- Fix autoResize on mobile.
- Fix video caption escaping the container.
- Handle multiple video sizes per page in resize.
- Move beam service to mixer.
- Add a default link title for #evl/#vlink.
- Add spotify playlist embeds.
- Add facebook video embeds.
- Fix centering of videos.
- Add Microsoft Stream service.
- Add title to iframes.
- Add API help messages for 1.33 compatibility.
- Fix static analysis issues.
- Fix Twitch embeds.
- v2.8.0
- Renamed hitbox.tv to smashcast.tv.
- Updated Nico Video embed code.
- Added support for Twitch clips.
- Fix issues with Twitch VODs.
- Removed unused $wgFFmpegLocation that was interferring with TimedMediaHandler.
- Added Polish translation.
- v2.7.4
- Added support for playlist to evlplayer
- Added support for youtube video list
- Updated Documentation for evlplayer
- Added missing dependency for evlplayer in extension.json
- v2.7.3
- Default Twitch VOD to autoplay=false by default
- Allow videos to be sized in 1:1 aspect ratios for special use cases.
- v2.7.2
- Added feature to evlplayer to allow default video content
- v2.7.1
- Fixed issue with youku videos not embedding properly on https enabled wikis.
- v2.7.0
- Added SoundCloud support
- Added ability to use service name as a parser tag (if not defined previously)
- v2.6.1
- Added new configuration options to disable adding media handlers and file extensions.
- Fixed an uninitialized array.
- Fixed undefined indexes in the AudioHandler class.
- Fixed class properties that were unintentionally declared as static.
- Fixed RTL language issues with CSS.
The major benefit of using a parser function as the injection mechanism for video clips (as opposed to an extension tag) is that parser functions can utilize template parameters (of the form {{{1}}}).
For example, say you found yourself making a lot of YouTube videos in thumbnail size, right-aligned like an image. You might make a template called Template:Youtube_tn which could contain this:
<div class="thumb tright">
{{#ev:youtube|{{{1}}}|{{{2|100}}}}}
</div>
And then call it like this:
{{youtube tn|someYoutubeId}}
There is an issue tracker set up on the GitLab project page.
Bug reports, feature requests, and patches are always welcome. New contributors can be added to the GitLab project if there is sufficient interest.