HTML5 Video using video.js won't play until fully downloaded - html

I have a strange issue with a html5 video. It's working correctly in all browsers except in Internet Explorer. Internet Explorer 9 is always waiting for the video to be fully downloaded until playback starts. If I open the Video in Firefox, Chrome or even Opera everything is working fine.
The code snippet looks as following
<video id="video-js-10734" class="video-js vjs-default-skin" width="640" height="480" controls="controls" autoplay="enabled" data-setup="{}" poster="1"><source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_libtheora.ogv" type="video/ogg" /> <source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_x264.mp4" type="video/mp4" /> </video>
Did I forget about some keyword configuration or is this a "feature" in Internet &*°ç&*ç! Explorer?
Thanks a lot

It sounds like IE doesn't use the same file as other browsers.
I don't remember if IE support OGV files but if not IE should use the mp4 file you provide. It seems then your mp4 hasn't a delay set for autostart.
I have used sometimes a program called MP4box to mux or demux the file so it can start without loading everything.

May be IE doesn't support progressive download for type="video/ogg". Only for H264 and WebM. However you specidy the mp4 file. Try use type="video/ogg" and .ogg file as last option and type="video/mp4" and .mp4 file as first one.

Related

HTML video permanently muted only Firefox

I'm including a video in a page and have had no problems in Chrome or Safari thus far, but on Firefox the viedos are muted and the volume can't be changed. Here is the video code
<video src="video/test3.MOV" controls>
<p>Your browser doesn't support HTML5 video. Here is a
</video>
Any thoughts on how to fix this?
It might be because the version of Firefox is too old. Only versions Firefox 21 (or Firefox 30 for Linux) and above can support video mp4. And even if it meets the required version there are still problems with Firefox support certain mp4's inside of .mov files. More information here about the firefox issues.
Offer other codecs. .mp4 and .webm are what I always offer. FFMpeg can transcode into these formats for you. That should fix your issue. Re: how to use FFMPeg, see Getting Started with FFmpeg, Introduction to the FFmpeg Command Line
It's really not difficult at all. View page source from here.
<video controls poster="ThroughGeorgeMichaelPalaisGarnierParis.jpg">
<source src="ThroughGeorgeMichaelPalaisGarnierParis.webm" type="video/webm">
<source src="ThroughGeorgeMichaelPalaisGarnierParis.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
</video>

MP4 video file doesn't play in HTML5 video player on Internet Explorer due to Encoding

On a website i am using HTML5 to embedded a self hosted video without controls. I started out with a video file of 2mb and it played fine without problems in all browsers.
Recently I added a different video of 16mb. Now the video will play in all browsers except internet explorer. Does anyone have a clue how to fix this problem?
link: http://www.elephantdevelopment.nl/Startransfer/
HTML used:
<video id="myVideo" width="100%" height="100%" loop>
<source src="/Startransfer/wp-content/uploads/2016/05/startransfer-opening-home-video.mp4" type="video/mp4">
</video>
I figured out what the problem was. Although MP4 is supported in Internet explorer it does matter how you encode the file. Make sure you use BASELINE encoding when rendering for self hosted webvideo.

HTML5 videos showing "No Video With Supported format and MIME type Found" in FireFox browser

Here is my HTML5 Video code:
<video id="video-1" width="600" preload="auto" controls >
<source src='https://tuneables.s3.amazonaws.com/somevideo.mp4' type='video/mp4' />
<source src='https://tuneables.s3.amazonaws.com/somevideo.ogg' type='video/ogg' />
</video>
I have set "src" of other server which has "https://".
This video is running in Chrome but not in FireFox.
Although When I upload this video on my server and set src="http://example.com/somevideo.mp4", now the video is running fine in firefox.
What is the actual problem there..?
Is this problem due to "http://" or "https://".?
Thanks In Advance.
Why do you have the dot at "video/.mp4"? And not in video/ogg?
Those video types are compatible and should work fine.
If you're testing on Firefox for Mac OS you need to include a .webm format aswell:
<source src='https://tuneables.s3.amazonaws.com/somevideo.webm' type='video/webm' />
As when I tested on Mac OS in a Firefox browser it didn't run either, but when I included a webm video format it did run and solved all my problems

HTML Video autoplay not working in Firefox

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

Problems embedding mp4 video

I'm trying to use the html5 video tag to embed an mp4 but I'm having some issues that vary across different browsers.
My code looks like this:
<video controls="controls" width="640" height="360">
<source src="http://www.mydomain.com/video.mp4" type="video/mp4" />
</video>
IE - Won't recognize the file when trying to embed (edit: IE was actually dragging on the file size not the format) and when the uri to my video is plugged into the address bar it opens the video in windows media player.
Chrome, Firefox - Simply will not recognized the file format (edit: Firefox was dragging on the size as well, Chrome was the only browser having issues) and when the uri is plugged into the address bar it attempts to play the video within the browser but fails.
Could there be something within the file that would prevent it from being embedded? If so, how can I find this out?
The problem is likely that the browsers are not supporting MP4, because it is a proprietary format. To get the best cross-browser support you'll have to also encode your video in WebM and Ogg/Vorbis formats and then add those files to your video tag with their own source tags.
Just because a browser will play a video if you navigate directly to the video's URL does not mean that the browser supports that format. Usually, navigating straight to the video causes the browser to play the video with a plug-in such as Quicktime or VLC that has much better codec support than the browser does.
try this without that "/"
<video controls="controls" width="640" height="360">
<source src="http://www.mydomain.com/video.mp4" type="video/mp4" >
<source src="http://www.mydomain.com/video.ogg" type="video/ogg" >
</video>