Copy editing

Video

And now the geeky stuff

File formats:

Chances are you won’t have to worry too much about video formats, but knowing about them is not a bad thing.

First, most video on the web is in flash format, or .flv. The advantage to this type of video format is that just about all computers can play this kind of video.

But not all. Try watching a flash video on an iPhone or iPod and you’re out of luck.

Next, there’s mp4 and m4v. These are handy formats and are used a lot in video podcasting. Check out centennialondemand.com and see it in action.

The web is moving to a new set of standards collectively called HTML5. The new standards make it easy to include video on a site, but the file formats are different and can be a bit tricky.

Here’s what I mean, with help from Wikipedia:

HTML5 video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies, partially replacing the object element.

Adobe Flash Player is widely used to embed video on web sites such as YouTube, since many web browsers have Adobe’s Flash Player pre-installed (with exceptions such as the browsers on the Apple iPhone and iPad and on Android 2.1 or less). HTML5 video is intended by its creators to become the new standard way to show video online, but has been hampered by lack of agreement as to which video formats should be supported in the video tag.

<video> element example

The following HTML5 code fragment will embed a WebM video into a web page.

<video src="movie.webm" poster="movie.jpg" controls>
This is fallback text to display if the browser
does not support the video element.
</video>

And just what are the supported video formats?

• Ogg = Ogg files with Theora video codec and Vorbis audio codec
• MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
• WebM = WebM files with VP8 video codec and Vorbis audio codec

“So all that’s nice,” you’re thinking, “but what does that mean for me?”

Probably nothing, unless you one day find yourself as your news organization’s go-to guy or gal for video (and besides, it sounds good when you talk about this stuff in an interview).

Because of all these competing video formats, you may find yourself needing to convert from one file format to another. Well, you’re in luck. There are free bits of software out there that will do this sort of thing for you, and pretty well pain free:

• Miro Video Converter – for Mac and PC
• FLV Crunch for Mac

These are just a couple. Do a search on download.com and you’ll find lots more for Mac and PC.

But…

Stick with YouTube. When you upload a video to YouTube, it’ll automatically convert your video so it’s watchable on just about any device, including Apple contraptions.

YouTube videos are easy to embed in your news story. You’ve already experimented with embedding them in the Google Maps assignment.

But there’s more you can do than just simply embedding a video.

Say I want to embed a video next to this paragraph. I don’t want it to be as big as the videos up above and I want the text to wrap around it.

Here’s how:

Get the embed code, which looks something like this:

<object width="425" height="349">
<param name="movie" value="http://www.youtube.com/v/7iq5EZUT_Bg?fs=1&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/7iq5EZUT_Bg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed>
</object>

Next, wrap that in a <div>, like this:

<div>
<object width="425" height="349">
<param name="movie" value="http://www.youtube.com/v/7iq5EZUT_Bg?fs=1&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/7iq5EZUT_Bg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="349"></embed>
</object>
</div>

Now, in the opening <div>, we can play with style. To make it float to the right of the text, replace <div> with <div style=”float:right;”>.

Of course, changing right to left makes the video float on the left.

That’s it! Try it yourselves and see how things go.