johndyer

<p>Video and audio plugin for WordPress built on the MediaElement.js HTML5 media player library. Provides Flash or Silverlight fallback players for non-HTML5 browsers. Supports iPhone, iPad, and Andriod.<br />
Supports MP4, OGG, WebM, WMV, MP3, WAV, WMA files as well as captions with WebSRT files.</p>
<p>Check out <a href="http://mediaelementjs.com/" rel="nofollow ugc">mediaElementjs.com</a> for more information and examples.</p>
<h3>Typical Usage for video</h3>
<pre><code>[video src="http://mysite.com/mymedia.mp4" width="640" height="360"]
</code></pre>
<h3>Typical Usage for audio</h3>
<pre><code>[audio src="http://mysite.com/mymedia.mp3"]
</code></pre>
<h3>Shortcode Options</h3>
<h4>Alternatives</h4>
<p>If you have a plugin that conflicts with MediaElement.js, you can also use the short codes</p>
<pre><code>[mejsvideo src="http://mysite.com/mymedia.mp4" width="640" height="360"]
[mejsaudio src="http://mysite.com/mymedia.mp3"]
</code></pre>
<h4>src</h4>
<p>This location of any audio or video file</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4"]
</code></pre>
<p>You can also leave off the extention and MediaElement.js will look for all media files matching the filename (mymedia.mp4, mymedia.webm, etc.)</p>
<pre><code>[video src="http://mysite.com/mymedia"]
</code></pre>
<h4>type</h4>
<p>The media type of the resource</p>
<pre><code>[video src="http://mysite.com/mymedia?xyz" type="video/mp4"]
</code></pre>
<h4>mp4</h4>
<p>The location of the h.264/MP4 source for the video.</p>
<pre><code>[video mp4="http://mysite.com/mymedia.mp4"]
</code></pre>
<h4>mp3</h4>
<p>The location of an MP3 file for video</p>
<pre><code>[audio mp3="http://mysite.com/mymedia.mp3"]
</code></pre>
<h4>ogg</h4>
<p>The location of the Theora/Ogg source for the video.</p>
<pre><code>[video ogg="http://mysite.com/mymedia.ogg"]
</code></pre>
<h4>webm</h4>
<p>The location of the VP8/WebM source for the video.</p>
<pre><code>[video webm="http://mysite.com/mymedia.webm"]
</code></pre>
<h4>poster</h4>
<p>The location of the poster frame for the video.</p>
<pre><code>[video poster="http://mysite.com/mymedia.png"]
</code></pre>
<h4>width</h4>
<p>The width of the video</p>
<pre><code>[video width="640"]
</code></pre>
<h4>height</h4>
<p>The height of the video</p>
<pre><code>[video height="264"]
</code></pre>
<h4>loop</h4>
<p>Loops the video or audio when it ends</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" loop="true"]
</code></pre>
<h4>preload</h4>
<p>Start loading the video as soon as possible, before the user clicks play.</p>
<pre><code>[video preload="true"]
</code></pre>
<h4>autoplay</h4>
<p>Start playing the video as soon as it’s ready.</p>
<pre><code>[video autoplay="true"]
</code></pre>
<h4>fullscreen</h4>
<p>Disables the fullscreen button</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" fullscreen="false"]
</code></pre>
<h4>duration</h4>
<p>Disables the duration output</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" duration="false"]
</code></pre>
<h4>volume</h4>
<p>Disables the volume slider</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" volume="false"]
</code></pre>
<h4>progress</h4>
<p>Disables the progress bar</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" progress="false"]
</code></pre>
<h4>captions</h4>
<p>URL to a WebSRT captions file</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" captions="http://mysite.com/mymedia.srt"]
</code></pre>
<h4>Simple Video</h4>
<p>Basic playback options</p>
<pre><code>[video src="http://mysite.com/mymedia.mp4" width="640" height="360"]
</code></pre>
<h4>All Attributes Video</h4>
<p>All options enabled</p>
<pre><code>[video mp4="http://mysite.com/mymedia.mp4" ogg="http://mysite.com/mymedia.ogg" webm="http://mysite.com/mymedia.webm" poster="http://mysite.com/mymedia.png" preload="true" autoplay="true" width="640" height="264"]
</code></pre>
<h4>Simple Audio</h4>
<p>Basic playback options</p>
<pre><code>[audio src="http://mysite.com/mymedia.mp3"]
</code></pre>
<h4>All Attributes Audio</h4>
<p>All options enabled</p>
<pre><code>[audio mp3="http://mysite.com/mymedia.mp3" ogg="http://mysite.com/mymedia.ogg" preload="true" autoplay="true"]
</code></pre>
<h3>Use in a template</h3>
<p>You can use WordPress shortcodes in your templates using the do_shortcode function.</p>
<pre><code><?php echo do_shortcode('[video src="myvfile.mp4"]'); ?>
</code></pre>


MediaElement.js – HTML5 Video & Audio Player

MediaElement.js is an HTML5 video and audio player with Flash fallback and captions. Supports IE,…

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.

MediaElement.js – HTML5 Video & Audio Player vs External "Video for Everybody"