Video | Kevin Chisholm

Apr152015 by dcmNo Comments

Telestream ScreenFlow – Fast and Easy Screen Capture for Mac

If you are in the business of making screencasts or training videos, consider Telestream ScreenFlow, an affordable product that is easy to use and comes with a decent array of features

I’m sure it’s pretty obvious that I like to blabber endlessly about front-end web development, especially JavaScript. Recently, I have tried to ratchet-up my JavaScript ramblings a level by adding videos to my blog posts. When planning this, I knew I would have to eventually choose a screen capture software package that would make high-quality screen casts easy (I have a very short attention span when it comes to some things).

I fumbled around a bit with Snagit and Quicktime. I even took a shot at Corel VideoStudio Pro. That was a bit of a disaster (tons and tons of features, but at the end of the day, exporting to MP4 seems to be yet a pipe-dream). I had heard a bit about Telestream ScreenFlow, so I thought I’d give it a shot.

After reading tons of reviews, I plunked-down $99 and downloaded the software. I’ll spare you the feature-by-feature rundown, and get right to the most important point: It’s simple, easy to use, and easy to export videos. That alone for me sealed the deal.

I will say that the ScreenFlow is quirky for sure, a sentiment that many reviews will echo. The good news is that you only need a few minutes with Google search in order to find the answer to most of your questions. Capturing your screen in one shot and then exporting to MP4, is very easy. When you want to edit your video, however, you will probably find yourself scratching your head a bit as tasks that seem to me fairly common, are buried in an odd workflow.

Summary

I’ve been using Screenflow for a few months now and could not be happier. Once you get used to it, things move pretty quickly. They also sell a few add-ons which enable you to take things to the next level with regard to professional-looking screencasts or training videos. In short, if you are looking for a screen-capture software package for your Mac, and have fairly simple production needs, I highly recommend Screenflow from Telestream.

Helpful Links for Telestream ScreenFlow

http://www.telestream.net/screenflow/

http://www.telestream.net/screenflow/overview.htm

http://www.telestream.net/telestream-support/screen-flow/support.htm

http://www.telestream.net/screenflow/stories.htm

Reviews

http://www.macworld.com/article/2039696/review-screenflow-4-a-great-but-quirky-video-capture-and-edit-tool.html

http://www.maclife.com/article/reviews/screenflow_4_review

http://mac.appstorm.net/reviews/video/screenflow-4-professional-screencasting-on-your-mac/

Oct192014 by dcmNo Comments

Video – Back-End vs Front-End Web Programming Languages

Videos

The main difference between a back-end and a front-end web programming language is where the code is executed. In this video, I demonstrate how a back-end programming language is executed on the server, whereas a front-end web programming language is executed in the browser.

Read the Full Post: What is the difference between a back end and a front end web programming language?

Back-End Programming Languages

While there are certainly a number of back-end web programming languages, for this video I use PHP. I demonstrate who the server escapes the opening / closing PHP tags and executes whatever code is inside of them. I’ll also show you how the client can send a message to the web server in order to dynamically alter the HTML that is served.

Front-End Programming Languages

The list here is pretty short: JavaScript. Every modern web browser understands JavaScript. In this video I demonstrate how JavaScript is executed on the client-side (i.e. in the browser). I show you how JavaScript code is delivered from the server, but executed on the client. I’l also show you how to run arbitrary JavaScript code in the client using The FireFox plugin: FireBug.

Jan172012 by dcmNo Comments

Super Easy HTML Video Support with LongTail Video’s JW Player and JavaScript

JavaScript

This video player makes it simple to present video in your HTML page, and configure a wide array of options

While the new HTML5 video element brings much promise to the concept of full native browser support, it can still be a bit of an effort to provide cross-browser consistency. LongTail Video’s JW Player offers a way to implement some fall-back support and very cool customization. This little puppy does a great job of auto-detecting which method of playback is supported by the user’s device, and presents accordingly. There is support for both Flash and HTML5, skinning, plugins and a very robust API. At the bottom of this post are a few links that will more than get you started. I’ll simply highlight how easy it is to get JW Player up-and-running in your web page.

Example # 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JW Player Example</title>
       <script language="javascript"  src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jwplayer.js"></script>
    </head>
	<script id="demo" type="text/javascript">
		$(document).ready(function() {
			jwplayer("foo").setup({
				flashplayer: "player.swf",
				file: "video-1.mp4",
				height: 270,
				width: 480
			});
		});
	</script>
    <body>
		<div id="foo"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JW Player Example</title>

</head>

$(document).ready(function() {

jwplayer("foo").setup({

flashplayer: "player.swf",

file: "video-1.mp4",

height: 270,

width: 480

});

</script>

<body>

</body>

</html>

In example # 1, just to demonstrate that the most current version of JW Player works with a two-year-old version of jQuery, we pull in jQuery 1.4, and what would be a local copy of the jwplayer.js. With that done, we simply call the jwplayer() method, passing in the ID of the element within which we’d like the video player to run, and chain the return value to the JW Player .setup() method. We pass a configuration object to that method, and away we go! The only two requirements here are the jwplayer.js file and the player.swf file.

Example # 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JW Player Example</title>
       <script language="javascript"  src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="jwplayer.js"></script>
    </head>
	<script id="demo" type="text/javascript">
		$(document).ready(function() {
			jwplayer("foo").setup({
				flashplayer: "player.swf",
				file: "video-1.mp4",
				height: 270,
				width: 480,
				events: {
					onReady: function() { this.play(); }
				}
			});
		});
	</script>
    <body>
		<div id="foo"></div>
		<div id="showMe">Show Video</div>
		<div id="removeMe">Remove Video</div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>JW Player Example</title>

</head>

$(document).ready(function() {

jwplayer("foo").setup({

flashplayer: "player.swf",

file: "video-1.mp4",

height: 270,

width: 480,

events: {

onReady: function() { this.play(); }

}

});

</script>

<body>

<div id="showMe">Show Video</div>

<div id="removeMe">Remove Video</div>

</body>

</html>

In example # 2, we added an “events” property to the configuration object, and to that property, we added an onReady method, which starts the video once the player is ready.

Example # 3

$("#removeMe").click(function(){
	jwplayer("foo").remove();
});

$("#removeMe").click(function(){

jwplayer("foo").remove();

});

In example # 3 there is a code snippet that demonstrates the ability to remove a video from the page. JW Player takes care of all the DOM cleanup, including removing any bound events. You can add the video back in real-time by simply running the original function that appeared in the document.ready() method.

Summary

There is plenty (and I do mean plenty) to sink your teeth into here. I’ve only scratched the surface of the surface. If you are looking for a plugin that makes video support easy and offers tons of options, JW Player is a serious contender. Non-commercial use requires no payment and the commercial licence is very reasonable.

Helpful links forJW Player

http://www.longtailvideo.com/players/

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference

http://wordpress.org/extend/plugins/jw-player-plugin-for-wordpress/