Shortcode in plain HTML (no server code)

Question

I'd like to include a small player (like this Dewplayer) often in a HTML page.

I would like to write something like:

[mp3player,file=test.mp3]

instead of having to write each time this long code (1):

<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=test.mp3" />
<param name="wmode" value="transparent" />
</object>

Is it possible to define a short-code [mp3player, file=...] that would be translated in the browser into the normal code (1), without server-side technology like PHP, etc. ?

Could the downvoters please add some remarks on how to improve the question itself? — Basj, Oct 06 '15 at 06:58
You could write a JavaScript function that would insert the ` — Dave, Oct 06 '15 at 07:00
no clue about the downvoters but one thing that raises a question: If you want no php code and none is included in the example why did you use the php tag? It honestly sounds more like plain html OR javascript what you want. — Thomas, Oct 06 '15 at 07:01
@IgnacioVazquez-Abrams I never heard about XSLT. After a few Google searches, it seems to be "a language for transforming XML documents into other XML document". Can this technology be embedded directly in a plain HTML page, to allow some transformations [shortcode] -> original code? If so, could you post a short answer showing how it works inside HTML? — Basj, Oct 06 '15 at 07:01
If using html5 is an option, maybe try this: http://www.w3schools.com/html/html5_audio.asp — David Constantine, Oct 06 '15 at 07:02
@Thomas you're 100% right, I don't know why I set php! Tag removed now! — Basj, Oct 06 '15 at 07:02
http://stackoverflow.com/questions/3466854/which-browser-can-show-xml-data-transformed-by-xslt — Ignacio Vazquez-Abrams, Oct 06 '15 at 07:03
@DavidConstantine: sounds pefect indeed. The only extra thing I need is to be able to set a beginning time. Is it possible with plain HTML5? Something like: ` — Basj, Oct 06 '15 at 07:03
Look here http://stackoverflow.com/questions/9563887/setting-html5-audio-position — David Constantine, Oct 06 '15 at 08:23

Fabrice NEYRET · Answer 1 · 2015-10-06T07:32:53.090

2

plain html doesnot have any "shortcut" mechanism.

But if you allow javascript, then you can define , then end your html with a small javascript inserting your favorite string as html content in all these div.

<html>
<head>
</head>
<body>

xxx
<div class="shortCut"></div>
xxx
<div class="shortCut"></div>
xxx
<div class="shortCut"></div>
xxx

</body>
<script>
  var divs = document.getElementsByClassName("shortCut");
  for (i=0; i< divs.length; i++ ) {
      divs[i].innerHTML = "full html content";
  }
</script>
</html>

edited Oct 06 '15 at 07:32

answered Oct 06 '15 at 07:15

Fabrice NEYRET

644
4
16

Thanks a lot @FabriceNEYRET! Do you think it would be possible to have `[shortcut]` instead of `
` ? Would this need to parse the HTML and modify itself? Possible with JS? – Basj Oct 06 '15 at 08:11
1

Before breaking the meta-syntax of XML itself, why not trying to conform to it ? doesn't a new tag , or better, be ok ? then you can parse and get it with all the usual html DOM functions. Otherwise, yes, you can recover the big ascii string of the page itself, parse it with string manipulations, etc. It would just be more complicated and ugly. ;-) – Fabrice NEYRET Oct 06 '15 at 08:26
True ;) But I was thinking about [Wordpress's shortcodes](https://codex.wordpress.org/Shortcode_API) like `[gallery id="123" size="medium"]` or [bbCode](https://fr.wikipedia.org/wiki/BBCode) which are super-handy. – Basj Oct 06 '15 at 08:42
man, here your are in html/xml langage. rules and syntax is different to bbcode langage, or C++ langage, or mathlab langage, or shellscript. that's how you characterise a language. But you can always design your own new langage (and the engine to run it). ;-) – Fabrice NEYRET Oct 06 '15 at 09:02

score 0 · Answer 2 · answered Oct 06 '15 at 07:43

There are plenty of helpers when it comes to creating custom components. While this is not yet a fully supported thing among browsers, I could give you some recommendations. First of all, you should start browsing WebComponents.org website. It will give you a lot of tips and information about this topic.

What library should you use?

It is a pretty complex and hard work to implement your own web components, so you should pick something among these:

Polymer (from Google) has just reached first production release.
AngularJS can also be helpful.
ReactJS created by Facebook

There three are the first the came to my mind, there are probably others, but I think these are the most popular.

Note

None of these can be used with plain HTML, you can't do many things in plain HTML, generally speaking. So you will have to use JavaScript for this purpose.

Shortcode in plain HTML (no server code)

2 Answers2