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.
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:
- 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
Create python file
First import the Open CV library
Make sure this import works before you proceed. Refer to OpenCV and installation instructions if you have any issues with this command.
Second, lets define input and output paths
input_file = './video.mp4'
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.
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.
num_frames = 1
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.
# read first frame
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.
If you followed this tutorial, your
extract.py should look like this:
At this point you should execute
extract.py to capture images from your video.
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">
And that is it! Happy Coding.