如果是视频这些媒体元素，无法正常显示 #222
Labels
bug
Something isn't working
Comments
|
截图看下 |
|
媒体资源为 m3u8 时，视频时这样的 媒体资源为 mp4 时，视频没跟着同步播放 下面是我的测试 demo，地址参数 playUrl=m3u8 和 playUrl=mp4 控制播放的资源 测试 demo 代码： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spy Hls Test Demo</title>
<!-- 引入 hls.js -->
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- 引入 PageSpy 插件 -->
<script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
<!-- 插件（非必须，但建议使用） -->
<script crossorigin="anonymous" src="http://localhost:6752/plugin/data-harbor/index.min.js"></script>
<script crossorigin="anonymous" src="http://localhost:6752/plugin/rrweb/index.min.js"></script>
<script>
window.$harbor = new DataHarborPlugin();
window.$rrweb = new RRWebPlugin();
[window.$harbor, window.$rrweb].forEach(p => {
PageSpy.registerPlugin(p)
})
window.$pageSpy = new PageSpy();
</script>
<style>
#videoPlayer {
width: 100%;
max-width: 600px;
}
.controls {
display: flex;
justify-content: center;
margin-top: 10px;
}
button {
margin: 0 5px;
}
</style>
</head>
<body>
<h1>HLS 播放器</h1>
<video id="videoPlayer" controls></video>
<div class="controls">
<button id="playButton">播放</button>
<button id="pauseButton">暂停</button>
</div>
<script>
const videoPlayer = document.getElementById('videoPlayer');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');
const urlParams = new URLSearchParams(window.location.search);
let playUrl = 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4';
if (urlParams.get('playUrl')) {
playUrl = urlParams.get('playUrl');
playUrl === 'mp4' && (playUrl = 'https://img.qunliao.info/4oEGX68t_9505974551.mp4');
playUrl === 'm3u8' && (playUrl = 'https://ali-m-l.cztv.com/channels/lantian/channel002/1080p.m3u8');
}
if (playUrl.indexOf('.m3u8') > -1 && Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(playUrl);
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
videoPlayer.play();
});
} else {
videoPlayer.src = playUrl;
videoPlayer.addEventListener('loadedmetadata', function () {
videoPlayer.play();
});
}
playButton.addEventListener('click', () => {
videoPlayer.play();
});
pauseButton.addEventListener('click', () => {
videoPlayer.pause();
});
</script>
</body>
</html> |
|
感谢反馈。出于多方面原因的考虑，Page 页面渲染的内容不是 “截屏、录屏”，是把客户端当前的 outerHTML 放在调试端的 iframe 中渲染的，另外 iframe 也是禁止执行 js。 |
|
关于 Page 的其他信息请参考：https://www.pagespy.org/#/docs/faq#page-principle |
|
好吧，那希望录屏功能可以支持 我提供个思路： |
|
这个 issue 我先关了，关于提供的思路可以在 #223 讨论 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
希望想办法能解决下
Steps to reproduce
No response
System Info
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: