no video with supported format and MIME type found. What does this mean and how can I change this
The webserver might not be sending the correct MIME types. Depending on the server you may be able to add a .htaccess file with the following:
AddType video/webm .webm
AddType video/mp4 .mp4
If that doesn't work try searching for "server mime types".
No video with supported format and MIME type found
Are the paths valid?
https://root/folder/video/v1.ogv
https://root/folder/video/v1.webm
Firefox doesn't support .mp4 files which explains the Specified "type" attribute of "video/mp4" is not supported.
error.
If you are using Apache, you can force it to use the correct MIME type. Add the following to your .htaccess file.
# MIME types for Video
AddType video/mp4 mp4 m4v f4v f4p
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
Django: Why won't my video display in template? (Error No video with supported format and MIME type found)
Your MEDIA_URL setting is off. In your settings.py:
MEDIA_URL = '/media/' # need "/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Because there is no /
in your media url, the url you got is media/user_3/Test_project/video_file.mp4
. This can only append to current url.
Below is not necessary but it's better to do this way. Because I am sure you have other fields in Project that you want to render in your template.
views.
def sample_view(request, project_id):
project = Project.objects.get(pk=project_id) # use project
context = {'formset': formset, 'project': project} # use project
return render(request, 'AppDir/editor.html', context}
and in template
<source src="{{ project.video_file.url }}" type="video/mp4">
HTML5 video not working in any browser
Playing HTML5 video can be tricky. There are 3 things to check for:
- check your MP4 files is properly encoded for web delivery. You can try to use handbrake or MP4Box or ffmpeg to repack your file. You need to activate the "web optimized" option (aka fast start) with handbrake.
- check your server config: for mime types have a look here section "MIME Types Rear Their Ugly Head". Try to restart your Apache server after the changes in config. If it does not work in .htaccess try your site-wide httpd.conf. Other things to check includes CORS and 206 Partial Content/Range Requests
- check your script/HTML5: try a barebone HTML5 video tag in a blank page with your mp4. If it works then scripts in your page may be affecting video playback. You can also check CPU load when playing back full HD videos.
I normally use videojs mp4 sample as a reference for a known working mp4/server config. This applies to mp4 but for webm/ogg as well (you can use make web video for transcoding to WebM or Ogg).
Let us know how it goes.
HTML5 video not playing in Firefox
Your server is not sending the correct mime type for the file.
It send Content-Type: text/plain
The HTML5 video may play in Safari, Chrome and IE 9 but not Firefox or IE 7-8. If you fix the MIME-type issue, it will play in Firefox.
If you’re using the Apache web server or some derivative of Apache, you can use an AddType directive in your site-wide httpd.conf or in an .htaccess file in the directory where you store your video files. (If you use some other web server, consult your server’s documentation on how to set the Content-Type HTTP header for specific file types.)
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
AddType audio/mpeg .mp3
AddType audio/ogg .ogg
AddType audio/mp4 .m4a
AddType audio/wav /wav
You have same question here: Video file .ogv plays locally in Firefox, but not from server
and more detailed answer: https://stackoverflow.com/a/6145629/1081079
Firefox specific html5 video error
Firefox only supports mp4 if it's installed on the operating system. MP4 support is not built into Firefox due to patent issues.
Related Topics
How to Convert Escape Characters in HTML Tags
Object-Fit Not Affecting Images
Align Flex Items with Different Heights in The Same Container
iOS 7 - CSS - HTML Height - 100% = 692Px
How to See Which Srcset Image a Browser Is Using with Browser Developer Tools
Image Placeholder Fallback for HTML5 Video
Reveal and Hide a Div on Checkbox Condition with CSS
Overlaying a Div on Top of HTML 5 Video
Page-Break-Inside Doesn't Work in Chrome
Arrange 2 Items Per Row Using Flexbox
HTML: How to Retain Formatting in Textarea
HTML Form File Uploads Doesn't Upload File
How May I Align Text to The Left and Text to The Right in The Same Line
CSS: Responsive Way to Center a Fluid Div (Without Px Width) While Limiting The Maximum Width
Can an HTML Email Body Reference a File Sent as an Attachment (In The Same Email)