Tag Archives: video

WordPress 3.6 to Have Audio/Video Support in Core

Apr 10, 2013 by Matt | Posted in WordPress One Comment

Here’s some great news from the WordPress development blog: WordPress 3.6 is going to have built-in support for audio/video playback. You will be able to upload a media file, and WordPress will handle playback with the MediaElement.js. Shortcodes will be available, as well as template tags for theming support.

…there is now native support for Audio and Video in core! There has been great support for embeds by way of WP_Embed and oEmbed providers for a while, but, if you wanted to play an MP3 from your Media Library, you had to install a plugin. Supporting audio and video in core gives bands, podcasters, vloggers, et al the ability to easily and beautifully expresses themselves through sounds and moving pictures without using an external service.

This should go nicely with the coming changes to Post Formats—unless the plans have change, a UI based on the one by Crowd Favorite is going to be a part of the WordPress core, hopefully making post formats actually useful. (I’ve been using the Crowd Favorite plugin on my personal blog for awhile now, and it’s great.)

Another part I find interesting is the addition of embed handlers for common media files. You will be able to paste an URL to an AAC/MP3/etc. into a post and it will be seamlessly replaced by a media player, just like how oEmbed works.

Audio / Video support in Core [Make WordPress]

Syncing Content With HTML5 Video or Audio

Apr 11, 2011 by Matt | Posted in Coding No Comments

This is one of the coolest Smashing Magazine articles I have seen in awhile: Syncing Content With HTML5 Video.

Using the generic HTLM5 video and audio elements and a bit of JavaScript, the timeupdate event in particular, you can synchronize script events to the media playback. The timeupdate event returns the media’s timecode, which you can then use to fire off DOM changes.

<script>
(function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = v.currentTime;
    },false);
  })();
</script>

There are so many applications where this could be useful. You could supply show notes synchronized to a podcast, for instance, or additional information to supplement a video tutorial.

Syncing Content With HTML5 Video [Smashing Magazine]

MediaElement.js WordPress Plugin

Dec 3, 2010 by Matt | Posted in WordPress No Comments

MediaElement.js is a nifty jQuery plugin that allows you to use the HTML5 video and audio elements while still supplying a Flash or Silverlight backup for compatibility.

There’s now a convenient MediaElement.js WordPress plugin that gives you easy-to-use shortcodes for use in the post editor. To embed a video when you have the plugin installed, all you have to do is put this in your post:

[video src="http://example.org/video.mp4" width="640" height="480"]

The MPEG 4 video will be served-up to supporting browsers, and others get the Flash backup. Supported formats also include WebM, MP3 and Ogg Theora. Multiple formats can be specified in one shortcode, if you have encoded multiple versions. You can serve Safari and Mobile Safari an MP4 version, Firefox an Ogg Theora, and Chrome the little-supported WebM.

MediaElement.js — HTML5 Video Player With Flash Backup

Aug 2, 2010 by Matt | Posted in Coding No Comments

Many modern web browsers have early support for the <video> and <audio> elements in the HTML5 spec. Unfortunately, their implementation varies depending on the ideals of the various browser developers. Safari expects video to be encoded in the high-quality H.264 codec, other browsers prefer Ogg Theora. Google is trying to push their own freely-licensed VP8 codec, which Mozilla is showing signs of adopting. Then there’s Internet Explorer, which doesn’t support the <video> element at all.

Thankfully, there’s a way to fairly easily support everything. You can offer HTML5 video in one or more formats and fall back on Silverlight or Flash if necessary.

MediaElement.js allows you to do that with a little bit of jQuery voodoo. After including all of the required files, you can serve-up an H.264 video for Safari and iPhone/iPad users like so:

<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>
<script>
jQuery(document).ready(function($) {
$('video').mediaelementplayer();
});
</script>

There is also a way to specify more than one video type in the <video> element, if you have re-encoded it into more than one codec:

<video width="640" height="360">
<source src="myfile.mp4" type="video/mp4" >
<source src="myfile.ogg" type="video/ogg" >
<source src="myfile.webm" type="video/webm" >
</video>

You will want to check it out if you’re interested in cross-browser compatible web video.

Camtasia for Mac

Aug 27, 2009 by Matt | Posted in Software & Scripts 4 Comments

TechSmith has finally released a Mac screencasting application. Camtasia for Mac is not a port of the popular Camtasia Studio software, but an entirely new application that has many of the same features, but has its fair share of differences.

Camtasia for Mac

From the feature set, it seems like its placing itself as a competitor to ScreenFlow. The interface looks good, and the SmartFocus feature sounds intriguing.

The software sells for $99 from Camtasia at the present, though it will increase to $149 after December 31.

WordPress.tv

Jan 23, 2009 by Matt | Posted in WordPress No Comments

Automattic’s latest site, WordPress.tv is quite interesting. The site, described as “Your Visual Resource for All Things WordPress,” is an attempt at putting together a central place to find quality WordPress-related videos.

So far it’s mainly short beginner-oriented tutorials and clips from WordCamp, though it will eventually have all the videos they can round-up. Judging by what they’ve done so far, they will be adding existing videos from around the web, by using Vimeo/YouTube/etc embed code snippets, in addition to their own clips.

On the design end, it looks pretty good; it’s kind of a combination of the WordPress.org design and Hulu, with a dash of YouTube. The videos are sized nicely, plenty of information to the right, and threaded Gravatar-equipped comments underneath. It’s very clean, and (big surprise) it’s all powered by WordPress.

The site looks promising. I will definitely be checking in now and again to see how it turns out.