Difference between revisions of "Embed"

From Reembodied Sound
Jump to: navigation, search
 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
==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>  
 
<pre>[[File:Hands-on.jpg|120px]]</pre>  
Line 5: Line 6:
 
[[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.  
 
For an uploaded file use the MediaWiki syntax within the Html5Mediaplayer tags.:<br>
 
For an uploaded file use the MediaWiki syntax within the Html5Mediaplayer tags.:<br>
Line 12: Line 14:
  
 
==Embedding from another source==
 
==Embedding from another source==
The Html5Media player can also stream media files hosted on other servers. For example:<br>
+
===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 [http://www.matthewgoodheart.com www.matthewgoodheart.com]:<br>
 
<pre><html5media>http://www.matthewgoodheart.com/music/zenitwasmeant.mp3</html5media></pre>
 
<pre><html5media>http://www.matthewgoodheart.com/music/zenitwasmeant.mp3</html5media></pre>
 
produces:<br>
 
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>
 
<html5media height="180" width="320" >https://www.youtube.com/watch?v=ovASq1-TfF0</html5media>
 
  
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>
+
===YouTube===
{{#widget:Vimeo|id=29978729|height=180|width=320}}<br>
+
This is a linked YouTube video. Note that you can use "height=" and "width=" to create the size player that you would like :<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
+
<pre><html5media height="180" width="320">https://www.youtube.com/watch?v=ovASq1-TfF0</html5media></pre>
 +
<html5media height="180" width="320">https://www.youtube.com/watch?v=ovASq1-TfF0</html5media>
 +
 
 +
===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.
 
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.
Line 36: Line 43:
  
 
===To embed a Sound Cloud file:===
 
===To embed a Sound Cloud file:===
* Be sure you have created the page you would like to embed your file on.
+
To embed a Sound cloud file, you need the url of the Sound Cloud player and your file. To do this:
* Go to Sound Cloud go to page of the Sound Cloud file you would like to embed.  
+
* 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. )
* Copy to the text to the page you would like to embed the file one.
+
* 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
 
<pre>{{#widget:Iframe
|url=http://docs.google.com/present/embed?id=dcn37mcz_22cmnwnwf8
+
|url= PASTE URL CODE HERE
 
|width=410
 
|width=410
 
|height=342
 
|height=342
Line 51: Line 61:
 
}}
 
}}
 
</pre>
 
</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.