I found myself wanting to add a nice looking video player to this site while at the same time not breaking the strict Content Security Policy and while directly embedding the <video> HTML tags on the markdown works, it made updating all the posts with videos a boring and error prone process so I wrote a simple JavaScript program that can be embedded in few lines, and that if updates needed to be made, changing the script would change all the instances.

simple-media.js

This script can be embedded in Markdown by adding a small piece of HTML.

<p>
<script src="simple-video.js?type=video&poster=pic.jpg&source=file.mp4"></script>
</p>

On this example, a video player for file file.mp4 with a poster picture pic.jpg will be inserted on the paragraph <p>[...]</p> block surrounding the script. All the script arguments can be set using the request parameters by adding ?param=value&param=value&param=value... on the script URL.

The player arguments may be passed on a sometimes cleaner way, especially when multiple sources are added, by using hidden <input> tags like this:

<p>
  <input type="hidden" name="type" value="video">
  <input type="hidden" name="poster" value="pic.jpg">
  <input type="hidden" name="source" value="file.webm">
  <input type="hidden" name="source" value="file.mp4">
  <input type="hidden" name="source" value="file.ogv">
  <script src="simple-video.js"></script>
</p>

Arguments

Name Description
type It selects the player type; Allowed values are: video audio youtube. if missing, video is presumed
poster For video players, the URL of a picture to be used as a preview; Example: nin.png
source The URL of a media file, can be used multiple times for multiple source options; Example: toiou.mp4
source If type is set to youtube source can only be used once and it contains the YouTube video ID; Example: TVrlbMrEcCY

Download

Get the script as is being used on this site clicking here

A working example

<p>
  <input type="hidden" name="type" value="video">
  <input type="hidden" name="poster" value="/pics/2018-07-05-a-zero-ram-bootloader/noramboot_v1.2_nyan.jpg">
  <input type="hidden" name="source" value="/pics/2018-07-05-a-zero-ram-bootloader/noramboot_v1.2_nyan.webm">
  <input type="hidden" name="source" value="/pics/2018-07-05-a-zero-ram-bootloader/noramboot_v1.2_nyan.mp4">
  <script src="/static/simple-media/simple-media.js"></script>
</p>

YouTube

June 21 update.
Setting the type attribute to youtube and providing a YouTube video ID on the source argument allows the embedding of YouTube videos.

A working example

<p>
  <input type="hidden" name="type" value="youtube">
  <input type="hidden" name="source" value="HpTq9fVa094">
  <script src="/static/simple-media/simple-media.js"></script>
</p>