PascalBajorat

<p>This plugins adds possibility to place audio files into posts and pages using the oEmbed technology used by WordPress for other purposes (YouTube videos etc). Audio files are embeded using HTML5 audio tag, with Flash-based backup player for MP3 format for browsers that don’t support either HTML5 or MP3 format (Internet Explorer up to version 8.0, Firefox and Opera).</p>
<p>To put audio file into a post, simply enter the URL link to the audio file as separate paragraph. The plugin will convert it into the player on the page. See screenshots.</p>
<p>This is a special version of oEmbed HTML5 Audio: It is completely rewritten to support Cache Systems like WP Super Cache or W3 Total Cache and I’ve added some new Features.</p>
<h4>Key Features</h4>
<ul>
<li>oEmbed support for mp3, ogg and wav audio files</li>
<li>HTML5 Audio Shortcode (supports this functions: autoplay, loop, preload, controls and flash fallback)</li>
<li>Easy to use Shortcode-Generator</li>
<li>Compatible with Cache-Systems like WP Super Cache or W3 Total Cache</li>
<li>Flash Fallback</li>
</ul>
<h4>Auf der Suche nach einer deutschsprachigen Anleitung?</h4>
<p>Eine deutschsprachige Anleitung zu diesem Plugin ist auf meinem Blog zu finden:<br />
<a href="http://www.webdesign-podcast.de/2013/02/14/wordpress-und-html5-audio-support-plugin/" title="WordPress und HTML5 Audio Support – Plugin" rel="nofollow ugc">WordPress und HTML5 Audio Support – Plugin</a></p>
<h4>The new Shortcode:</h4>
<p>I’ve added a simple Shortcode to give you the full control of your HTML5 Audio:</p>
<pre><code>[audio id="your-css-id" class="pb-html5-audio-element" mp3="audio.mp3" ogg="audio.ogg" wav="audio.wav" autoplay="on" loop="on" preload="on" controls="on" flash_fallback="on" hidden="off"]
</code></pre>
<p>All Parameters are optional, but you need to specify at least one Audio Source: mp3, ogg or wav.</p>
<p>Defaults:</p>
<ul>
<li>id (optional, will be auto generated by the plugin if you not provide an ID)</li>
<li>class = pb-html5-audio-element</li>
<li>autoplay = off</li>
<li>loop = off</li>
<li>preload = on</li>
<li>controls = on</li>
<li>flash_fallback = on</li>
<li>hidden = off</li>
</ul>
<p>Please note: The Flash Fallback works only with mp3 files!</p>
<p>Since version 2.3 you can use the Generator below your Editor in Posts and Pages.</p>
<h4>Use the Shortcode in your Theme</h4>
<p>If you want to place an Audio-Tag Player in your Theme, you can use the Shortcode via PHP:</p>
<pre><code><?php
echo do_shortcode('[audio mp3="audio.mp3" ogg="audio.ogg" wav="audio.wav" autoplay="on" loop="on" preload="on" controls="on" flash_fallback="on" hidden="off"]');
?>
</code></pre>
<h4>Tested support in browsers:</h4>
<ul>
<li>Google Chrome 14: MP3, OGG, WAV – native HTML5</li>
<li>Firefox 6: OGG, WAV – native HTML5; MP3 – Flash-based backup player</li>
<li>Opera 11: OGG, WAV – native HTML5; MP3 – Flash-based backup player</li>
<li>Internet Explorer 8: MP3 – Flash-based backup player; OGG, WAV – not supported</li>
<li>Internet Explorer 9: MP3 – native HTML5; OGG, WAV – not supported</li>
<li>Safari: MP3 – Flash-based backup player; OGG, WAV – not supported</li>
</ul>
<p>A complete list which Browser supports which format you can find here: <a href="http://html5css3box.com/audio-tag-generator/" title="HTML5 CSS3 Box - HTML5 Audio-Tag" rel="nofollow ugc">HTML5 CSS3 Box – HTML5 Audio-Tag</a></p>
<p>If you have any questions or problems, you can ask me: <a href="https://www.pascal-bajorat.com/" title="Pascal Bajorat - Webdesigner / WordPress / WebDeveloper Berlin" rel="nofollow ugc">Pascal Bajorat – Webdesigner / WordPress / WebDeveloper</a></p>
<h4>Credits</h4>
<ul>
<li>Developer: Pascal Bajorat</li>
</ul>
<p>Translators:</p>
<ul>
<li>Spanish Translation by Andrew Kurtis – <a href="http://www.webhostinghub.com/" title="webhostinghub.com" rel="nofollow ugc">webhostinghub.com</a></li>
</ul>
<h3>Licence</h3>
<p>GNU General Public License v.3 – http://www.gnu.org/licenses/gpl-3.0.html</p>
<h4>HTML5 Audio Tag Shortcode:</h4>
<p>I’ve added a simple Shortcode to give you the full control of your HTML5 Audio:</p>
<pre><code>[audio id="your-css-id" class="pb-html5-audio-element" mp3="audio.mp3" ogg="audio.ogg" wav="audio.wav" autoplay="on" loop="on" preload="on" controls="on" flash_fallback="on" hidden="off"]
</code></pre>
<p>All Parameters are optional, but you need to specify at least one Audio Source: mp3, ogg or wav.</p>
<p>Defaults:</p>
<ul>
<li>id (optional, will be auto generated by the plugin if you not provide an ID)</li>
<li>class = pb-html5-audio-element</li>
<li>autoplay = off</li>
<li>loop = off</li>
<li>preload = on</li>
<li>controls = on</li>
<li>flash_fallback = on</li>
<li>hidden = off</li>
</ul>
<p>Since version 2.3 you can use the Generator below your Editor in Posts and Pages.</p>
<h4>Use the Shortcode in your Theme</h4>
<p>If you want to place an Audio-Tag Player in your Theme, you can use the Shortcode via PHP:</p>
<pre><code><?php
echo do_shortcode('[audio mp3="audio.mp3" ogg="audio.ogg" wav="audio.wav" autoplay="on" loop="on" preload="on" controls="on" flash_fallback="on" hidden="off"]');
?>
</code></pre>
<h4>oEmbed HTML5 Audio</h4>
<p>This plugins adds possibility to place audio files into posts and pages using the oEmbed technology used by WordPress for other purposes (YouTube videos etc). Audio files are embeded using HTML5 audio tag, with Flash-based backup player for MP3 format for browsers that don’t support either HTML5 or MP3 format (Internet Explorer up to version 8.0, Firefox and Opera).</p>
<p>To put audio file into a post, simply enter the URL link to the audio file as separate paragraph. The plugin will convert it into the player on the page. See screenshots.</p>


