Asciinema-player 日志回放

大萌子monze
2,162 阅读3分钟

Asciinema-player 日志回放功能：可将终端录制会话记录在网站上播放。

一、介绍

asciinema 项目由三部分组成：

  • asciinema，命令行工具，用于记录终端操作

  • asciinema.org，网站管理和分享记录作品

  • javascript 播放器

asciinema 命令行工具用于录制终端操作 .cast 文件

asciinema player 是一个用 javascript 和 Rust/WASM 编写的开源终端会话播放器，可播放 .cast 录制文件。

**注意：**asciinema player 不能播放重量级的视频文件（.mp4，.webm等等）

特征：

  • 复制粘贴终端内容的能力 - 毕竟它只是一个文本！，
  • 超流畅，定时准确的播放，
  • 自动字体缩放以最有效的方式适应容器元素，
  • 空闲时间优化以跳过较长时间的不活动，
  • 预定义和自定义字体大小，
  • 基于 NPT 或自定义文本海报，
  • 可调播放速度，
  • 循环播放，无限或有限，
  • 在特定时间开始播放，
  • 键盘快捷键，
  • 标准 16 色的多种配色方案，
  • 完全支持 256 调色板和 24 位真彩色 (ISO-8613-3)，
  • 全屏模式。

二、安装使用

安装 asciinema 命令行工具，目前支持Linux，macOS 和 *BSD，不支持 Windows

1. 安装

# macOS 安装
# 1.Homebrew
brew install asciinema

# 2.MacPorts
sudo port selfupdate && sudo port install asciinema

# 3.Nix
nix-env -i asciinema

# pip 安装
sudo pip3 install asciinema

# Linux 安装
# 1.Arch Linux
pacman -S asciinema

# 2.Debian
sudo apt-get install asciinema

# 3.Ubuntu
sudo apt-add-repository ppa:zanchey/asciinema
sudo apt-get update
sudo apt-get install asciinema

更多安装方法，请移步其他方式

2. 基本命令

2.1 开始录制
$ asciinema rec [fileName]  # 记录终端会话

asciinema记录命令，文件名参数是可选的。当输入文件名时，退出录制时将保存记录文件至本地；

否则，退出录制时会提醒选择上传至asciinema.org或保存至本地。

$ asciinema rec demo.cast
# asciinema: recording asciicast to demo.cast
# asciinema: press <ctrl-d> or type "exit" when you're done
2.2 退出录制
$ exit
# asciinema: recording finished
# asciinema: asciicast saved to demo.cast
2.3 播放录制
$ asciinema play [fileName]  # 播放录制文件

重放已经记录的操作。

# 重放本地文件：
$ asciinema play demo.cast

# 重放远程文件：
$ asciinema play https://asciinema.org/a/28307

3. 使用

如何在自己的网页上使用 asciinema player

3.1 前提准备

假设已有以下任一方式获得终端会话记录文件：

  • 将终端会话记录到本地文件asciinema rec demo.cast，
  • 通过附加.cast到 asciicast 页面 URL（例如：https ://asciinema.org/a/28307.cast）从 asciinema.org 下载现有录音。

从发布页下载最新版本播放器，只需要asciinema-player.js和asciinema-player.css文件。

3.2 在HTML 页面中使用播放器

将asciinema-player.js, asciinema-player.css 和 .cast带有录音的文件添加到代码文件中。

在HTML页面中使用 <asciinema-player> 标签

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="asset/asciinema-player.css" />
</head>

<body>
  <asciinema-player src="asset/28307.cast"></asciinema-player>
  <asciinema-player src="asset/335480.cast"></asciinema-player>
  <asciinema-player src="asset/325730.cast"></asciinema-player>
  <script src="asset/asciinema-player.js"></script>
</body>

</html>

<asciinema-player> 属性

名称功能默认值备注
cols播放器列宽80建议将其设置为与 asciicast 文件中相同的值，以防止播放器在加载时将自身从 80x24 调整为 asciicast 的实际尺寸。
rows播放器行高24建议将其设置为与 asciicast 文件中相同的值，以防止播放器在加载时将自身从 80x24 调整为 asciicast 的实际尺寸。
autoplay自动播放false若自动播放，将此属性设置为任何值。默认不自动播放。
preload预加载false若在播放器初始化时预加载录音，将此属性设置为任何值。默认为无预加载。
loop循环播放false若循环播放，将此属性设置为任何值。默认为无循环。
start-at给定时间开始播放0格式：62(秒数)、2:03("mm:ss")、1:02:03("hh:mm:ss")
speed播放速度1数字倍数：2代表 2x 倍速
idle-time-limit限制终端不活动无当设置为 2 时，任何超过 2 秒的不活动将被“压缩”为 2 秒。
poster播放开始前显示预览无npt:2:34 - 在给定时间显示录制“帧”
data:text/plain,Poster text - 显示给定的文本
font-size终端字体大小smallsmall,medium,big
theme终端颜色主题asciinemaasciinema, tango, solarized-dark, solarized-light,monokai
title标题无以全屏模式显示在标题栏中
author作者无以全屏模式显示在标题栏中。

更多请参考asciinema player

avatar
文章
阅读
粉丝