Help:Embed Videos

From GAMEO
Revision as of 20:48, 1 February 2018 by SamSteiner (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

{{ Extension /en }}

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 Github
Source Code
Source code at Github
Bugs
issues at Github
Licensing
EmbedVideo is released under The MIT License.

Notice: As of the 2.x series the EmbedVideo extension has a new maintainer and an entirely rewritten code base. It retains backwards compatibility with EmbedVideo 1.0 and EmbedVideoPlus.

Installation

{{ ExtensionInstall 

/en }}

Usage

Media Handler

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]]

Tags

The EmbedVideo parser function expects to be called in any of the following ways:

#ev - Classic Parser Tag

  • {{#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}}

However, if needed optional arguments may be left blank by not putting anything between the pipes:

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

#evt - Parser Tag for Templates

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=pSsYTj9kCHE
|alignment=right
}}

#evu - Parser Tag for URLs

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=pSsYTj9kCHE
|alignment=right
}}

====

EmbedVideo is missing a required parameter.

</nowiki> 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=pSsYTj9kCHE</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=pSsYTj9kCHE</youtube>


Attributes for Parser Tags

Attribute Description
service="(See Supported Services below.)" Required: yes
The video service to call.
id="[id|url]" Required: yes
The raw ID of the video or URL from the player page.
dimensions="[WIDTH|WIDTHxHEIGHT|xHEIGHT]" Required: no, Default: 640
Dimensions in pixels to size the embed container. The standard format is width x height where either can be omitted, but the x must proceed height to indicate it as the height.
Examples: 480, 480x320, x320. If the height is not provided it will be calculated automatically from the width and service default ratio.
Some services such as Gfycat do not have standard heights and should be specified for each embed. $wgEmbedVideoDefaultWidth can be set in LocalSettings.php to override the default width.
alignment="[left|center|right|inline]" Required: no, Default: none
Align the placement of the video either to the left, centered, or to the right. Inline will allow multiple videos to display side by side without forced line breaks.
description="[wiki text]" Required: no, Default: none
Display a description under the embed container.
container="[frame]" Required: no, Default: none
Specifies the container type to use for the embed.
frame: Wrap the video player in a Mediawiki thumbnail box.
urlargs="modestbranding=1&version=3" Required: no, Default: none
Allows extra URL arguments to be appended to the generated embed URL. This is useful for obscure options only supported on one service.
autoresize="false" Required: no, Default: true
Automatically resize videos when their size will cause them to break outside of their container element.
valignment="[top|middle|bottom|baseline]" Required: no, Default: none
Align 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.

Examples

File:EmbedVideoExample1.jpg
Example #1

For example, a video from YouTube uses the 'youtube' service selector. You can specify either the raw ID: 

