How to Use Python and OpenCV to Capture Image Frames from Videos

Using video in its various forms is a neat trick to help bring your website alive. The human eye is naturally drawn to elements that move and will focus on them over static elements. The thing to keep in mind, however, is not to overuse this effect and to keep in mind that with video comes a much higher memory footprint.

The user must wait for the video to finish loading to see it play. Depending on the video length, network speed, and user device, this may take a while. Therefore is it s good idea to take a defensive approach and make sure our design adjusts to situations where the video is not yet available. One way to accomplish this is to show a placeholder image while the video is loading.

In this tutorial we will demonstrate how to capture one or more video frames from a MP4 video, so you can use them as placeholder images while your actual video is still loading.

Requirements

We do not need any useless 3rd party bloatware to do this. OpenCV and python will do the trick. In this tutorial we will use:

• Python
• OpenCV, open source computer vision library with python interface
• MP4 video file of your choice (you can find samples here)

If you do not have OpenCV installed, you may want to try installing OpenCV using pip.

pip install opencv-python

The code

Create python file extract.py.

1. import Open CV

First import the Open CV library

import cv2

Make sure this import works before you proceed. Refer to OpenCV and installation instructions if you have any issues with this command.

2. Define file paths

Second, lets define input and output paths

input_file = './video.mp4'
output_file = './frame_%d.jpg'

The input_file variable above assumes that your video file is in the same directory as extract.py. If your video file is saved somewhere else, adjust input_file directory path accordingly.

The output_file variable assumes the captured image will be saved in the same directory as extract.py. If you would like to save the output images to a different directory, adjust the output filepath accordingly. The %d is placeholder we will use as a frame index while capturing images, which is useful if we want to capture more than 1 frame.

3. Define limits

num_frames = 1
counter = 0

Here num_frames is used as the number of frames we want to capture. When set to 1, we will capture exactly 1 frame. If you would like to capture for example 10 frames, change the value to 10.

counter is a variable we will use to keep track of how many frames we have captured so far. This value should always be 0 in the beginning.

4. Capture video frames

# read first frame
vidcap = cv2.VideoCapture(input_file)
success, image = vidcap.read()

# write output and extract more frames
while success:
    cv2.imwrite((output_file) % counter, image)
    success, image = vidcap.read()
    counter += 1

    # break after reading enough frames
    if(counter >= num_frames):
        break;

In this code snippet, we try to capture the first frame. If that action is successful, we write the frame to the output file.

After writing the output file we increment the counter. When set to capture more than 1 frame, we will continue to read more frames from the video and write those images to output directory. Once requested number of frames have been captured, we break and the loop will terminate.

5. Run extract.py

If you followed this tutorial, your extract.py should look like this:

import cv2

input_file = './video.mp4'
output_file = './frame_%d.jpg'

num_frames = 1
counter = 0

# read first frame
vidcap = cv2.VideoCapture(input_file)
success, image = vidcap.read()

# write output and extract more frames
while success:
    cv2.imwrite((output_file) % counter, image)
    success, image = vidcap.read()
    counter += 1

    # break after reading enough frames
    if(counter >= num_frames):
        break;

At this point you should execute extract.py to capture images from your video.

6. Use the placeholder image

After capturing the image we can now use it as a placeholder in a video tag. Using HTML5 video tag, define a property poster where the value is the path to the captured image.

<video controls poster="/frame_0.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>

---

And that is it! Happy Coding.