The concept of Jing is the always-ready program that instantly captures and shares images and video…from your computer to anywhere.

Video - Creating your own Share and Embed code

Posted on Friday January 18, 2008 by Anton Bollen

Hello! Remember the awesome tutorial on writing your own Share and Embed code that Matt Dyer created back in November? We now have a video tutorial that goes along with it; I'm hoping it will clarify some of the steps involved in creating your own Share and Embed code.

Enjoy the video - it runs just under 5 minutes:

This is my first Jing Blog post, but I'm sure there will be more. If you have any suggestions for additional Jing videos, just comment on this blog and I'll consider them when I make the next video. Thanks... and until next time.

TrackBack

TrackBack URL for this entry:
http://blog.techsmith.com/mt-tb.cgi/224

Comments (18)

Pierre :

I've got some comments/questions about the HTML shown in the example:
* why do you use mixed CASE in the embed tag?
* why don't you use "" around the size parameters?
* why don't you close the embed element?
* why do you only use embed and not both embed and object? (esp. since object is the preferred tag here)
The embed code generated for screencast.com looks fine.

A strange thing I noticed was that usually you can 'resize' an SWF by changing the size parameters, but it looks as if the SWF that Jing produces is hardcoded to the original size and changing the size in the embed tag means you won't see the full video anymore but just part of it.
This is an issue when you record a clip from the screen that is to wide to fit in a blog post.

Quote floater
Anton :

Hello,
First of all thank you for your feedback. Let me address the questions you brought up:

* why do you use mixed CASE in the embed tag?
I used mixed case in my embed tag to help that part of the tag stand out as I talk about it, and also to differentiate it from the "height" and "width" parameters. I also wanted to stay consistent with the article on the blog.

* why don't you use "" around the size parameters?
Hmm, that's a good question. I wasn't sure if I needed them, so I tried it without "" and it worked, so I simply went with it.

* why don't you close the embed element?
I left the embed element open because I was still going to add the height and width tags. If you watch the video again, you can see that I close the embed element at the very end. I have to admit that it's not very clear and that I probably should have closed the element first, and then inserted the height and width tags afterwards.

* why do you only use embed and not both embed and object? (esp. since object is the preferred tag here)
The embed code generated for screencast.com looks fine.

I tried to keep the embed code as simple as possible to demonstrate the feature. Since everybody has their own needs when it comes to embedding video, I didn't want to throw too many confusing elements in the mix. Chances are that most people using the "Create your own Embed Code" feature will create code using both embed and object, but again I tried to keep it simple for demonstration purposes.

* The resizing SWF issue you mentioned
Videos can't be resized by changing the parameters the way you can resize images. It's unfortunate, but that's just a limitation of videos. The videos therefore get cut off instead of scaled.


I hope all this made sense and clarified some things. I really appreciate your feedback - comments like that make you think about the way you present concepts and you can learn from it for future videos.

Quote floater
Emil :

Thank you for the nice video. :)

Quote floater
Pierre :

Hi Anton,

Thank you for taking the time to answer all my questions and respond to the comments.
I can understand you wanted it to be as simple as possible, but since it is a one time only action that a user has to do, I thought/think adding more valid HTML in the template is worth the effort.

About your latest comment, there I do disagree. I created an example page for you to explain better what I mean:
http://www.gorissen.info/Pierre/jing/video_resize.php

The first two examples are from YouTube. If I change the sizes in de the code, the SWF is resized. Granted, the control buttons are resized also, but for a blog post and not to huge changes (50% is used to show the difference more clearly) it is ok.

The second example is using a video created by Jing. There I need to use the exact sizes because otherwise the video is cropped.

So I understand that it is currently a limitation of the SWF created by Jing, but it is not a generic limitation of video or SWF.

Quote floater

Wow! This was super helpful. Keep these video captures and tips coming - what a product! Any chance of "player" skins or different look options planned in the future?

Quote floater
Millionder :

Super !!! Can't wait to get use to using Jing !

Quote floater
Gokalp :

To create this video tutorial did you use anything else other than Jing? Can all be done with Jing? I am particularly interested in annotations in the video.
Thanks, Gokalp

Quote floater
Anton :

