Help:Embedding Video files: Difference between revisions

    From BelieveTheSign
    (Started page)
     
    No edit summary
     
    (2 intermediate revisions by the same user not shown)
    Line 1: Line 1:
    This page will contain instructions on how to embed video files
     
     
    The EmbedVideo parser function expects to be called in any of the following ways:
     
    ====<code>#ev</code> - Classic parser tag====
    * <code><nowiki>{{#ev:service|id}}</nowiki></code>
    * <code><nowiki>{{#ev:service|id|dimensions}}</nowiki></code>
    * <code><nowiki>{{#ev:service|id|dimensions|alignment}}</nowiki></code>
    * <code><nowiki>{{#ev:service|id|dimensions|alignment|description}}</nowiki></code>
    * <code><nowiki>{{#ev:service|id|dimensions|alignment|description|container}}</nowiki></code>
    * <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>
     
    ====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.
     
    <pre><nowiki><embedvideo service="youtube">https://www.youtube.com/watch?v=pSsYTj9kCHE</embedvideo></nowiki></pre>
     
    Alternativly, you can also use the service id as the tag (assuming another extension isn't already using this tag).
     
    <pre><nowiki><youtube>https://www.youtube.com/watch?v=pSsYTj9kCHE</youtube></nowiki></pre>
     
    === Attributes for parser tags ===
     
    {| class="wikitable"
    |-
    ! Attribute
    ! Description
    |-
    | <code>service="<nowiki>(See Supported Services below.)</nowiki>"</code>
    | '''Required:''' yes
    :The video service to call.
    |-
    | <code>id="<nowiki>[id|url]</nowiki>"</code>
    | '''Required:''' yes
    :The raw ID of the video or URL from the player page.
    |-
    | <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.
    |-
    | <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.
    |-
    | <code>description="<nowiki>[wiki text]</nowiki>"</code>
    | '''Required:''' no, '''Default:''' <code>none</code>
    :Display a description under the embed container.
    |-
    | <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.
    |-
    | <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.
    |-
    | <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.
    |-
    | <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.
    |}
     
    === Examples ===
     
    [[File:EmbedVideoExample1.jpg|thumb|Example #1]]
     
    For example, a video from YouTube uses the 'youtube' service selector. You can specify either the raw ID:
    <pre>{{#ev:youtube|pSsYTj9kCHE}}</pre>
    Or specify the full URL:
    <pre>{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE}}</pre>
     
     
     
    [[File:EmbedVideoExample2.jpg|thumb|Example #2]]
     
     
     
     
     
     
    To display the same video as a right aligned large thumbnail with a description:
    <pre>{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|1000|right|Let eet GO|frame}}</pre>
     
    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.
    <pre>https://www.youtube.com/watch?v=pSsYTj9kCHE&start=76</pre>
    <pre>{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|||||start=76}}</pre>
     
    URL arguments can be used to chop up a video and loop it:
    <pre>https://www.youtube.com/watch?v=pSsYTj9kCHE&start=160&end=180&loop=1</pre>
    <pre>{{#ev:youtube|https://www.youtube.com/watch?v=pSsYTj9kCHE|||||start=160&end=180&loop=1}}</pre>
     
    == Supported services ==
     
    As of version 2.x, EmbedVideo supports embedding video content from the following services:
    {| class="wikitable"
    |-
    ! Site
    ! Service name(s)
    ! ID example
    ! URL example(s)
    ! Notes
    |-
    ! [https://archive.org/details/movies Archive.org Videos]
    | <code>archiveorg</code>
    | electricsheep-flock-244-80000-6
    | <nowiki>https://archive.org/embed/electricsheep-flock-244-80000-6</nowiki>
    |
    |-
    ! rowspan="2" | [http://bambuser.com/ Bambuser]
    | <code>bambuser</code>
    | rowspan="2" | 5262334
    | rowspan="2" | <nowiki>http://bambuser.com/v/5262334</nowiki>
    | Broadcasts
    |-
    | <code>bambuser_channel</code>
    | Channels
    |-
    ! [https://beam.pro/ Beam]
    | <code>beam</code>
    | RocketBear
    | <nowiki>https://beam.pro/RocketBear</nowiki>
    | Streams
    |-
    ! [http://www.bing.com/videos/ Bing]
    | <code>bing</code>
    | 31ncp9r7l
    | <nowiki>http://www.bing.com/videos/watch/video/adorable-cats-attempt-to-eat-invisible-tuna/31ncp9r7l</nowiki>
    |
    |-
    ! [http://www.blip.tv/ Blip.tv]
    | <code>blip</code>
    |
    | <nowiki>http://blip.tv/vinylrewind/review-6864612</nowiki>
    | Blip requires the full URL to the video page and does not accept the raw ID.
    |-
    ! [https://media.ccc.de/ C3TV]
    | <code>mediacccde</code>
    | 32c3-7305-quantum_cryptography
    | <nowiki>https://media.ccc.de/v/32c3-7305-quantum_cryptography</nowiki>
    |
    |-
    ! [http://www.collegehumor.com/ CollegeHumor]
    | <code>collegehumor</code>
    | 6875289
    | <nowiki>http://www.collegehumor.com/video/6875289/batman-says-his-goodbyes</nowiki>
    |
    |-
    ! [http://www.dailymotion.com/ Dailymotion]
    | <code>dailymotion</code>
    | x1adiiw_archer-waking-up-as-h-jon-benjamin_shortfilms
    | <nowiki>http://www.dailymotion.com/video/x1adiiw_archer-waking-up-as-h-jon-benjamin_shortfilms</nowiki>
    |
    |-
    ! [http://tvpot.daum.net/ Daum TVPot]
    | <code>tvpot</code> - Obtain the URL or ID from the share menu URL.
    | s9011HdLzYwpLwBodQzCHRB
    | <nowiki>http://tvpot.daum.net/v/s9011HdLzYwpLwBodQzCHRB</nowiki>
    |
    |-
    ! [http://www.divshare.com Div Share]
    | <code>divshare</code>
    |
    |
    |
    |-
    ! [http://edutopia.org Edutopia]
    |
    |
    |
    | Edutopia content moved to YouTube. Please use the YouTube service selector below.
    |-
    ! [http://www.funnyordie.com/ FunnyOrDie]
    | <code>funnyordie</code>
    | c61fb67ac9
    | <nowiki>http://www.funnyordie.com/videos/c61fb67ac9/to-catch-a-predator-elastic-heart-edition</nowiki>
    |
    |-
    ! [http://gfycat.com/ Gfycat]
    | <code>gfycat</code>
    | BruisedSilentAntarcticfurseal
    | <nowiki>http://www.gfycat.com/BruisedSilentAntarcticfurseal</nowiki>
    |
    |-
    ! [http://www.hitbox.tv/ Hitbox]
    | <code>hitbox</code>
    | Washuu
    | <nowiki>http://www.hitbox.tv/Washuu</nowiki>
    |
    |-
    ! [https://www.jwplayer.com/ JW Player]
    | <code>jwplayer</code>
    | cr5d8nbu-8ZpoNmmJ
    | <nowiki>https://content.jwplatform.com/players/cr5d8nbu-8ZpoNmmJ.html</nowiki>
    |
    |-
    ! [http://www.kickstarter.com/ Kickstarter]
    | <code>kickstarter</code>
    | elanlee/exploding-kittens
    | <nowiki>https://www.kickstarter.com/projects/elanlee/exploding-kittens</nowiki>
    |
    |-
    ! [http://www.metacafe.com/ Metacafe]
    | <code>metacafe</code>
    | 11404579
    | <nowiki>http://www.metacafe.com/watch/11404579/lan_party_far_cry_4/</nowiki>
    |
    |-
    ! [http://www.nicovideo.jp/ Nico Nico Video]
    | <code>nico</code>
    | sm24394325
    | <nowiki>http://www.nicovideo.jp/watch/sm24394325</nowiki>
    |
    |-
    ! [http://rutube.ru/ RuTube]
    | <code>rutube</code>
    | b698163ccb67498db74d50cb0f22e556
    | <nowiki>http://rutube.ru/video/b698163ccb67498db74d50cb0f22e556/</nowiki>
    |
    |-
    ! [http://soundcloud.com/ SoundCloud]
    | <code>soundcloud</code>
    |
    | <nowiki>https://soundcloud.com/skrillex/skrillex-rick-ross-purple-lamborghini</nowiki>
    | SoundCloud requires the full URL.
    |-
    ! [http://teachertube.com TeacherTube]
    | <code>teachertube</code>
    | 370511
    | <nowiki>http://www.teachertube.com/video/thats-a-noun-sing-along-hd-version-370511</nowiki>
    |
    |-
    ! [http://www.ted.com/talks/browse/ TED Talks]
    | <code>ted</code>
    | bruce_aylward_humanity_vs_ebola_the_winning_strategies_in_a_terrifying_war
    | <nowiki>http://www.ted.com/talks/bruce_aylward_humanity_vs_ebola_the_winning_strategies_in_a_terrifying_war</nowiki>
    |
    |-
    ! [https://tubitv.com Tubi TV]
    | <code>tubitv</code>
    | 318409
    | <nowiki>http://tubitv.com/video/318409</nowiki>
    |
    |-
    ! [http://www.tudou.com/ Tudou]
    | <code>tudou</code>
    | mfQXfumwiew
    | <nowiki>http://www.tudou.com/listplay/mfQXfumwiew.html</nowiki>
    |
    |-
    ! rowspan="2" | [http://www.twitch.tv Twitch]
    | <code>twitch</code>
    | rowspan="2" | twitchplayspokemon
    | rowspan="2" | <nowiki>http://www.twitch.tv/twitchplayspokemon</nowiki>
    | Live Streams
    |-
    | <code>twitchvod</code>
    | Archived Videos on Demand
    |-
    ! [http://89.160.51.62/recordme/spelain.htm Videomaten]
    | <code>videomaten</code>
    |
    |
    |
    |-
    ! [http://www.vimeo.com Vimeo]
    | <code>vimeo</code>
    | 105035718
    | <nowiki>http://vimeo.com/105035718</nowiki>
    |
    |-
    ! [http://vine.co Vine]
    | <code>vine</code>
    | h2B7WMtuX2t
    | <nowiki>https://vine.co/v/h2B7WMtuX2t</nowiki>
    |
    |-
    ! [http://screen.yahoo.com/ Yahoo Screen]
    | <code>yahoo</code>
    | katy-perry-dances-sharks-2015-024409668
    | <nowiki>https://screen.yahoo.com/videos-for-you/katy-perry-dances-sharks-2015-024409668.html</nowiki>
    |
    |-
    ! rowspan="3" | [http://www.youtube.com/ YouTube]
    | <code>youtube</code>
    | rowspan="3" | pSsYTj9kCHE
    | <nowiki>https://www.youtube.com/watch?v=pSsYTj9kCHE</nowiki>
    | Single videos
    |-
    | <code>youtubeplaylist</code>
    | <nowiki>https://www.youtube.com/watch?v=CW_PbErQ_c8&list=PL76E80C7F756A2047</nowiki>
    | Playlists
    |-
    | <code>youtubevideolist</code>
    | <nowiki>https://www.youtube.com/watch?v=CW_PbErQ_c8&playlist=CW_PbErQ_c8,CW_PbErQ_c8</nowiki>
    | Video list
    |-
    ! [http://www.youku.com/ Youku]
    | <code>youku</code>
    | XODc3NDgzMTY4
    | <nowiki>http://v.youku.com/v_show/id_XODc3NDgzMTY4.html</nowiki>
    |
    |-
    |}

    Latest revision as of 04:27, 12 March 2020


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

    Tag hook

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

    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) 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
    Beam beam RocketBear https://beam.pro/RocketBear Streams
    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
    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 https://soundcloud.com/skrillex/skrillex-rick-ross-purple-lamborghini SoundCloud requires the full URL.
    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
    Retrieved from "http:///index.php?title=Help:Embedding_Video_files&oldid=24384"