Difference between revisions of "Embed"

From Reembodied Sound Wiki
Jump to: navigation, search
 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
Use "edit" to see the code.
 
 
 
==Uploaded Files==
 
==Uploaded Files==
 +
===pictures===
 
Pictures can be embedded using the standard MediaWiki syntax:<br>
 
Pictures can be embedded using the standard MediaWiki syntax:<br>
 +
<pre>[[File:Hands-on.jpg|120px]]</pre>
 +
embeds the picture:<br>
 
[[File:Hands-on.jpg|120px]]
 
[[File:Hands-on.jpg|120px]]
  
 +
===media files===
 
Most media files can use Html5Media player.  
 
Most media files can use Html5Media player.  
This is an uploaded mp3 file.<br>
+
For an uploaded file use the MediaWiki syntax within the Html5Mediaplayer tags.:<br>
<html5media>File:Gigue-Leonarda.mp3</html5media>
+
<pre><html5media>File:Gigue-Leonarda.mp3</html5media></pre>
 
+
<html5media>File:Gigue-Leonarda.mp3</html5media><br>
However, it is recommended that longer media files (such as work examples) be embedded from other sources.
+
However, it is recommended that large media files (such as work examples) be embedded from other sources.
  
 
==Embedding from another source==
 
==Embedding from another source==
The Html5Media player can also stream media files hosted on other servers.
+
===audio files===
This mp3 file is streamed from www.matthewgoodheart.com:<br>
+
The Html5Media player can also stream media files hosted on other servers by using the url of the file. For example, this file is hosted on [http://www.matthewgoodheart.com www.matthewgoodheart.com]:<br>
 +
<pre><html5media>http://www.matthewgoodheart.com/music/zenitwasmeant.mp3</html5media></pre>
 +
produces:<br>
 
<html5media>http://www.matthewgoodheart.com/music/zenitwasmeant.mp3</html5media>
 
<html5media>http://www.matthewgoodheart.com/music/zenitwasmeant.mp3</html5media>
  
  
This is a linked YouTube video :<br>
+
===YouTube===
<html5media height="180" width="320" >https://www.youtube.com/watch?v=ovASq1-TfF0</html5media>
+
This is a linked YouTube video. Note that you can use "height=" and "width=" to create the size player that you would like :<br>
 
+
<pre><html5media height="180" width="320">https://www.youtube.com/watch?v=ovASq1-TfF0</html5media></pre>
For Vimeo videos, use a widget (the id # is the number at the end of the video page url: e.g. https://vimeo.com/29978729 <= id number<br>
+
<html5media height="180" width="320">https://www.youtube.com/watch?v=ovASq1-TfF0</html5media>
{{#widget:Vimeo|id=29978729|height=180|width=320}}<br>
 
the id # is the number at the end of the video page url: e.g. for https://vimeo.com/29978729  the id# is 29978729
 
 
 
If you do not have a vimeo page, contact the administrator, and we may be able to upload it to the [https://vimeo.com/channels/231961 Evolving Door Music vimeo channel]
 
  
 +
===Vimeo===
 +
For Vimeo videos, use a [[WidgetInfo|widget]]. For this, you will need the id# of the Vimeo video you would like to embed. The id # is the number at the end of the video page url: e.g. https://vimeo.com/29978729 <= id number is is 29978729<br>
 +
<pre>{{#widget:Vimeo|id=29978729|height=180|width=320}}</pre><br>
 +
{{#widget:Vimeo|id=29978729|height=180|width=320}}
  
 +
If you do not have a Vimeo or YouTube account, [mailto:Admin@evolvingdoormusic.net contact the administrator], and we may be able to upload it to the Evolving Door Music [https://vimeo.com/channels/231961 Vimeo] or [https://www.youtube.com/user/evolvingdoormusic YouTube] channel.
  
 +
==Sound Cloud files==
 
Sound Cloud files can be embedded using the Iframe widget.
 
Sound Cloud files can be embedded using the Iframe widget.
  
Line 37: Line 43:
  
 
===To embed a Sound Cloud file:===
 
===To embed a Sound Cloud file:===
* Go to Sound Cloud go to page of the Sound Cloud file you would like to embed.  
+
To embed a Sound cloud file, you need the url of the Sound Cloud player and your file. To do this:
 +
* Go to the page of the Sound Cloud file you would like to embed.  
 
* Click on the "share" button.  
 
* Click on the "share" button.  
 
* Click on "Embed."
 
* Click on "Embed."
* Copy the text that appears in the box below "Code and preview." (Do NOT check the "WordPress Code" box. )
+
* Copy the text that appears in the box below "Code and preview." (Do '''NOT''' check the "WordPress Code" box. )
 +
* Paste the copied text to the wiki page you would like to embed your file on.
 +
* The pasted text will look something like this: <pre><iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/250492118&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe></pre>
 +
* You only need the part of the code that points to the url of the player and the url of the file. Delete the first part of the code: <pre><iframe width="100%" height="450" scrolling="no" frameborder="no" src="</pre>. Be sure you have included the quotation marks. Also delete the last part of the code after "true" (including the quotation marks): <pre>"></iframe></pre>
 +
* Your code should now look something like this: <pre>https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/250492118&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true</pre>(Note that this is a very long, single string of text - if it wraps at the '''?''', it is simply so it fits on the page - there is no break in the text.)
 +
* This is the code that needs to be pasted into '''url''' parameter in the Iframe widget.
 +
 
 +
<pre>{{#widget:Iframe
 +
|url= PASTE URL CODE HERE
 +
|width=410
 +
|height=342
 +
|border=0
 +
}}
 +
</pre>
 +
 
 +
Example:
 +
<pre>{{#widget:Iframe
 +
|url='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/250492118&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true
 +
|width=410
 +
|height=342
 +
|border=0
 +
}}</pre>
 +
 
 +
Note that, using '''height''' and '''width''' you can adjust the size of your player.

Latest revision as of 21:37, 22 March 2016

Uploaded Files

pictures

Pictures can be embedded using the standard MediaWiki syntax:

[[File:Hands-on.jpg|120px]]

embeds the picture:
Hands-on.jpg

media files

Most media files can use Html5Media player. For an uploaded file use the MediaWiki syntax within the Html5Mediaplayer tags.:

<html5media>File:Gigue-Leonarda.mp3</html5media>

<html5media>File:Gigue-Leonarda.mp3</html5media>
However, it is recommended that large media files (such as work examples) be embedded from other sources.

Embedding from another source

audio files

The Html5Media player can also stream media files hosted on other servers by using the url of the file. For example, this file is hosted on www.matthewgoodheart.com:

<html5media>http://www.matthewgoodheart.com/music/zenitwasmeant.mp3</html5media>

produces:
<html5media>http://www.matthewgoodheart.com/music/zenitwasmeant.mp3</html5media>


YouTube

This is a linked YouTube video. Note that you can use "height=" and "width=" to create the size player that you would like :

<html5media height="180" width="320">https://www.youtube.com/watch?v=ovASq1-TfF0</html5media>

<html5media height="180" width="320">https://www.youtube.com/watch?v=ovASq1-TfF0</html5media>

Vimeo

For Vimeo videos, use a widget. For this, you will need the id# of the Vimeo video you would like to embed. The id # is the number at the end of the video page url: e.g. https://vimeo.com/29978729 <= id number is is 29978729

{{#widget:Vimeo|id=29978729|height=180|width=320}}


{{#widget:Vimeo|id=29978729|height=180|width=320}}

If you do not have a Vimeo or YouTube account, contact the administrator, and we may be able to upload it to the Evolving Door Music Vimeo or YouTube channel.

Sound Cloud files

Sound Cloud files can be embedded using the Iframe widget.

{{#widget:Iframe |url=https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/250492118&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true |width=810 |height=100 }}

To embed a Sound Cloud file:

To embed a Sound cloud file, you need the url of the Sound Cloud player and your file. To do this:

  • Go to the page of the Sound Cloud file you would like to embed.
  • Click on the "share" button.
  • Click on "Embed."
  • Copy the text that appears in the box below "Code and preview." (Do NOT check the "WordPress Code" box. )
  • Paste the copied text to the wiki page you would like to embed your file on.
  • The pasted text will look something like this:
    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/250492118&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
  • You only need the part of the code that points to the url of the player and the url of the file. Delete the first part of the code:
    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="
    . Be sure you have included the quotation marks. Also delete the last part of the code after "true" (including the quotation marks):
    "></iframe>
  • Your code should now look something like this:
    https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/250492118&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true
    (Note that this is a very long, single string of text - if it wraps at the ?, it is simply so it fits on the page - there is no break in the text.)
  • This is the code that needs to be pasted into url parameter in the Iframe widget.
{{#widget:Iframe
|url= PASTE URL CODE HERE
|width=410
|height=342
|border=0
}}

Example:

{{#widget:Iframe
|url='https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/250492118&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true
|width=410
|height=342
|border=0
}}

Note that, using height and width you can adjust the size of your player.