HTML5 Video plugin for CKEditor

You might have heard a lot of people talking about the new features of HTML5, and one that has brought a lot of interest is the <video> element that some people think that will avoid the use of Flash once and for all (at least Steve Jobs thinks so).

Personally I don't think that it will be so easy to dismiss a whole environment like Flash just because videos now can be played without external plugins, leaving aside the fight of h264 vs WebM (or as is now: Apple & MS vs the rest of the web), Flash has a lot of features that aren't easy to replace, the most basic one, the fact that you deploy a single swf file, vs having to provide several javascript and images just to perform anything basic with javascript. And as soon as you want to use some effects, you might end up with something huge and in fact as slow as the dreaded flash files.

But back to the topic, HTML5 video and CKEditor. What about that?

Ok, here we go, this is a plugin sponsored by DM Logic that makes using the <video> element as easy as an old <img>, you can insert, edit, use the context menu, etc... the dialog allows to specify the poster image, the dimensions (they are automatically adjusted according to the preview) and two source files, so that both the browsers that use the WebM format (Chrome, Firefox and Opera) and the ones that support only h264 (IE9 and Safari) can view your videos. Here's a short video showing how it works.

Download it here.


v.1.3 26/08/12: Fixed problems with IE9, wrap the video in a <div> to avoid the problems with <p>. It's compatible with both CKEditor 3 and CKEditor 4





Tijmen said...

Brilliant. I was looking for this, and this is the first real dedicated solution, nice.

Is there a chance the audio tag will get similar love?

Alfonso said...

I'm gonna have a busy days now, but the way to get new plugins is to find some sponsor or suggest something that interest me so much that I can't avoid coding it.

Martijn Lafeber said...

Very nice! I'm building a simpler version that only requires a url and width.
I can't get the video tag to be selectable by clicking on it. Is that also the reason you have the image as placeholder?

PS: the first mention of Safari should be Firefox I guess.

Alfonso said...

Thanks, yes, it's Firefox can play WebM but not Safari.

With regards to using directly, in my case I have a poster image field, so using that makes sense, and I think that even without it I would have use a placeholder to avoid bugs with that element inside the editing zone. I only tested it slightly as a "normal" element but I think that it was buggy and this is the best option to avoid problems.

With regards to your plugin, I think that it might be easier if you use the CKEditor API to modify my dialog on the fly hidding all the elements that you don't need. That way you have all the rest of the code working and if I release a new version with some improvements you can use it without having to write them again.

Connie said...

I wonder why you didn't include your demo-video with that plugin in the post itself, but used a link to Youtube?

Alfonso said...

I don't know why I used a link. Maybe I just liked it that way that day.

Is there something wrong with it?

Cornel said...

If you go to the "Source" view and go back to normal, the plugin will not work correctly anymore. The dialog displays incorrect values.

Alfonso said...

Sorry, but I don't see any problem by switching to source.

Can you provide more info about how to reproduce the problem and understand where should I look at to see it?

Cornel said...
This comment has been removed by the author.
Cornel said...

1. integrated html5 video plugin in a fresh downloaded ckeditor.
2. Opened ckeditor\_samples\fullpage.html
3. Click "Source"
4. Cleared sources and paste sample html5 code from http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all
5. Close "Source" view
6. Double click the added video

Actual Result:
The dialog does not display the video sources.
It seems that getElemetsByTagName("source") returns 0 items.

Cornel said...

Now I discovered that the problem reproduces only on IE. 9.0.8112 is my current version.

Alfonso said...

Before you stated that you had the problem with IE9 I added a demo to the post because it worked fine in Firefox and IE8.

Then I verified with IE9 and it also worked fine, but I trusted you so why it was working here?

And then I noticed that this blogger template is forcing IE in IE7 mode! wow man, I can't believe that Google isn't able to provide better templates. And then they say that we all must use Chrome, it isn't strange if they are forcing IE to use the old comatibility mode.

Ok, back to your problem: I have been able to reproduce it with IE9, I don't know why I didn't noticed it before or why anyone else has reported it.

I'm adding this to the pending tasks queue.

Cornel said...

When do you think ckeditor team will solve this issue? Thanks

Alfonso said...

CKEditor team?

I don't think that they might be interested at the moment on fixing problems with this plugin.

They are focused on the core, not on the bugs of plugins that anyone else creates. If they provide <video> support in CKEditor 4 their solution might be free of this issue, but I don't know if and when such thing would happen.

Bismark said...

One issue about this solution is how CKEditor forces a paragraph tag around the tag. You can see this issue when you add in the video element, select source, go back to WYSIWYG and then select the source button again. The video tag is now below the paragraph tag. Also, any div elements cannot be inside of a paragraph tag. It would be better if instead of a paragraph tag it was a "div" tag.

superfly said...

Does this work for drupal 7 with ckeditor 3.6.x? I installed it, but I can not get the icon to show on the toolbar. It also does not show up with a checkbox in the toolbar section under the ckeditor profiles. Any help is greatly appreciated.

superfly said...

I found this link CKEditor for Drupal 7 Plugins and it shows the plugin for video, but again mine is not showing up. Need help...

Alfonso said...

I don't have any experience with Drupal, so I don't know what's needed to use this plugin (or any other one) when CKEditor is installed inside Drupal.
I've looked at that page but I don't understand it. It seems that they might be using this plugin, but they don't haven't reported about any required change in the plugin.

You should ask about this in a forum dedicated to Drupal and it would be great if you come back to report whatever you find.

ThomasH said...

Hello Alfonso,

really good job!
But I run into the same IE 9.0 problem like 'cornel': When using IE 9.0 and switching to source view and back, the video dialog didn't show any video sources.
Do you have any short-term plans when do you gonna fixing this?

Alfonso said...

I guess that now it won't take too long, but I still have to finish other tasks before looking into this one.

Alfonso said...

Ok, I've worked today on it and I think that now IE9 shouldn't be a problem.
I've adjusted the code to fix also the issue mentioned by photomaster and now I wrap the video element in a div (let's hope that this doesn't break anything)

And for those eager to test new things, I've performed some basic adjustments and it seems to be mostly compatible with the beta of CKEditor 4, although I've noticed a new bug (http://dev.ckeditor.com/ticket/9218) and another one that affects both 3 and 4 (http://dev.ckeditor.com/ticket/9218)

Unknown said...

Hey Alfonso
Rally hope you have time to help!

When it comes to working with ckEditor it works perfect (a checkbox for autoplay would be neat though).
The final result (simplified):

I can see nothing wrong with the code, but why doesn't it work?

Is it an Error 10 (10 inches from the monitor)?

Alfonso said...

You have added only a mp4 file, so it can't work with Firefox or Opera.

IE9 and Chrome show the video frame but they don't tell why it fails, maybe you have used a wrong encoding or are sending some headers wrong.

Alfonso said...

It seems that CKSource is finally planning to create a core plugin about this feature, so don't expect any further development on this plugin.

If you provide a patch I can release a new version, but I won't spend my time improving it (unless someone is in a hurry so he can't wait and is willing to pay the development)

stalin said...

Hi how can i import this plugin into Ck editor.
In the installation manual i cant understand the these two steps.

3. Add it to your toolbar

In your toolbar configuration, add a new 'Video' item in the place where you want the button to show up.
4. Configure server browser for video

You can use the config.filebrowserVideoBrowseUrl entry to specify a url so the file browser shows just video elements (as long as your configure properly your file browser).

please help me to import this plugin into ck editor.