如何在HTML中嵌入本地asciinema录屏？现有配置无法加载播放器
2026-10-11
问题原因
- 路径错误：你用了以
/开头的绝对路径，在本地file://协议打开HTML时，/指向系统根目录，而非你的项目根目录，导致css、js、录屏文件全部加载失败 - 浏览器跨域限制：默认情况下浏览器禁止
file://协议下的页面读取本地其他文件，就算路径正确也会触发跨域拦截
解决方案
步骤1：修改为相对路径
把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>
步骤2：规避本地跨域限制
二选一即可，更推荐第二种方式：
方法1：临时修改火狐安全配置（仅测试用，用完记得改回）
- 火狐地址栏输入
about:config，回车进入高级配置页 - 搜索
security.fileuri.strict_origin_policy，双击将值改为false - 重新打开本地
index.html即可正常加载
方法2：启动本地静态服务器（推荐）
在项目根目录打开终端，用内置工具启动临时静态服务即可：
- 如果安装了Python3，运行：
python3 -m http.server 8000 - 如果安装了Python2，运行：
python -m SimpleHTTPServer 8000
启动后在浏览器访问http://localhost:8000就能正常加载播放器。
内容的提问来源于stack exchange，提问作者OrenIshShalom
相关产品推荐
相关产品推荐
