so I madean HTML5 video for chrome and firefox ... mp4 and .ogv of course
The problem im having is that the video is working on some chrome browsers while it doesnt on others and the video is not showing at all on any firefox browser ( keep in mind that all browsers that were tested on were fully updated meaning they support HTML5 video ) here is my source code
<video id="the-video" width="550px" height="550px" controls>
<source src="videos/intro.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="videos/intro.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
add *.webm and make it first source
Firefox doesn't support H.264, Chrome does but will drop soon.
Anyway you should use Webm video format for HTML 5.
Try renaming the .ogv to .ogg, the server might not be set up to serve .ogv files. This has happened me in the past.
Alternatively, if you have access to the server, add the MIME type video/ogg for .ogv extensions.
Related
I'm trying to play a video in a tag on a plain html page. I have a video in Premiere which i have tried to export both as webm and mp4 (h264) which is located in the same directory on the FTP server as the html file. No matter which codec i render in, the player stays blank (white) and GET errors appear in the output console:
GET Errors
As you can see the video files are clearly in the same directory on the FTP server:
Files on FTP server
The GET error has been replaced with a 404 error sometimes when using different presets with both webm and h264. As far as i know webm and h264 are especially suited for html5 web-players, adobe has tons of different presets, so I really don't get why this has to be such a tricky problem to solve. It is impossible to find someone else with the same problem and this irritates me even more.
We use Azure as web hosting, so if there are any default setting prohibiting video display or similar, tell me!
[EDIT]: Here's the html code for video_presentation.html:
<video width="100%" height="100%" controls>
<source src="course_introduction.webm" type="video/webm">
<source src="course_introduction.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
PLEASE HELP!
And thanks in advance.
Try This
For multiple video clips as you have mentioned above, for maximum HTML5 video browser compatibility you need to make 3 different versions of your video. You can embed multiple HTML5 videos into web pages in a HTML5 video element, below is the HTML5 Video markup example for multiple videos:
<video width="640" height="360" controls>
<source src="ftp or http://path/course_introduction.mp4" type="video/mp4" />
<source src="ftp or http://path/course_introduction.webm" type="video/webm" />
<source src="ftp or http://path/course_introduction.ogv" type="video/ogg" />
</video>
enjoy!!!
You might need to add the mime types to the sites .htaccess file:
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
I have a website built with bootstrap and loading video in a dialog:
<video width="760" style="background-color: white;" preload controls autoplay>
<source src="....." type="video/mp4" />
</video>
Shows and works fine in IE, Chrome and Safari.
In Firefox auto play worked a few times, and now does not work at all.
No errors in console and video plays just fine manually using controls.
I have also tried script approach (without autoplay attribute):
oncanplay="$(this)[0].play()"
And works flawlessly on all browsers except Firefox.
Can anyone see what could be wrong?
I have tested this on all browser its working perfect with javascript event
<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
<source src="video.mp4" type="video/mp4" />
<source src="video.mp4.webm" type="video/webm" />
<source src="video.mp4.ogg" type="video/ogg" />
Your browser does not support the video tag or the file format of this video.
</video>
The problem has an easy solution: changing the order of the videos, listing first the .mp4 source and next the .webm source made the auto-play videos run on Firefox, Explorer and Chrome, this of course is valid if you have multiple video sources.
A side note: Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed. Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.
This worked for me for the firefox browser, but it have to be muted.
<video
width="100%"
height="100%"
onloadedmetadata="this.muted = true"
autoplay
>
<source src="assets/videos/Helpline_Video.mp4" type="video/mp4" />
</video>
First check your web page here for test
http://html5test.com/
Second inspect via code inspector and enter them in the browser to check if the are working fine or not. Or drag and drop video file over the browser to check if its working or not.
Thirdly try checking MIME Types
AddType video/mp4 for .mp4 .m4v
AddType video/ogg for .ogv
AddType video/webm for .webm
Fourthly check you html5 converter it has often problem with format conversion I had same problem year back when I was working html5 video. Changing it fixed the issue for me.
Last but not the least; Add a flash fall-back!
<object type="application/x-shockwave-flash"
data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"
height="227" width="220">
Firefox Video Issue: Troubleshooting
Make sure that the server sends the video files with a correct and supported MIME type to make it work in Firefox.
link
Use source URL relative to ROOT, not Web page
Eg: src="/complete/folder/path/video.ogv"
Version of mozilla.
Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
Firefox 4 supports WebM.
link
From Firefox 66 and aboew, you must click the unblock button on the right of browser bar to unblock Autoplay Video and Audio
Yet another issue trying to get html5 video working.
I have created 3 versions of the same video in 3 different formats using ffmpeg: mp4, ogg, and webm.
The .ogg plays fine in chrome when listed as the first html5 video source, and the .mp4 plays fine in safari when listed as the first html5 video source, however, if I list the .mp4 source above the .ogg source, chrome will no longer load/play the .ogg video as it is defaulting to the .mp4 video which will not play, and in the same fashion, if I list the .ogg source file above the .mp4 source file, safari will not load the .mp4 video.
I am at a loss. Here is my embed code:
<video width="100%" height="100%">
<source src="./videos/Wildlife.ogg">
<source src="./videos/Wildlife.webm">
<source src="./videos/Wildlife.mp4">
</video>
Any ideas as to why the fallbacks between sources are is not working properly?
Why isn't safari obeying the fallback order and ignoring the .ogg/.webm files?
After quite a bit of troubleshooting, and adding/removing tags, I finally got the fallbacks to work properly by listing their types.
<video width="100%" height="100%">
<source src="./videos/Wildlife.ogg" type="video/ogg">
<source src="./videos/Wildlife.webm" type="video/webm">
<source src="./videos/Wildlife.mp4" type="video/mp4">
</video>
In other words, in my case, the browsers would not fallback to the next available (playable) video format unless I added the 'type=' attributes on each video type.
I want to embed a video in the webpage, I use the following code:
<!-- Video Section-->
<video controls="controls" width="640px">
<source src="media/videos/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="media/videos/video.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="media/videos/video.ogv" type='application/ogg; codecs="theora, vorbis"'/>
</video>
So I can play this video on Safari, Chrome, but cannot on Firefox. I think Firefox support both ogg and webm video, so I don't know what's the problem. I only saw a gray block with a cross mark inside.
p.s. I used to use type='video/ogg', it didn't work, so I change to this type='application/ogg' based on googled suggestions, but this still doesn't work.
Thanks!
probably server settings. if you're on apache, check your mime.types file and see if or set these
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
We're just getting started with html5 video, and cannot seem to get .ogg files to play in Firefox, any tips? Here is the source we are using:
<video width="640" height="360" poster="http://video.thewebreel.com/episode_001/episode_001.jpg" controls autoplay autobuffer>
<source src="http://video.thewebreel.com/episode_001/episode_001.ogg" type="video/ogg" type='video/ogg; codecs="theora, vorbis"'/>
<source src="http://video.thewebreel.com/episode_001/episode_001.mp4" type="video/mp4" />
</video>
The live example can be seen here:
http://thewebreel.com/2010/05/02/episode-1.html
However we are totally baffled, everything seems exactly right.
I uploaded your .ogg to my server suspecting it was a server issue and it's working fine on my server
I'm guessing it's because your web server is replying with
Content-type: binary/octet-stream
Try adding the mime types to nginx...
Open up the Nginx mime type configuration file, eg: /etc/nginx/mime.types
Add these lines after the last video mime type
video/ogg ogm;
video/ogg ogv;
video/ogg ogg;
In one of the links mentioned, the correct way to play ogg files is..
<audio preload="auto" controls="controls">
<source src="media/song.ogg" type="application/ogg">
</audio>
Thanks to the person who pointed it out here.
HTML5 video (mp4 and ogv) problems in Safari and Firefox - but Chrome is all good
The correct mime types to set on your server are
AddType audio/ogg .oga (audio oga file)
AddType video/ogg .ogv (video ogv file)
AddType application/ogg .ogg (for audio and video)
Sources:
http://wiki.xiph.org/MIME_Types_and_File_Extensions
https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media
Ogg videos play were playing on Firefox 3.6 but not 4.0.
Here's the solution: video autobuffer controls preload="auto" instead of video controls preload="none"
This works in Firefox 3.6 and 4.0 and now MSIE 9!