Tinymce and video

[lianergoist]

Hello

Is is possible to disable the video function in Tinymce editor? The problem is, it produce some code that doesn't work, and if I enter the code manually, it automatically correct it back to the way it think it should be.

The case is this: I want to offer both .ogv and .mp4 video. This code works, and is how I want it:

Code: Select all

<video width="530" height="398" autoplay="autoplay" preload="none" controls="controls">
  <source src="http://www.sejlgarnet.dk/sejl/video/mvi_0512.mp4">
  <source src="http://www.sejlgarnet.dk/sejl/video/mvi_0512.ogv" >
    <!-- code for old browsers here -->
</video>

But Tinymce change it to this code:

Code: Select all

<video width="530" height="398" src="http://www.sejlgarnet.dk/sejl/video/mvi_0512.mp4" autoplay="autoplay" preload="none" controls="controls">
  <source src="http://www.sejlgarnet.dk/sejl/video/mvi_0512.ogv" >
    <!-- code for old browsers here -->
</video>

And that doesn't work in Firefox (20.0), most likely because FF don't support .mp4.

So, what do I do?

[cmb]

Hi Thomas,

well, unfortunately tinyMCE's media plugin is indeed not working as expected (I've noticed the same issue a while ago). I'm not sure, if there's a good solution. You can deactivate the "media" plugin (in plugins/tinymce/inits/init_*.js remove it twice from "plugins" and one more time from "theme_advanced_buttons_3"), and add the <video> and <source> element including the allowed attributes to tinyMCE's list of valid_elements (also in plugins/tinymce/inits/init_*.js; put it at the beginning after the "{"):

Code: Select all

    valid_elements : "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|"
+ "onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|"
+ "onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|"
+ "name|href|target|title|class|onfocus|onblur],strong/b,em/i,strike,u,"
+ "#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|"
+ "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,"
+ "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|"
+ "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|"
+ "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,"
+ "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor"
+ "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,"
+ "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face"
+ "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],"
+ "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width"
+ "|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,"
+ "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|"
+ "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],"
+ "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],"
+ "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],"
+ "q[cite],samp,select[disabled|multiple|name|size],small,"
+ "textarea[cols|rows|disabled|name|readonly],tt,var,big,video[width|height|autoplay|controls|preload],source[src]",

But the result might not be desirable, as the video starts playing in the editor.

As alternative you might consider using Video_XH, which offers browser independent control elements and falls back to using the flash player[1] on browsers which don't recognize the <video> element (such as IE 8 and below).

Christoph

PS: [1] using the *.mp4 version of the video

PPS: Instead of "valid_elements" you can simply define "extended_valid_elements":

Code: Select all

    extended_valid_elements : "video[width|height|autoplay|controls|preload],source[src]",

[lianergoist]

Thank you very much for a very usefull answer. The Video_XH plugin seems to be the best solution for me. Thanks.