1

Topic: Audio, Video, Track and Source tags

Hello dr. Patnaik,
We have been using HtmLawed for three years already.
And now we need to allow our users to post HTML5 audio, video (and source, for sure, since it provides audio and video of different types).
So could you add these, please please please? Or at least point me the place in the (non-object) code where I have to make changes?
We are completely satisfied with HtmLawed, it's implemented in all of our forms but this is a challenge for us.
Thanks a lot!

2 (edited by patnaik 2013-03-23 18:35:14)

Re: Audio, Video, Track and Source tags

*** Note added in 2016 – htmLawed version with HTML5 support is now available. Do NOT use or go by the information below ***

I have been delaying the release of the new htmLawed with HTML5 support as I am not getting enough time to thoroughly test it. Anyway, hopefully soon...

For your case, below are the instructions to modify htmLawed (version 1.1.14) to add support for the new HTML5 audio/video tags (namely, 'audio', 'video', 'source' and 'track'). I have also uploaded an htmLawed.php file with these modifications; you can get it here [link removed] (rename the file and extension as appropriate). I have not tested these modifications but they should work. Let me know if there is an issue.

//// - htmLawed modified for support for audio, video, source and track elements

//// ---- Usage note: (1) The $spec argument to htmLawed() must be specified with rules for the new 'audio,' 'video,' 'source' and 'track' elements to allow attributes within. Below are two examples of a $spec value that will allow use of all attributes of the new elements. Note that one could have other rules (separated by semi-colons [;]) for other elements in $spec. See htmLawed documentation for $spec for more. Rules are not required for permitting use of universal attributes like 'id' and 'class.' (2) Any new-in-HTML5 on* type of attribute in these new elements will still get filtered out.

//// ---- $spec = 'audio = src, preload, autoplay, mediagroup, loop, muted, controls; video = src, poster, preload, autoplay, mediagroup, loop, muted, controls, width, height; source = src, type, media; track = kind, src, srclang, label, default'; // all standards-permitted attributes are allowed in the elements

//// ---- $spec = 'audio = src, preload, autoplay, mediagroup, loop, muted, controls; video = src, poster, preload, autoplay, mediagroup, loop, muted, controls, width, height, -style; source = src, type, media; track = kind, src, srclang, label, default'; // all standards-permitted attributes are allowed in the elements except for 'style' in 'video'

//// ---- code modifications

// --- in function htmLawed()

// file line# 20: add to the list of elements 'audio', 'video', 'source', 'track' so that

$e = array('a'=>1, ... , 'audio'=>1, 'video'=>1, 'source'=>1, 'track'=>1);

// file line# 23: add 'audio' and 'video' to the list to have

unset($e['applet'], $e['canvas'], $e['embed'], $e['iframe'], $e['object'], $e['script'], $e['audio'], $e['video']);

// -- function hl_bal()

// file line# 147: add 'source', 'track' to the list of empty elements
$cE = array('area'=>1, ... , 'source'=>1, 'track'=>1);

// file line# 148: add 'audio', 'video' to the list of flow-type elements
$cF = array('button'=>1, ... , 'audio'=>1, 'video'=>1);

// file line# 155: add 'audio, 'video' to the list of parent-child specifications
$cO = array('address' ... , 'audio'=>array('source'=>1, 'track'=>1), 'video'=>array('source'=>1, 'track'=>1));

// file line# 159: add 'audio, 'video' to the list of inline elements
$eI = array('#pcdata'=>1, ... , 'audio'=>1, 'video'=>1);

// file line# 161: add 'source', 'track' to the list of elements
$eO = array('area'=>1, ... , 'source'=>1, 'track'=>1);

// --- function hl_tag()

// file line# 431: add 'source', 'track' to the list of empty elements
static $eE = array('area'=>1, ... , 'source', 'track');

// --- function hl_tidy()

// file line# 656: add 'audio, 'video' to the list of elements
$c = array('caption'=>1, ... , 'audio'=>1, 'video'=>1);

3

Re: Audio, Video, Track and Source tags

Thanks a lot!

What it doesn't allow is the src attribute. I've used both notations.

<video src="http://oire.p.ht/videos/0004_x264.mp4" controls="true">
If you see this, your browser doesn't support HTML5 video.
</video>

and

<video controls="true">
<source src="http://oire.p.ht/videos/0004_x264.mp4">
If you see this, your browser doesn't support HTML5 video.
</video>

What I get on output is my tag but with src truncated in all notations. I have "...;video=*,-style" in my HTML_SPEC constant which is not an array obviously.

I had to use controls="true" since it didn't allow me using just controls (bool attribute without value). Could this be also fixed, please?

Thanks for help in advance and excuse my disturbing you.

4 (edited by patnaik 2013-03-23 19:16:17)

Re: Audio, Video, Track and Source tags

Thanks for the feedback.

I tested the PHP file for the modified htmLawed that I had put up for you on 20 March. The modified htmLawed did allow controls (no attribute value), controls='true' and controls='controls' in 'audio' and 'video' elements. That is, I did not see the issue with 'controls' that you report.

I also did not see the truncation of 'src' value that you mention. I used the HTML snippets that you posted in my testing.

Nevertheless, I have edited my first post to alter the suggestions for code modification. With the edited modifications, a value must be specified for the $spec argument (the third argument) of htmLawed to allow the use of various attributes of the new elements. Previously, the effect of having such a $spec value was hard-coded in the htmLawed logic. I think the new way is better.

Please give the new file a try (download using the link mentioned in my first post). Note that you will have to specify $spec (HTML_SPEC) using a value like the one shown below.

$config = '...';

$spec = '...; audio = src, preload, autoplay, mediagroup, loop, muted, controls; video = src, poster, preload, autoplay, mediagroup, loop, muted, controls, width, height, -style; source = src, type, media; track = kind, src, srclang, label, default'; // all standards-permitted attributes are allowed in the elements except for 'style' in 'video'

$out = htmLawed($in, $config, $spec);

ps. I edited your second post to have the http: in the HTML snippets. I find it strange that the forum did not allow you to use it; I was after all able to put it in the snippets.

5

Re: Audio, Video, Track and Source tags

Thanks a lot! Now it seems to work.
However it still adds "" to the controls, so it becomes:

<video controls="">

instead of

<video controls>

Any ideas, please?
Thanks!

6 (edited by patnaik 2013-03-23 19:51:03)

Re: Audio, Video, Track and Source tags

htmLawed will always make sure that  attribute name-value pairs are in name="value" format even if a value is empty.

Does controls="" affect the rendering? I would think that the effect will be the same as seen with just controls. See http://www.w3.org/wiki/HTML/Elements/video#HTML_Attributes.

If you really want empty attributes to stay empty, modify line 620 of the modified htmLawed file to have in the line

foreach($a as $k=>$v){if(strlen($v)){$aA .= " {$k}=\"{$v}\"";}else{$aA .= " {$k}";}}

ps. I suspect you could not put the http: in the HTML snippets in your earlier post because of the forum's anti-spamming logic. I have changed it so this does not become something routinely faced by genuine forum users.