PB oEmbed HTML5 Audio – with Cache Support

This plugin converts URLs to audio files (MP3, OGG, WAV) into HTML5 audio with Flash-based player backup + Cache-System support and Shortcode.

kwiliarty

<p><strong>Important: This plugin is designed to operate on media files hosted<br />
outside your WordPress site. It does not integrate with the Media library,<br />
and it does not create the media files.</strong></p>
<p><em>External “Video for Everybody”</em> is a WordPress plugin that you can use to show<br />
videos on your WordPress site. You enter a simple shortcode on your page, and<br />
the plugin generates the HTML to deliver the media. Browsers that understand<br />
the HTML5 tag will display MPEG/H.264 (.mp4) files, VP8/webm (.webm), or Ogg/Theora (.ogv) files. Other browsers can use Flash to play the .mp4. In all cases, the<br />
markup includes links to download the media files. The HTML comes with<br />
only minor variations straight from the <a href="http://camendesign.com/code/video_for_everybody" rel="nofollow ugc">Video for<br />
Everybody</a> model. See that site for fuller details.</p>
<p>Users can optionally use the<br />
<a href="http://videojs.com" rel="nofollow ugc">VideoJS</a> JavaScript library to outfit their videos<br />
with an attractive set of controls that includes a full screen option.</p>
<p>This plugin is not for everybody, even if the video tries to be. If I were not<br />
writing my own plugin, I would probably be using the <a href="http://soukie.net/degradable-html5-audio-and-video-plugin/" rel="nofollow ugc">Degradable HTML5 audio<br />
and video Plugin</a> by Pavel Soukenik. My plugin uses and will follow the <a href="http://camendesign.com/code/video_for_everybody" rel="nofollow ugc">Video for<br />
Everybody</a><br />
approach. I also offer an options page where you can define site-wide default paths and dimensions. The defaults can be overridden in any particular shortcode, but if most of your video resides in the same place and has consistent dimensions, site-wide defaults keep the shortcodes simple. Soukenik’s<br />
shortcodes give you more control over playback options.</p>
<p><strong>Important:</strong> Most autobuffering problems have been settled, but<br />
preloading (autobuffering) preferences are supported unevenly in some<br />
older browers and versions of browsers. Depending on how many movies you<br />
serve on a single page, and on how large they are, autobuffering can<br />
significantly slow your clients’ browsers, and it can also hit your bandwidth.</p>
<p>For a discussion of autobuffering in html5 see:<br />
http://daringfireball.net/2009/12/html5_video_unusable</p>
<h3>Usage</h3>
<p>A minimal shortcode takes the form</p>
<blockquote>
<p><code>[external-vfe name="VIDEO"]</code></p>
</blockquote>
<p>where <em>VIDEO</em> stands for the simple name of your video (without any file<br />
extension).</p>
<p><em>name</em> is the only required attribute. Optional attributes are:</p>
<ul>
<li>width (in pixels)</li>
<li>height (in pixels)</li>
<li>path (URL to the folder where you host your video files)</li>
<li>query (to follow the file name in the URL; should start with “?”)</li>
<li>include_poster (set to “true” to include a poster attribute in the video tag)</li>
<li>webm_download (include a link to a webm file in the list of downloads)</li>
<li>poster_extension (png, jpg, or gif)</li>
<li>swf_file (The address to your Flash player)</li>
<li>vjs (set to “true” to provide attractive video controls with full screen option)</li>
<li>file_detector (try to detect remote files if “true”)</li>
<li>access_cookie (if you need a simple cookie to access the remote files)</li>
</ul>
<p>All of the above can also be set as defaults on the options page under:<br />
Media > External VfE</p>
<p>The options page also includes two parameters that cannot be overridden for<br />
an individual video:</p>
<ul>
<li>the ability to disable VideoJS so that the JavaScript and the style sheet will not load at all </li>
<li>the option to disable the built-in style sheet</li>
</ul>
<p>See the plugin home page for more details:<br />
http://open.pages.kevinwiliarty.com/external-video-for-everybody/</p>


External "Video for Everybody"

Delivers ogg/theora (and optional webm) html5 video from an external storage location with fallbacks to flash, and links for download.

PB oEmbed HTML5 Audio – with Cache Support vs External "Video for Everybody"