<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<link type="text/css" rel="stylesheet" href="<c:url value='/resources/rrweb/css/rrweb.min.css' />" />
</head>
<body>
<div class="container">
	<button onclick="playback()">点击播放</button>
	<div style="float: left;">
		<h1>视频回放</h1>
		<div id="playback" style="width: 1000px;height: 500px;background-color: #cccccc"></div>
	</div>
</div>

<script type="text/javascript" src="<c:url value='/resources/versions-2.0/js/jquery.min.js' />"></script>
<script type="text/javascript" src="<c:url value='/resources/rrweb/js/rrweb-index.js'/>"></script>

<script type="text/javascript">

	function playback() {
		$.ajax({
			type: "GET",
			url: '/synopsis/rrweb-player', //访问的链接
			dataType: 'text',
			success:function(res){  //成功的回调函数
				var events = JSON.parse(res);
				new rrwebPlayer({
					target: document.body, // 可以自定义 DOM 元素
					data: {
						events,
					},
				});
			},
			error: function (e) {
				console.log("error");
			}
		});
	}

</script>
</body>
</html>