Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured:

$ tree
.
├── asciinema
│   └── demo.cast
├── css
│   └── asciinema-player.css
├── index.html
├── js
│   └── asciinema-player.js
└── makefile

Here is the content of my html file, following the instructions found here:

$ cat index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/asciinema-player.css" />
</head>
<body>
ABCDE
<asciinema-player src="/asciinema/demo.cast"></asciinema-player>
<script src="/js/asciinema-player.js"></script>
</body>
</html>

After dragging and dropping this file into Mozilla, only "ABCDE" is displayed. Any idea why?

javascripthtmlcssasciinema

Answer №1

The issue at hand arises from attempting to execute a script utilizing XMLHttpRequest within a local HTML file in your browser. Upon checking the browser console, an error will be displayed as it struggles to locate files within all src/href tags. To address this, removing the initial / from each src/href tag would allow the player to load; however, this would lead to CORS issues when the script accesses your cast file.

An effective solution involves employing an HTTP server to host your cast files. This enables direct referencing using their complete server path, such as 

http://localhost:3000/asciinema/demo.cast
. Alternatively, you can utilize an external URL for the cast file, provided that the external site has CORS disabled. For instance:

<asciinema-player src="https://asciinema.org/a/28307.cast"></asciinema-player>

The choice of HTTP server is up to you, as there are numerous user-friendly servers available across various programming languages. Consider tools like http-server for Node/JavaScript enthusiasts or simplehttpserver for those familiar with Python. Opt for the option you find most comfortable.

Another "solution" could involve disabling CORS in your browser. However, this approach poses security risks and is merely a temporary workaround.

In essence, loading local cast files within local HTML files is impeded by CORS restrictions. The recommended course of action is hosting your casts on either a local or external HTTP server.

Answer №2

If you prefer to keep everything local on your computer, there's a workaround available. You can embed the asciicast file into an HTML page by encoding it into a Base64 string and inlining it into the src attribute.

To do this, convert the demo.cast file using the command base64 -w 0 demo.cast. You'll then need to capture the output somehow and paste it into the HTML file. This can be done by saving it to a text file or appending it directly at the end of the HTML file before adjusting the rest of the HTML code accordingly.

Next, include the asciinema-player line in this format:

<asciinema-player src="data:application/json;base64,BASE_64_ENCODED_STRING_HERE" />

For example:

<asciinema-player src="data:application/json;base64,eyJ2ZXJzaW9uIjogMiwgIndpZHRoIjogMTQwL" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Encountering issue with jQuery $.ajax DELETE not triggering then() function

I have implemented some code within a Chrome extension that effectively utilizes the then() method from the xhr response when using $.ajax. if (request && request.action === "updateTask") { $.ajax({ type: "PUT", url: config.upda ...

javascriptjqueryajax

Reloading a webpage does not clear HTML tables containing jQuery interactions in Firefox

Apologies if this question has already been asked. I incorporated hide/unhide features using jQuery into a simple HTML table. The table functioned correctly in Chrome 24.0.1312.52 m and IE8+. Yet, upon refreshing the page in Firefox 15.0.1, the pr ...

jqueryhtmlfirefox

Injecting services differently in specific scenarios in AngularJS

I have a unique angular service called $superService that I utilize across many of my directives and controllers. However, there is one specific directive where I want to implement the following behavior: If another directive utilizes $superService in its ...

javascripthtmlangularjsdependency-injection

Creating a sticky section with Tailwind CSS utility classes

I have a page in my Next.js web app, and I want to make the section highlighted in blue (wrapped in <aside> tag) sticky so that it stays in place while scrolling, with only the main section containing the chart scrolling. The code snippet below is f ...

cssnext.jstailwind-css

What steps can I take to address a 500 internal server error when attempting to execute a Python script within a CGI file?

Looking to execute a python script on a Strato-hosted website (.nl) using a CGI file. The setup includes my code: a cgi file, python file, and dependencies file for adding something to the PATH. Check out the files here. Here's what the folders look ...

pythonhtmlflaskcgicgi-bin

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

javascripthtmlcss

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...

javascriptjqueryhtmlcssresponsive-design

Issues with Angular preventing app from launching successfully

So I've been working on a Cordova app with AngularJS and everything seems to be running smoothly in Chrome and other browsers. However, when I try to install the apk on Android, AngularJS doesn't seem to execute the index.html upon launch. What& ...

javascriptandroidangularjscordovaphonegap

Adding a JavaScript variable into a Django template tag

This particular situation has been presenting a challenge for me. So far, I have been using query parameters instead of a variable within the {% url %} tag. However, I can't help but wonder if there is a way to achieve this: I am interested in includ ...

javascriptjquerydjangodjango-templates

Is there a correct way to accomplish this task? How could I go about achieving it?

Currently, I am delving into the world of react. While following along with some video tutorials, I encountered a roadblock in the request.js file. The issue popped up during the build process ./src/Row.js Line 16:45: 'fetchUrl' is not define ...

javascriptreactjsecmascript-6

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

Is it possible to trigger a bootstrap modal-dialog without specifying an ID or class using JQuery or JavaScript?

Is there a way to work with Bootstrap modal-dialog without setting an id or class, perhaps using JQuery or JavaScript instead? <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr ...

javascriptjquerytwitter-bootstrapmodal-dialogbootstrap-modal

The browser has surpassed the maximum call stack size while trying to refresh with socket.io, causing an error

I've encountered an issue with my Node js server crashing whenever I refresh the browser. The websocket connection works fine initially, but upon refreshing, the server crashes with the following error: E:\Back\node_modules\socket.io-pa ...

javascriptnode.jsexpresssocket.io

How to pass arguments to the `find` method in MongoDB collections

I've been attempting to pass arguments from a function to the MongoDB collection find method. Here's what I have so far: async find() { try { return await db.collection('users').find.apply(null, arguments); } catch(err) { c ...

javascriptnode.jsmongodbarguments

Is the memory efficiency of Object.keys().forEach() in JavaScript lower compared to a basic for...in loop?

Picture a scenario where you have an extremely large JS object filled with millions of key/value pairs, and your task is to loop through each of them. Check out this jsPerf example that demonstrates the different techniques for accomplishing this, highlig ...

javascriptloopsobjectecmascript-5

How to align multiple span elements vertically using HTML and CSS

<div class="row history"> <div class="col col-50 histroy1"> <span class="my-orders">Statistics</span> <span class="my-orders-numbers">27</span> </div> <div class="col col-50 histroy ...

htmlcss

Custom styles for PrimeNG data tables

Struggling to style the header of a datatable in my Angular project using PrimeNG components. Despite trying various solutions, I am unable to override the existing styles. Even attempting to implement the solution from this PrimeNG CSS styling question o ...

cssangulardatatableprimeng

center items alignment with hidden tags

I'm currently facing an issue with the CSS property display: flex, align-items: center Here is a snippet of my HTML and CSS files: * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; } .na ...

htmlcss

Using Regular Expressions in Javascript

I have gone through numerous posts with this title, but so far, none of them have addressed my specific query... My requirement is to utilize regex in the following format: "/^ user provided input $/i". The user can include the special regex character * e ...

javascriptregex

Connecting to particular sections on other pages

My website setup includes a page titled "news.html" that contains an iframe with fixed size. The iframe is linked to "innernews.html", which is the actual content to be displayed. I structured it this way for consistent page sizing, as the iframe prevents ...

html