[英]Scrolling page in PhantomJS
I use PhantomJS and ffmpeg to render video from the frames. 我使用PhantomJS和ffmpeg从帧渲染视频。 I try to do scroll frames and render it, but nothing success.
我尝试做滚动框架并渲染它,但没有成功。 My code is:
我的代码是:
const page = require("webpage").create();
const getImage = (link, duration) => {
page.viewportSize = { width: windowWidth, height: windowHeight };
page.scrollPosition = {top: 0, left: 0};
let videoDuration = Math.floor(duration * 25);
if (link.startsWith("http://") || link.startsWith("https://")) {
page.open(link, () => {
let frame = 0;
setInterval(() => {
page.render("frames/image" + frame++ + ".png", { format: "png"
});
page.evaluate(function () { window.scrollBy = 100; });
if (frame > videoDuration) {
phantom.exit();
}
}, 25);
});
} else {
console.log("Enter a valid link");
phantom.exit();
}
};
getImage(imageLink, duration);
When I run the rendered video, it only plays as any video and hasn't any scroll. 当我运行渲染的视频时,它只能以任何视频的形式播放,而没有任何滚动。 What do I make wrong?
我怎么做错了? PS: I found few solutions with page.scroolPosition - but they are not working too.
PS:我发现page.scroolPosition的解决方案很少-但是它们也不起作用。
Try to wait after opening the page with different timeouts. 打开具有不同超时时间的页面后,请尝试等待。
const page = require("webpage").create();
const getImage = (link, duration) => {
page.viewportSize = { width: windowWidth, height: windowHeight };
page.scrollPosition = { top: 0, left: 0 };
let videoDuration = Math.floor(duration * 25);
if (link.startsWith("http://") || link.startsWith("https://")) {
page.open(link, () => {
let frame = 0;
setTimeout(() => {
setInterval(() => {
page.render("frames/image" + frame++ + ".png", {
format: "png"
});
page.evaluate(function () { window.scrollBy(0, 100); });
if (frame > videoDuration) {
phantom.exit();
}
}, 25);
}, 1000);
});
} else {
console.log("Enter a valid link");
phantom.exit();
}
};
getImage(imageLink, duration);
Try also using other scrolling methods: window.scrollTo(...)
, document.body.scrollTop = ...
也尝试使用其他滚动方法:
window.scrollTo(...)
, document.body.scrollTop = ...
UPDATE: 更新:
window.scrollBy(X, Y);
is function, is not a property. 是功能,不是属性。
As I can analyze, for this site "jet.gml.aisnovations.com/" I can't create video rendering, BUT... but I had made it for https://ru.wikipedia.org 据我分析,对于这个网站“ jet.gml.aisnovations.com/”,我无法创建视频渲染,但是...但是我已经为https://ru.wikipedia.org制作了视频。
Here is the code: 这是代码:
const imageLink = "https://ru.wikipedia.org";
const duration = 10;
const page = require("webpage").create();
const saveImages = (link, duration) => {
const width = 1024;
const height = 768;
page.viewportSize = { width, height };
let videoDuration = Math.floor(duration * 25);
if (
link.startsWith("http://") ||
link.startsWith("https://")
) {
page.open(link, () => {
const scrollHeight = page.evaluate(() => {
return document.body.scrollHeight;
});
const scrollStep = (scrollHeight - height) / videoDuration;
for (let i = 0; i < videoDuration; i += 1) {
page.clipRect = {
width,
height,
left: 0,
top: scrollStep * i
};
page.render("frames/image" + (i + 1) + ".png", { format: "png" });
}
phantom.exit();
});
} else {
console.log("Enter a valid link");
phantom.exit();
}
};
saveImages(imageLink, duration);
Script save images in folder frames and then render from them video clip with command 脚本将图像保存在文件夹框架中,然后使用命令从中渲染视频剪辑
`ffmpeg -start_number 10 -i frames/image%02d.png -c:v libx264 -r 25 -pix_fmt yuv420p out.mp4`
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.