{{#ev:youtube|pSsYTj9kCHE}}

Or specify the full URL: 

{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE}}


File:EmbedVideoExample2.jpg
Example #2




To display the same video as a right aligned large thumbnail with a description: 

{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|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=pSsYTj9kCHE&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=pSsYTj9kCHE&start=160&end=180&loop=1
{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|||||start=160&end=180&loop=1}}

Support for VideoLink Tags

Support for the unmaintained VideoLink extension’s tags has been added since version 2.5.

From the original extension documentation: 

The VideoLink extension allows embedding of YouTube videos in articles; allowing for multiple linked videos to be played in a single embedded video player, first shown when a user clicks on a video link.

The <vplayer /> specifies where the player should appear within the page, and the {{#vlink}} parser function allows creation of links that load a specific video.

<evlplayer> - Tag Hook for Video Container

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. 

<vplayer id="player id" w="width" h="height" class="class" style="style">default content</vplayer>
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

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.

#evl - Parser Function for Video Links

Note that the use of the {{#vlink}} parser function is also acceptable here for backwards compatibility. 

{{#evl:<video id>|<Link text>|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. Please note that the use of multiple video IDs separated by a semicolon is now deprecated. Please use the proper service for playlists if you would like play multiple videos from a single link
link text yes none The text to display inside the link
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.

Supported Services

As of version 2.x, EmbedVideo supports embedding video content from the following services:

Site Service Name(s) ID Example URL Example(s)
Archive.org Videos archiveorg electricsheep-flock-244-80000-6 https://archive.org/details/electricsheep-flock-244-80000-6 
 https://archive.org/embed/electricsheep-flock-244-80000-6
Bambuser bambuser - Broadcasts bambuser_channel - Channels 5262334 http://bambuser.com/v/5262334
Beam beam - Streams RocketBear https://beam.pro/RocketBear
Bing bing 31ncp9r7l http://www.bing.com/videos/watch/video/adorable-cats-attempt-to-eat-invisible-tuna/31ncp9r7l
Blip.tv blip - Blip requires the full URL to the video page and does not accept the raw ID. http://blip.tv/vinylrewind/review-6864612
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
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/
Nico Nico Video nico sm24394325 http://www.nicovideo.jp/watch/sm24394325
RuTube rutube b698163ccb67498db74d50cb0f22e556 http://rutube.ru/video/b698163ccb67498db74d50cb0f22e556/
SoundCloud soundcloud use full url https://soundcloud.com/skrillex/skrillex-rick-ross-purple-lamborghini
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 - Live Streams twitchvod - Archived Videos on Demand twitchplayspokemon http://www.twitch.tv/twitchplayspokemon
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 - Single Videos youtubeplaylist - Playlists pSsYTj9kCHE https://www.youtube.com/watch?v=pSsYTj9kCHE 
 https://www.youtube.com/watch?v=CW_PbErQ_c8&list=PL76E80C7F756A2047
Youku youku XODc3NDgzMTY4 http://v.youku.com/v_show/id_XODc3NDgzMTY4.html

Configurations

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.

Version history

v2.7.0
  • Added SoundCloud support
  • Added ability to use service name as a parser tag (if not defined previously)
v2.6.1
v2.6.0
v2.5.2
  • If ffmpeg is not installed on the server the FFProbe class will no longer attempt to use and instead just return generic descriptions.
  • Fixed properties on FFProbe being incorrectly declared as static.
  • Fixed issues with not returning generic descriptions when the local file being accessed by ffprobe is not readable.
v2.5.1
  • Added URL argument support to Twitch services.
v2.5.0
  • Added support for VideoLink tags
  • Support for Disclose.tv added
  • Twitch VOD support updated.
  • Added #evu parser tag
v2.4.1
  • Merged Sophivorus' improvements and fixes.
    • Support for TubiTV.com with the tubitv service identifier.
    • Fixed vimeo aspect ratio.
    • Fixed dailymotion ID regex.
  • Fixed error messages being double parsed.
v2.4.0
  • New media handlers to embed locally uploaded video and audio files.
    • Requires ffmpeg and ffprobe binaries to be installed.
    • Uses HTML5 <video> and <audio> tags.
  • Two new settings:
    • $wgFFmpegLocation - Set the location of the ffmpeg binary.
    • $wgFFprobeLocation - Set the location of the ffprobe binary.
v2.3.3
  • Support for JW Player.
v2.3.2
  • Fix auto resize breaking when leaving full screen.
v2.3.1
  • Fixed issue #54 (EmbedVideo doesn't work with mw-collapsible class)
  • Fixed issue #50 ("arg" should be "args" in addService)
  • Added "inline" alignment option
  • Fixed center alignment option css
  • Auto Resize now targets mobile as well
v2.3.0
  • Hard cut off of support for versions older then MediaWiki 1.25
  • Auto Resize attribute added
  • Reverted array_key_exists() regression to fix the `<embedvideo>` tag being broken.
v2.2.9
v2.2.8
v2.2.7
v2.2.6
  • NicoNico Video ID fixes; will work with new ID formats.
v2.2.5
v2.2.4
  • Fix Bing to work with their new URLs.
  • Remove MSN as their new video service does not support embedding.
  • Standardize Tudou support per their wiki.
v2.2.3
  • Added support for Youku and Tudou.
v2.2.2
  • Updated regular expression replacement pattern for Twitch URLs. Old Twitch embed URLs do not automatically redirect.
v2.2.1
v2.2.0
  • Fixed a bug with alignment that would cause the left align to not work similar to how MediaWiki handles images and other media.
  • New parser tag better suited for templates; #evt.
  • New HTML like tag format that can take parameters.
v2.1.0
  • The width parameter was changed to dimensions. See parameter documentation above.
  • New container parameter to use a standard MediaWiki thumb frame or default to a generic container.
  • The description parameter no longer forces the thumb frame to be used.
  • Added support for Archive.org, Blip.tv, CollegeHumor, Gfycat, Nico Nico Video, TED Talks, and Vine.
  • Ability to center align embeds.
  • CSS resource module.
v2.0
  • URLs from the player pages that contain the raw video ID can now be used as the ID parameter.
  • Validation of the raw IDs is improved.
  • Code base rewritten to have a VideoService class for future extensibility.
  • Switched to HTML5 iframes wherever possible for embeds.
  • All services overhauled to be up to date and working.
  • The 'auto' and 'center' alignment values were removed as they were not working. They are planned to be implement properly in the future.

Developer Notes

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}}

Reporting Bugs

There is an issue tracker set up on the Github project page.

Contributing

Bug reports, feature requests, and patches are always welcome. New contributors can be added to the Github project if there is sufficient interest.

Weblinks
Retrieved from "https://gameo.org/index.php?title=Help:Embed_Videos&oldid=156509"