asciinema-player的web端使用

LXT97

已于 2022-02-18 15:47:10 修改

阅读量1.5k

点赞数 1

文章标签： javascript 前端 html

于 2022-02-18 15:46:47 首次发布

本文链接：https://blog.csdn.net/LXT97000/article/details/123003331

版权

基本

从github上下载web端所需要的asciinema-player.min.js和asciinema-player.css。下载地址

web端基本使用

最基本使用：在html中引入上面两个文件，：

<html>
<head>
  ...
  <link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
  ...
</head>
<body>
  <div id="demo"></div>
  <script src="/asciinema-player.min.js"></script>
  <script>
    AsciinemaPlayer.create('/demo.cast', document.getElementById('demo'));
  </script>
</body>
</html>

扩展使用

上面是官网的基本使用，在此基础上，进行了一下拓展，可以基本实现快速播放。

<select id="select" onchange="selectOnchange()">
		<option value="1" selected>1.0x</option>
		<option value="1.25">1.25x</option></option>
		<option value="1.5">1.5x</option>
		<option value="4.0">4.0x</option>
 </select>
	<div id="demo"></div>
  <script src="./asciinema-player.min.js"></script>
  <script>
		let selectValue = 1;
		let count = 1;
		let number = 0;
		let asc;
		let isPaly;

		asc = AsciinemaPlayer.create('http://49.232.161.83:8888/dev-20220214105948.log', document.getElementById('demo'),{
			autoPlay: true,
			speed:1.25,
			idleTimeLimit:2
		});

		// 获取播放按钮的元素
		isPaly = document.getElementsByClassName('playback-button')[0];

		isPaly.onclick = onclickIsPaly

		function onclickIsPaly(obj){
			if(count % 2 === 0 && number === 1){
				number = 0;
				count = count +1;
				asc.dispose()
				asc = AsciinemaPlayer.create('http://49.232.161.83:8888/dev-20220214105948.log', document.getElementById('demo'),obj);
				isPaly = document.getElementsByClassName('playback-button')[0];
				isPaly.onclick = onclickIsPaly(obj)
			}else{
				count = count +1
				number  = 0
			}
		}
		
		function selectOnchange(){
			number = 1;
			if(count % 2 !== 0){
				count = count +1;
			}
			const time = document.getElementsByClassName('time-elapsed')[0].innerText
			console.log('time', time)
			const select = document.getElementById('select')
			const index = select.selectedIndex;
			selectValue = select.options[index].value;
			const obj= {autoPlay: true,speed: parseFloat(selectValue), idleTimeLimit: 2,startAt: time}
			onclickIsPaly(obj)
		}

注：这个有一点问题，就是在选择播放速度后，页面会进行一下闪屏，这个问题正在研究中

其中’http://49.232.161.83:8888/dev-20220214105948.log’这个一定是要部署到服务器中的文件，本地文件是不能访问的。

简单的将文件部署到服务器可访问

进入服务器后，先检查有没有ndoejs环境，如果没有，则进行安装，如果有检查是否安装了http-server，如果没有则安装，具体命令如下：

# 检查是否有node环境
$ node -v
v14.17.4  # 这就说明有
# 检查是否有http-server
$ http-server -v
v14.1.0
# 如果没有进行安装
$ npm http-server

然后新建一个目录sharedFloder存放你的文件，将文件上传到此目录下，进入sharedFloder目录，执行http-server --cors -p 8888，运行结果如图所示：

然后访问你的ip+/端口就可以，如果所示：
在这里插入图片描述
就此结束！！！

LXT97

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
asciinema-player的web端使用

基本从github上下载web端所需要的asciinema-player.min.js和asciinema-player.css。下载地址web端基本使用最基本使用：在html中引入上面两个文件，：<html><head> ... <link rel="stylesheet" type="text/css" href="/asciinema-player.css" /> ...</head><body> <div
复制链接

扫一扫