Manage Video Frames in Presentations Using JavaScript

A well-placed video in a presentation can make your message more compelling and increase engagement levels with your audience.

PowerPoint allows you to add videos to a slide in a presentation in two ways:

• Add or embed a local video (stored on your machine)
• Add an online video (from a web source such as YouTube).

To allow you to add videos (video objects) to a presentation, Aspose.Slides provides the Video class, VideoFrame class, and other relevant types.

Create Embedded Video Frame

If the video file you want to add to your slide is stored locally, you can create a video frame to embed the video in your presentation.

1. Create an instance of the Presentation class.
2. Get a slide’s reference through its index.
3. Add an Video object and pass the video file path to embed the video with the presentation.
4. Add an VideoFrame object to create a frame for the video.
5. Save the modified presentation.

This JavaScript code shows you how to add a video stored locally to a presentation:

// Instantiates the Presentation class
var pres = new aspose.slides.Presentation("pres.pptx");
try {
    // Loads the video
    var fileStream = java.newInstanceSync("java.io.FileInputStream", "Wildlife.mp4");
    var video = pres.getVideos().addVideo(fileStream, aspose.slides.LoadingStreamBehavior.KeepLocked);
    // Gets the first slide and adds a videoframe
    pres.getSlides().get_Item(0).getShapes().addVideoFrame(10, 10, 150, 250, video);
    // Saves the presentation to disk
    pres.save("pres-with-video.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Alternatively, you can add a video by passing its file path directly to the addVideoFrame(float x, float y, float width, float height, IVideo video) method:

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();
    }
}

Create Video Frame with Video from Web Source

Microsoft PowerPoint 2013 and newer support YouTube videos in presentations. If the video you want to use is available online (e.g. on YouTube), you can add it to your presentation through its web link.

1. Create an instance of Presentation class
2. Get a slide’s reference through its index.
3. Add an Video object and pass the link to the video.
4. Set a thumbnail for the video frame.
5. Save the presentation.

This JavaScript code shows you how to add a video from the web to a slide in a PowerPoint presentation:

// Instantiates a Presentation object that represents a presentation file
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);
        });
    });
}

Manage Video Captions

Aspose.Slides allows you to manage closed captions for video frames in PowerPoint presentations. Captions are stored in WebVTT format and are exposed through the VideoFrame.getCaptionTracks method.

Add Captions to a Video Frame

To add captions to a video frame:

1. Create an instance of the Presentation class.
2. Add a video to the presentation.
3. Add a VideoFrame object to a slide.
4. Use the CaptionsCollection collection to add a WebVTT caption track.
5. Save the modified presentation.

The following code shows you how to add captions to a video frame:

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);

    // Adds a new captions track from a WebVTT file.
    videoFrame.getCaptionTracks().add("English", "track.vtt");

    presentation.save("video_with_captions.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

The CaptionsCollection class also provides the addFromStream method that lets you add captions from a stream.

Extract Captions from a Video Frame

To extract captions from a video frame:

1. Load the presentation that contains the video.
2. Find the target VideoFrame object.
3. Iterate through the CaptionsCollection collection.
4. Save each caption track to a .vtt file.

The following code shows you how to extract captions from a video frame:

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);
                // Saves the captions track to a WebVTT file.
                let filePath = captionTrack.getCaptionId() + ".vtt";
                let captionData = Buffer.from(captionTrack.getBinaryData());
                fs.writeFileSync(filePath, captionData);
            }
        }
    }
} finally {
    presentation.dispose();
}

Each Captions object exposes the caption identifier, label, binary data, and caption text as a UTF-8 string.

Remove Captions from a Video Frame

To remove captions from a video frame:

1. Load the presentation that contains the video.
2. Get the target VideoFrame object.
3. Remove caption tracks from the CaptionsCollection collection.
4. Save the modified presentation.

The following code shows you how to remove all captions from a video frame:

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); // type: com.aspose.slides.VideoFrame

    // Removes all captions from the video frame.
    videoFrame.getCaptionTracks().clear();

    presentation.save("video_without_captions.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

If you need to remove only one caption track, use the remove or removeAt methods instead of clear.

Extract Video From Slide

Besides adding videos to slides, Aspose.Slides allows you to extract videos embedded in presentations.

1. Create an instance of the Presentation class to load the presentation containing the video.
2. Iterate through all the Slide objects.
3. Iterate through all the Shape objects to find a VideoFrame.
4. Save the video to disk.

This JavaScript code shows you how to extract the video on a presentation slide:

// Instantiates a Presentation object that represents a presentation file
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);
                // Gets the File Extension
                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

Which video playback parameters can be changed for a VideoFrame?

You can control the playback mode (auto or on click) and looping. These options are available via the VideoFrame object’s properties.

Does adding a video affect the PPTX file size?

Yes. When you embed a local video, the binary data is included in the document, so the presentation size grows in proportion to the file size. When you add an online video, a link and a thumbnail are embedded, so the size increase is smaller.

Can I replace the video in an existing VideoFrame without changing its position and size?

Yes. You can swap the video content within the frame while preserving the shape’s geometry; this is a common scenario for updating media in an existing layout.

Can the content type (MIME) of an embedded video be determined?

Yes. An embedded video has a content type that you can read and use, for example when saving it to disk.