Управление видеокадрами в презентациях с использованием JavaScript
Введение
Правильно размещённое видео в презентации делает ваше сообщение более убедительным и повышает уровень вовлечённости аудитории.
PowerPoint позволяет добавить видео на слайд презентации двумя способами:
- Добавить или встроить локальное видео (хранящееся на вашем компьютере)
- Добавить онлайн‑видео (из веб‑источника, например YouTube).
Для возможности добавления видео (видеоматериалов) в презентацию Aspose.Slides предоставляет класс Video, класс VideoFrame и другие соответствующие типы.
Создание встроенного видеокадра
Если видеофайл, который вы хотите добавить на свой слайд, хранится локально, вы можете создать видеокадр, чтобы встроить видео в презентацию.
- Создайте экземпляр класса Presentation .
- Получите ссылку на слайд по его индексу.
- Добавьте объект Video и укажите путь к видеофайлу, чтобы встроить видео в презентацию.
- Добавьте объект VideoFrame для создания кадра видео.
- Сохраните изменённую презентацию.
Этот JavaScript‑код показывает, как добавить локально хранящееся видео в презентацию:
// Создает экземпляр класса Presentation
var pres = new aspose.slides.Presentation("pres.pptx");
try {
// Загружает видео
var fileStream = java.newInstanceSync("java.io.FileInputStream", "Wildlife.mp4");
var video = pres.getVideos().addVideo(fileStream, aspose.slides.LoadingStreamBehavior.KeepLocked);
// Получает первый слайд и добавляет видеокадр
pres.getSlides().get_Item(0).getShapes().addVideoFrame(10, 10, 150, 250, video);
// Сохраняет презентацию на диск
pres.save("pres-with-video.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
if (pres != null) {
pres.dispose();
}
}
В качестве альтернативы можно добавить видео, передав его путь непосредственно в метод addVideoFrame(float x, float y, float width, float height, IVideo video):
var pres = new aspose.slides.Presentation();
try {
var sld = pres.getSlides().get_Item(0);
var vf = sld.getShapes().addVideoFrame(50, 150, 300, 150, "video1.avi");
} finally {
if (pres != null) {
pres.dispose();
}
}
Создание видеокадра с видео из веб‑источника
Microsoft PowerPoint 2013 и новее поддерживает видео YouTube в презентациях. Если нужное вам видео доступно онлайн (например, на YouTube), его можно добавить в презентацию по веб‑ссылке.
- Создайте экземпляр класса Presentation .
- Получите ссылку на слайд по его индексу.
- Добавьте объект Video и укажите ссылку на видео.
- Установите миниатюру для видеокадра.
- Сохраните презентацию.
Этот JavaScript‑код показывает, как добавить видео из интернета на слайд PowerPoint‑презентации:
// Создает объект Presentation, представляющий файл презентации
var pres = new aspose.slides.Presentation();
try {
addVideoFromYouTube(pres, "Tj75Arhq5ho");
pres.save("out.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
if (pres != null) {
pres.dispose();
}
}
async function addVideoFromYouTube(pres, videoID) {
let slide = pres.getSlides().get_Item(0);
let videoUrl = "https://www.youtube.com/embed/" + videoID;
let videoFrame = slide.getShapes().addVideoFrame(10, 10, 427, 240, videoUrl);
videoFrame.setPlayMode(aspose.slides.VideoPlayModePreset.Auto);
let thumbnailUri = "http://img.youtube.com/vi/" + videoID + "/hqdefault.jpg";
try {
const imageStream = await getImageStream(thumbnailUri);
let image = pres.getImages().addImage(imageStream);
videoFrame.getPictureFormat().getPicture().setImage(image);
} catch (error) {
console.error("Error loading thumbnail:", error);
}
}
async function getImageStream(url) {
return new Promise((resolve, reject) => {
http.get(url, (response) => {
if (response.statusCode === 200) {
resolve(response);
} else {
reject(new Error(`Failed to load image: ${response.statusCode}`));
}
}).on('error', (e) => {
reject(e);
});
});
}
Обрезка видеокадра
Aspose.Slides позволяет управлять тем, какая часть видео будет воспроизводиться, задавая значения trim‑from‑start и trim‑from‑end через методы VideoFrame.setTrimFromStart и VideoFrame.setTrimFromEnd. Оба значения указываются в миллисекундах и определяют, сколько времени пропускается с начала и с конца видео соответственно. Эти настройки изменяют параметры воспроизведения видео в презентации; они не обрезают и не изменяют двоичные данные встроенного видео.
Установка параметров обрезки
Чтобы создать видеокадр и задать параметры обрезки:
- Создайте экземпляр класса Presentation.
- Добавьте объект Video в презентацию.
- Добавьте объект VideoFrame на слайд.
- Задайте значения trim‑from‑start и trim‑from‑end через методы VideoFrame.setTrimFromStart и VideoFrame.setTrimFromEnd.
- Сохраните изменённую презентацию.
Следующий пример кода пропускает первые 2,5 секунды и последнюю секунду встроенного видео во время воспроизведения:
const presentation = new aspose.slides.Presentation();
try {
const videoStream = java.newInstanceSync("java.io.FileInputStream", "video.mp4");
try {
const video = presentation.getVideos().addVideo(
videoStream, aspose.slides.LoadingStreamBehavior.ReadStreamAndRelease);
const slide = presentation.getSlides().get_Item(0);
const videoFrame = slide.getShapes().addVideoFrame(50, 50, 640, 360, video);
videoFrame.setTrimFromStart(2500);
videoFrame.setTrimFromEnd(1000);
presentation.save("video_with_trim.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
videoStream.close();
}
} finally {
presentation.dispose();
}
Чтение параметров обрезки
Чтобы просмотреть существующие параметры обрезки, загрузите презентацию, найдите объект VideoFrame среди фигур на первом слайде и прочитайте значения через методы VideoFrame.getTrimFromStart и VideoFrame.getTrimFromEnd.
Следующий пример кода находит первый видеокадр на первом слайде и выводит его параметры обрезки в миллисекундах:
const presentation = new aspose.slides.Presentation("video_with_trim.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
const shapeCount = slide.getShapes().size();
for (let shapeIndex = 0; shapeIndex < shapeCount; shapeIndex++) {
const shape = slide.getShapes().get_Item(shapeIndex);
if (java.instanceOf(shape, "com.aspose.slides.VideoFrame")) {
const videoFrame = shape;
const trimFromStart = videoFrame.getTrimFromStart();
const trimFromEnd = videoFrame.getTrimFromEnd();
console.log("Trim from start: " + trimFromStart + " ms");
console.log("Trim from end: " + trimFromEnd + " ms");
break;
}
}
} finally {
presentation.dispose();
}
Управление субтитрами видео
Aspose.Slides позволяет управлять закрытыми субтитрами для видеокадров в презентациях PowerPoint. Субтитры хранятся в формате WebVTT и доступны через метод VideoFrame.getCaptionTracks.
Добавление субтитров к видеокадру
Чтобы добавить субтитры к видеокадру:
- Создайте экземпляр класса Presentation.
- Добавьте видео в презентацию.
- Добавьте объект VideoFrame на слайд.
- Используйте коллекцию CaptionsCollection для добавления дорожки субтитров WebVTT.
- Сохраните изменённую презентацию.
Следующий код показывает, как добавить субтитры к видеокадру:
let presentation = new aspose.slides.Presentation();
try {
let videoStream = java.newInstanceSync("java.io.FileInputStream", "video.mp4");
let video = presentation.getVideos().addVideo(videoStream, aspose.slides.LoadingStreamBehavior.KeepLocked);
let slide = presentation.getSlides().get_Item(0);
let videoFrame = slide.getShapes().addVideoFrame(0, 0, 100, 100, video);
// Добавляет новую дорожку субтитров из файла WebVTT.
videoFrame.getCaptionTracks().add("English", "track.vtt");
presentation.save("video_with_captions.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Класс CaptionsCollection также предоставляет метод addFromStream, позволяющий добавить субтитры из потока.
Извлечение субтитров из видеокадра
Чтобы извлечь субтитры из видеокадра:
- Загрузите презентацию, содержащую видео.
- Найдите целевой объект VideoFrame.
- Пройдитесь по коллекции CaptionsCollection.
- Сохраните каждую дорожку субтитров в файл с расширением
.vtt.
Следующий код показывает, как извлечь субтитры из видеокадра:
let presentation = new aspose.slides.Presentation("video_with_captions.pptx");
try {
let slide = presentation.getSlides().get_Item(0);
let shapeCount = slide.getShapes().size();
for (let shapeIndex = 0; shapeIndex < shapeCount; shapeIndex++) {
let shape = slide.getShapes().get_Item(shapeIndex);
if (java.instanceOf(shape, "com.aspose.slides.VideoFrame")) {
let videoFrame = shape;
let trackCount = videoFrame.getCaptionTracks().getCount();
for (let trackIndex = 0; trackIndex < trackCount; trackIndex++) {
let captionTrack = videoFrame.getCaptionTracks().get_Item(trackIndex);
// Сохраняет дорожку субтитров в файл WebVTT.
let filePath = captionTrack.getCaptionId() + ".vtt";
let captionData = Buffer.from(captionTrack.getBinaryData());
fs.writeFileSync(filePath, captionData);
}
}
}
} finally {
presentation.dispose();
}
Каждый объект Captions раскрывает идентификатор субтитров, метку, бинарные данные и текст субтитров в виде строки UTF‑8.
Удаление субтитров из видеокадра
Чтобы удалить субтитры из видеокадра:
- Загрузите презентацию, содержащую видео.
- Получите целевой объект VideoFrame.
- Удалите дорожки субтитров из коллекции CaptionsCollection.
- Сохраните изменённую презентацию.
Следующий код показывает, как удалить все субтитры из видеокадра:
let presentation = new aspose.slides.Presentation("video_with_captions.pptx");
try {
let slide = presentation.getSlides().get_Item(0);
let videoFrame = slide.getShapes().get_Item(0); // тип: com.aspose.slides.VideoFrame
// Удаляет все субтитры из видеокадра.
videoFrame.getCaptionTracks().clear();
presentation.save("video_without_captions.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Если необходимо удалить только одну дорожку субтитров, используйте методы remove или removeAt вместо метода clear.
Извлечение видео со слайда
Помимо добавления видео на слайды, Aspose.Slides позволяет извлекать видео, встроенное в презентации.
- Создайте экземпляр класса Presentation для загрузки презентации с видео.
- Пройдитесь по всем объектам Slide.
- Пройдитесь по всем объектам Shape в поисках VideoFrame.
- Сохраните видео на диск.
Этот JavaScript‑код показывает, как извлечь видео со слайда презентации:
// Создает объект Presentation, представляющий файл презентации
var pres = new aspose.slides.Presentation("VideoSample.pptx");
try {
for (let i = 0; i < pres.getSlides().size(); i++) {
let slide = pres.getSlides().get_Item(i);
for (let j = 0; j < slide.getShapes().size(); j++) {
let shape = slide.getShapes().get_Item(j);
if (java.instanceOf(shape, "com.aspose.slides.VideoFrame")) {
var vf = shape;
console.log(shape);
var type = vf.getEmbeddedVideo().getContentType();
var ss = type.lastIndexOf('-');
const buffer = Buffer.from(vf.getEmbeddedVideo().getBinaryData());
console.log(buffer);
// Получает расширение файла
var charIndex = type.indexOf("/");
type = type.substring(charIndex + 1);
fs.writeFileSync("testing2." + type, buffer);
}
}
}
} catch (e) {console.log(e);
} finally {
if (pres != null) {
pres.dispose();
}
}
FAQ
Какие параметры воспроизведения видео можно изменить для VideoFrame?
Вы можете управлять режимом воспроизведения (авто или по щелчку) и повторением. Эти параметры доступны через свойства объекта VideoFrame.
Влияет ли добавление видео на размер файла PPTX?
Да. При встраивании локального видео двоичные данные включаются в документ, поэтому размер презентации увеличивается пропорционально размеру файла. При добавлении онлайн‑видео в документ встраивается ссылка и миниатюра, поэтому увеличение размера меньше.
Можно ли заменить видео в существующем VideoFrame, не меняя его положение и размер?
Да. Вы можете заменить видеоконтент внутри кадра, сохранив геометрию формы; это типичный сценарий обновления медиа в уже существующем макете.
Можно ли определить тип содержимого (MIME) встроенного видео?
Да. Встроенное видео имеет тип содержимого, который можно прочитать и использовать, например, при сохранении на диск.