Difference between revisions of "Help:Embed Videos"

From GAMEO
Jump to navigation Jump to search
Line 1: Line 1:
 
__TOC__
 
__TOC__
−
plugin home: http://www.mediawiki.org/wiki/Extension:EmbedVideo
+
The '''EmbedVideo''' extension adds a parser function called <code>#ev</code> 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 <nowiki>[[File:Example.mp4]]</nowiki> file links into embedded HTML5 <nowiki><video></nowiki> and <nowiki><audio></nowiki> tags.
  
−
The EmbedVideo function will create a link to video/audio material on Youtube, Vimeo and a few other similar sites
+
;Project Homepage: [https://github.com/HydraWiki/mediawiki-embedvideo Documentation at Github]
 +
;Source Code: [https://github.com/HydraWiki/mediawiki-embedvideo Source code at Github]
 +
;Bugs:[https://github.com/HydraWiki/mediawiki-embedvideo/issues issues at Github]
 +
;Licensing: EmbedVideo is released under [http://www.opensource.org/licenses/mit-license.php The MIT License].
 +
 
 +
<span style="font-weight: bold; color: darkred;">Notice:</span> 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==
 +
 
 +
{{TNT|ExtensionInstall
 +
|registration=required
 +
|download-link=[https://github.com/HydraWiki/mediawiki-embedvideo/archive/v2.7.0.zip Download]
 +
|custom-steps=* [[#Configuration|Configure as required]]
 +
}}
 +
 
 +
==Usage==
 +
 
 +
=== Media Handler ===
 +
For locally uploaded content the process for displaying it on a page is the same as an image.  [https://www.mediawiki.org/wiki/Help:Images#Syntax 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.
 +
 
 +
<pre><nowiki>[[File:Example.mp4]]</nowiki></pre>
 +
 
 +
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.
 +
 
 +
<pre><nowiki>[[File:Example.mp4|start=2|end=6]]</nowiki></pre>
 +
 
 +
=== Tags ===
  
−
= Usage =
 
 
The EmbedVideo parser function expects to be called in any of the following ways:
 
The EmbedVideo parser function expects to be called in any of the following ways:
  
−
* <nowiki>{{#ev:service|id}}</nowiki>
+
====<code>#ev</code> - Classic Parser Tag====
−
* <nowiki>{{#ev:service|id|width}}</nowiki>
+
* <code><nowiki>{{#ev:service|id}}</nowiki></code>
−
* <nowiki>{{#ev:service|id|width|align}}</nowiki>
+
* <code><nowiki>{{#ev:service|id|dimensions}}</nowiki></code>
−
* <nowiki>{{#ev:service|id|width|align|desc}}</nowiki>
+
* <code><nowiki>{{#ev:service|id|dimensions|alignment}}</nowiki></code>
−
* <nowiki>{{#evp:service|id|desc}}</nowiki>
+
* <code><nowiki>{{#ev:service|id|dimensions|alignment|description}}</nowiki></code>
−
* <nowiki>{{#evp:service|id|desc|align}}</nowiki>
+
* <code><nowiki>{{#ev:service|id|dimensions|alignment|description|container}}</nowiki></code>
−
* <nowiki>{{#evp:service|id|desc|align|width}}</nowiki>
+
* <code><nowiki>{{#ev:service|id|dimensions|alignment|description|container|urlargs}}</nowiki></code>
 +
* <code><nowiki>{{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize}}</nowiki></code>
 +
* <code><nowiki>{{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}}</nowiki></code>
 +
 
 +
However, if needed optional arguments may be left blank by not putting anything between the pipes:
 +
* <code><nowiki>{{#ev:service|id|||description}}</nowiki></code>
 +
 
 +
====<code>#evt</code> - Parser Tag for Templates====
 +
The <nowiki>#evt</nowiki> parser tag allows for key=value pairs which allows for easier templating and readability.
 +
 
 +
<pre><nowiki>{{#evt:
 +
service=youtube
 +
|id=https://www.youtube.com/watch?v=pSsYTj9kCHE
 +
|alignment=right
 +
}}</nowiki></pre>
 +
 
 +
====<code>#evu</code> - Parser Tag for URLs====
 +
The <nowiki>#evu</nowiki> parser tag is like the <nowiki>#evt</nowiki> tag, but its first parameter is a URL that will be parsed to determine the service automatically.
 +
 
 +
<pre><nowiki>{{#evu:https://www.youtube.com/watch?v=pSsYTj9kCHE
 +
|alignment=right
 +
}}</nowiki></pre>
 +
 
 +
====<code><embedvideo></code> - Tag Hook====
 +
Videos can easily be embedded with the <nowiki><embedvideo></embedvideo></nowiki> tag hook.  The ID/URL goes as the input between the tags and parameters can be added as the tag arguments.
  
−
Where:
+
<pre><nowiki><embedvideo service="youtube">https://www.youtube.com/watch?v=pSsYTj9kCHE</embedvideo></nowiki></pre>
  
−
* service is the name of a video sharing service (See "service name" in the list below)
+
Alternativly, you can also use the service id as the tag (assuming another extension isn't already using this tag).
−
* id is the id of the video to include
 
−
* width (optional) is the width in pixels of the viewing area (height will be determined automatically)
 
−
* align (optional) is an alignment (float) attribute. May be "left" or "right".
 
−
* desc (optional) is a short description to display beneath the video when it is aligned
 
  
−
For example, to include the famous "evolution of dance" YouTube video, you'd enter:
+
<pre><nowiki><youtube>https://www.youtube.com/watch?v=pSsYTj9kCHE</youtube></nowiki></pre>
−
<pre>
 
−
<nowiki>{{#ev:youtube|dMH0bHeiRNg}}</nowiki>
 
−
</pre>
 
−
And if you wanted scaled down to thumbnail size, on the right with a short description, you could use:
 
−
<pre>
 
−
<nowiki>{{#ev:youtube|dMH0bHeiRNg|100|right|This is an embedded video!}}</nowiki>
 
−
</pre>
 
−
An example in GAMEO can be seen at [[Calvary Mennonite Church (Paden, Oklahoma, USA)]].
 
  
−
= Supported Services =
 
  
−
As of version 1.0, EmbedVideo supports embedding video content from the following services:
+
=== Attributes for Parser Tags ===
  
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
−
! Site !! Service Name
+
! Attribute
 +
! Description
 
|-
 
|-
−
| [http://www.dailymotion.com/ Dailymotion] || dailymotion
+
| <code>service="<nowiki>(See Supported Services below.)</nowiki>"</code>
 +
| '''Required:''' yes
 +
:The video service to call.
 
|-
 
|-
−
| [http://edutopia.org Edutopia] || edutopia
+
| <code>id="<nowiki>[id|url]</nowiki>"</code>
 +
| '''Required:''' yes
 +
:The raw ID of the video or URL from the player page.
 
|-
 
|-
−
| [http://www.funnyordie.com/ FunnyOrDie] || funnyordie
+
| <code>dimensions="<nowiki>[WIDTH|WIDTHxHEIGHT|xHEIGHT]</nowiki>"</code>
 +
| '''Required:''' no, '''Default:''' <code>640</code>
 +
:Dimensions in pixels to size the embed container.  The standard format is width x height where either can be omitted, but the <code>x</code> must proceed height to indicate it as the height.
 +
:Examples: <code>480</code>, <code>480x320</code>, <code>x320</code>.  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. <code>$wgEmbedVideoDefaultWidth</code> can be set in <code>LocalSettings.php</code> to override the default width.
 
|-
 
|-
−
| [http://video.google.com/ Google Video] || googlevideo
+
| <code>alignment="<nowiki>[left|center|right|inline]</nowiki>"</code>
 +
| '''Required:''' no, '''Default:''' <code>none</code>
 +
: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.
 
|-
 
|-
−
| [http://interia.pl/ Interia] || interia or interiavideo
+
| <code>description="<nowiki>[wiki text]</nowiki>"</code>
 +
| '''Required:''' no, '''Default:''' <code>none</code>
 +
:Display a description under the embed container.
 
|-
 
|-
−
| [http://www.myvideo.de/ sevenload] || sevenload
+
| <code>container="<nowiki>[frame]</nowiki>"</code>
 +
| '''Required:''' no, '''Default:''' <code>none</code>
 +
:Specifies the container type to use for the embed.
 +
::<code>frame</code>: Wrap the video player in a Mediawiki thumbnail box.
 
|-
 
|-
−
| [http://teachertube.com/ TeacherTube] || teachertube
+
| <code>urlargs="<nowiki>modestbranding=1&version=3</nowiki>"</code>
 +
| '''Required:''' no, '''Default:''' <code>none</code>
 +
:Allows extra URL arguments to be appended to the generated embed URL.  This is useful for obscure options only supported on one service.
 
|-
 
|-
−
| [https://www.youtube.com/ YouTube] || youtube and youtubehd
+
| <code>autoresize="<nowiki>false</nowiki>"</code>
 +
| '''Required:''' no, '''Default:''' <code>true</code>
 +
:Automatically resize videos when their size will cause them to break outside of their container element.
 
|-
 
|-
−
| [https://vimeo.com/ Vimeo] || vimeo
+
| <code>valignment="<nowiki>[top|middle|bottom|baseline]</nowiki>"</code>
 +
| '''Required:''' no, '''Default:''' <code>none</code>
 +
: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.
 
|}
 
|}

Revision as of 20:46, 1 February 2018

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.
Retrieved from "https://gameo.org/index.php?title=Help:Embed_Videos&oldid=156508"