Python OpenCV video format play in browser

Question

I'm trying to create a video from a sequence of images and display it in a browser but from some weird reason no matter what codec or file format I use I get the following error:

No video with supported format and mime type found

Here is my code:

ready_images = []
import cv2

for img in videos['Images']:
    image = cv2.imread(img.fileName)
    ready_images.append(image)

fourcc = cv2.VideoWriter_fourcc(*'MP4V')

video_name = videos['Images'][0].gifLocationPath + "//" + videos['Name']
frame = cv2.imread(videos['Images'][0].fileName)
height, width, layers = frame.shape

video_name = video_name[:-4]+".mp4"
video = cv2.VideoWriter(video_name, fourcc, 20.0, (width, height))

for image in ready_images:
    video.write(image)

cv2.destroyAllWindows()
video.release()

The funny thing is that in Firefox or Chrome the videos are not working but in Edge... they actually work.

I don't want to use FFMPEG and would prefer to make it work with OpenCV.

If any of you guys know what format of video (I know the web formats are webm, ogg, mp4) or codec I should use for this, please, just let me know.

Thanks.

Answer 1

MP4V or MPEG-4 part 2 is not supported by most browsers, you may want to try H.264 (MPEG-4 part 10) instead.

To do that, change:

fourcc = cv2.VideoWriter_fourcc(*'MP4V')

to

fourcc = cv2.VideoWriter_fourcc(*'H264')

If you are using Python 3, use the following hexadecimal code instead (there seems to be a bug when using the four bytes notation):

fourcc = 0x00000021

Run the script and you will likely get the following error message:

Failed to load OpenH264 library: openh264-1.6.0-win32msvc.dll Please check environment and/or download library: https://github.com/cisco/openh264/releases

You need to do as the message says and download the required library from github and place it somewhere accessible by your PATH.

Using H.264 compression you will also get a smaller file which is better for Web.

Answer 2

I know the question is old but for everyone that is looking for a compatible codec + container for web browser : VP8 or VP80 is a compatible encoder

cv2.VideoWriter_fourcc('V','P','8','0')

I used it with .webM as a container.

Native WebM support by Mozilla Firefox,[7][8] Opera,[9][10] and Google Chrome[11] was announced at the 2010 Google I/O conference

https://en.wikipedia.org/wiki/WebM

it worked like a charm and with pretty good performance even though for some reason I got this error when creating videoWriter objects :

OpenCV: FFMPEG: tag 0x30385056/'VP80' is not supported with codec id 139 and format 'webm / WebM'