3Speak is a relatively new video publishing platform in the Steem ecosystem. However, it was missing an official support in Steemit.com. This work is to allow support for the following requirements:
- Render an embedded player when you add a plain URL to a valid 3Speak video URL.
- Allow the use of a valid 3Speak iFrame player
- Replace 3Speak generated image HTML with their embedded player.
What's involved
What's usually involved in adding support for an embedded video player is a little bit tedious (read repetitive) and I'm planning to find a way to make this simpler in the future:
- update helmet directive to allow 3Speak domain names
- come up with regular expressions to detect 3Speak URL, video ID and HTML markup
- update the MarkdownViewer component to generate the embedded player code
- come up with a regular expression to inform the sanitizer whitelist 3Speak's specific iframe code
New logic for embedded players
A new logic was added for 3Speak: replacing their linked image with an embedded player. Up until now, there was only two ways of rendering an embedded player on Steemit.com:
- a URL in plain text
- an iframe HTML code
However, when a user upload a video on 3Speak, their system creates a blog post with a big image linking to the 3Speak page. The code looks something like this:
[](https://3speak.online/watch?v=wehmoen/xrhjxocx)
The thing is the HTMLReady tool only allows replacement of text nodes but the Mardown code above has already been replaced with its HTML equivalent, hence bypassing HTMLReady. So I had to preprocess the HTML before it gets passed to HTMLReady.
Vote for my witness
On Steem, Witnesses are playing the important role of providing a performant and safe network for all of us. You have the power to choose 30 trusty witnesses to package transactions and sign the blocks that will go in the Steem blockchain. Vote for me via SteemConnect to help me do more useful projects for the communities.