Blob as HTML for iFrame

by Julien Etienne

HTML

<h1>
IFrame Below uses blob as content
</h1>
<iframe>

</iframe>

<p>
works in Chrome, Safari, Firefox. Used for <a href="http://webglfundamentals.org/webgl/lessons/webgl-animation.html" target="_blank">a Codepen like editor without needing a server</a>. PS: The link won't present editors in Edge because it can't work around this issue. It will display editors in Firefox/Chrome/Safari
</p>

JavaScript

var html = `

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/hls.js"></script>
  <script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/liblcevc_dpi.js"></script>
  <script type="text/javascript" src="https://d3mfda3gpj3dw1.cloudfront.net/LCEVC_HTML/dil.js/lcevc_dil.min.js"></script>
  <scrip>
  /* Copyright (c) V-Nova International Limited 2020. All rights reserved. */

// Initialisation.

const { Hls } = window;
if (!Hls) {
  throw new TypeError('Hls.js needs to be loaded before patch can be applied.');
}

const { LcevcDil } = window;
if (!LcevcDil) {
  throw new TypeError('LCEVC needs to be loaded before patch can be applied.');
}

let errorElement = null;

/**
 * V-Nova integration methods for HLS.js
 *
 * These are the functions in the video player that need to be modified so that
 * it passes the correct data to LCEVC and triggers the correct methods at the
 * correct time.
 */

// attachMedia connects the new HLS player to the V-Nova LCEVC player and passes
// the objects through.
Hls.prototype.attachLcevc = function hlsAttachLcevc(canvas, config) {
  this.canvas = canvas;
  this.lcevcDilConfig = config;
  this.videoCodec = '';
  this.displayError = false;

  // attachMedia connects the new HLS player to the V-Nova LCEVC player and
  // passes the objects to it.
  this.on(Hls.Events.MEDIA_ATTACHING, function mediaAttaching(_, data) {
    if (errorElement) {
      errorElement.remove();
      errorElement = null;
    }

    this.lcevcDil = new LcevcDil.LcevcDil(data.media, this.canvas, this.lcevcDilConfig);
  });

  // detachMedia removes the V-Nova LCEVC components from memory when the HLS
  // player loses the media.
  this.on(Hls.Events.MEDIA_DETACHING, function mediaDetaching() {
    if (this.lcevcDil) {
     ...