Hi Gokalp!
Thanks for your feedback;
The video was recorded and edited with Camtasia Studio, one of the other screen recording tools that TechSmith makes.
Camtasia Studio is great for making more professional video tutorials because you have tons of editing, resizing and annotation options, which is why I like using it.
Video capture in Jing on the other hand doesn't have any editing options, but is much faster and easier to use, which is great for quickly conveying a concept or showing something.

I hope that makes sense, and thanks for using Jing!

Quote floater

Thanks, Pierre, for posting those videos and for getting an answer to the video resizing problem. I think this is a major limitation with Jing. The space in my blog posts is small, but the screens I want to capture are large. I like using Camtasia because you can set the height and width parameters and it works fine. I spent the last half hour trying to figure out what I was doing wrong with resizing the Jing videos on screencast.com.

I don't see why this isn't a simple fix. If the Camtasia videos resize, why can't the Jing videos resize?

Quote floater

Anton, here's what I don't get. The video you posted above shows the same output format as videos captured by Jing. The play button is white and large. It seems just like a Jing video.

But the video is resized from the original, so it's definitely not a Jing video. I'm wondering what output option you used with Camtasia to get the effect above. Is it Express Show, One Show, Legacy? None of these outputs looks like the video you posted above.

Thanks,

Tom

Quote floater
Anton :

Hey Tom -

The videos are hosted on screencast.com, which automatically adds the large white click-to-play arrow at the beginning of your video.
Jing videos are also hosted on screencast.com, which is why they look similar.

The format I used for my videos is Express Show, but the click-to-play feature should work with most other Flash formats (I tested One Show and FLV, and both worked).

So, the white arrow is a screencast.com related feature; and I don't think there is a way to get the same effect on your local hard drive or if the video is hosted on another page.

And to the resizing question: SWFs can not be scaled, so resizing a video would basically require us to reproduce the video at the smaller dimension. It would be difficult to provide that feature along with instantaneous encoding, so you wouldn't be able to upload and share your video right away but you would have to wait for it reproduce in the new dimensions. And that kind of defeats the idea of quick-n-easy capture.

Hope all that makes sense. And thanks for using Jing!

Quote floater
Anonymous :

incredible... can it be THAT easy? I'll try JING out and let you know SOON! Tschuess...
by the way... have you've been to my backyard? (Amsterdam), the overgrown picture of the bike was definitely taken there.

Quote floater
Anton :

Yes, Jing is really easy (at least that's what we aim for).
And wow, I'm amazed that you recognized the bike. I took that picture last summer near Vondelpark.
Hope you like Jing. Tschüss!

Quote floater

I totally agree with Pierre | January 25, 2008 5:08 AM. When I change the size of the player to fit my blog, for example, the video is cropped instead of changing with the player size. I need the video size to change with the size of the player. Has anyone figured out how to get around this huge limitation of Jing? I'm new here, so i may be missing the obvious or something already shared. Thanks for any help!

Quote floater

I have always had trouble with videos and a Blog that is using Wordpress and a template with a right side column and getting them to show up. Being that there isn't a real way it seems to make the videos smaller, how does one stop them from over-running the right column then?
Great video by the way, going to watch again to make sure I totally understand how to do it. Shine on!!

Quote floater
Ben :

Hi there,
Can you please tell me how to 'unmute'.
I want to record my screen and talk through what I am doing. My internal computer mic is on and the volume is up but jing tells me I am muted.
I am running a mac book! Can anyone please help.
Thank you
Ben

Quote floater

ijt Een plaatje zegt alles, toch ? try Het volledige rapport is hier te vinden. Lees natuurlijk c de blogposting. c v
Thanks for interesting post! ehx
купить ламинат 5j

Quote floater

I haven’ t even been blogging for a full year yet so I’ m not sure how practical my advice is but I try to always reply to every comment on my blog. It sometimes takes AGES if I have like 30 comments but I just feel that if someone has taken the time to read my blog and comment on it that the least I can do is reply. Also I recommend that you put heaps of your own photos on your blog. Daily outfits, DIY projects, shopping trips… I love to see photos from bloggers all around the world.

Quote floater

Post a comment


Currently Reading:
“Video - Creating your own Share and Embed code”

This page contains a single entry from The Jing Blog posted on January 18, 2008 3:02 PM.


Previous entry:
Jing and Flickr.

Next entry:
Jing for Mac - Version 1.4 Update 3.


All recent entries can be found on the main page or by looking through the archives.