I am using firefox 12.0 version and videos are not working in Firefox, chrome and safari too.....
On local videos are working, but on server videos are not working, on server, browser asking for MIME type...
I am using this code for the video embed...
<video width="230" height="170" controls="controls">
<source src="video/main.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" />
<source src="video/main.ogv" type="video/ogg; codecs="dirac, vorbis"" />
</video>
Please give me solution on this.
It would help to know what software is serving the video files from the server.
Do you know if that software supports HTTP Range requests? Chrome and Firefox use this for audio and video files to retrieve parts of the file, either to avoid downloading a potentially very large file, or to allow the user to move backwards, forwards, pause and play media. Local files support ranges and seeking, but not all web server software does.
Related
Below code is working fine in Mozilla & Chrome. But in Safari the video doesn't play.
<video id="v-control" width="100%" autoplay="autoplay" loop>
<source src="assets/img/web home page banner.mp4" type="video/mp4"
media="all and (max-width: 480px)">
<source src="video-small.webm" type="video/webm" media="all and
(max-width: 480px)">
<source src="assets/img/web home page banner.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
I have tried preload for the video tag and If I add controls I should click on Play button. I dont need any controls for the video so I have removed controls.
If the video is not working in Safari, but works in other browsers (Chrome, Firefox, Edge), you may be running into an issue relating to byte-range requests.
Byte-range requests are when a client asks a server for only a specific portion of the requested file. The primary purpose of this is to conserve bandwidth usage by only downloading small sections of the file as needed (a video in your case). If you inspect the Safari video request, you may notice a Range header set to bytes=0-1. This is Safari's way of testing if your HTTP servers accept byte ranges before requesting a larger chunk of data.
To fix your server config, take a look at Apple's recommendations. If you need a quick fix, you could move your videos to a different hosting server that has a proper config (and make sure to update all video source references).
Safari has started (in the last year) preventing videos with audio tracks from auto-playing by default. They never specifically publicised this as far as I'm aware, however I believe it was part of the following changes:
Safari 11 also gives users control over which websites are allowed to auto-play video and audio by opening Safari’s new “Websites” preferences pane
(Source)
The only real workarounds for this are to either remove the audio track from the video, or have it muted by default.
<video id="v-control" width="100%" autoplay="autoplay" loop muted>
If your server can detect the requester's browser, you can apply this to just Safari, leaving other browsers as they were before.
In my case i'm using angular with service-worker and Safari is not loading mp4 files.
The service worker breaks the Byte-range requests, because it is like man in the middle between safari and the server, in the process the SW change the http response code from 206 to 200, this way Safari do not download the mp4.
To solve this I bypass the service worker when I need to show an mp4 video, using angular 8 is its simple, just add ngsw-bypass=true as a query string in the mp4 url and in works. ( https://....video.mp4?ngsw-bypass=true )
The Other work around also includes, adding attribute playsInline to the video tag along with muted.
For Example, something like this :
<video id="v-control" width="100%" autoplay="autoplay" loop muted playsInline>
The playsInline allows the browser to play the video right where it is instead of the default starting point.
Keep in mind that the videos you are serving need to contain the metadata required for streaming.
In my case, I was serving dynamic videos encoded in the server using ffmpeg. Using the -movflags faststart in the ffmpeg command made the videos available to be played on Safari
Added an attribute "muted"
--- video muted autoplay---
in Chrome I have everything worked and Safari is also trying
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/assets/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/assets/myVideo.mp4' controls> </video>
The volume control in HTML5 videos on my website is not appearing, see screenshot: The video plays when started, but without any sound. The videos also play fine (with sound) in VLC and Windows Media Player.
I have tested in Chrome (65.0.3325.162), Firefox (59.0.1), and Android (on a Samsung tablet). The volume of my system is fine with other applications, and YouTube videos.
Here is the (minimal) code (adding additional attributes like height and poster etc. makes no difference to the problem):
<!DOCTYPE html>
<html lang='en'>
<body>
<video controls src='vid1.mp4' width='500'>
</video>
<video controls width='500'>
<source src='vid2.mp4' type='video/mp4' />
</video>
</body>
</html>
Am I missing something obvious?
[1]: https://i.stack.imgur.com/qAl7D.png
EDIT:
When I tested with a sample video on http://techslides.com/demos/sample-videos/small.mp4 the controls appeared. It seems to have something to do with the encoded mp4 video itself.
I have now removed the video urls. I re-encoded the videos using VLC, and they are now working correctly.
Why are these HTML5 video problems cropping up now after 5+ years?
TLDR: Your code routes around video content farms and their ad-click revenue by short circuiting MP4 content and eyeballs per second, this is retaliation. It's par for the course.
Browser developers have busted your HTML5 <video> browser embed code, either on purpose or by accident around the codecs needed to decode them. They own the source code of the browser that interprets and decodes your HTML5 MP4 file for presentation in the browser content area. Chrome developers corner the market on MP4 Videos and had their arms twisted by the powers that be. So the browser sees that the codec required to decode your MP4 is likely from an unauthorized area, and thus here we are scratching our heads as to why chrome isn't showing a volume button.
My requirements has to be that HTML5 Video is fixed on server side, I can't require users to fiddle around with their chrome flags or installing a plugin that corrects the bug. It has to just work by default on the latest Chrome, Safari, Firefox then IE, preferably in that order.
Screenshot of the case of the missing HTML5 video volume button:
The video plays, but at zero volume. No volume button is ever presented either during initial load, nor during or after playback. The mp4 download and go-full screen buttons are presented and work correctly during playback.
And yes, the chrome flags for new media player are disabled:
What it looked like before, what I expect to see:
The stripped down code I'm using:
This code was evolved from the likes of: http://camendesign.com/code/video_for_everybody
<html><body>
<video width="640"
preload="none"
height="360"
poster="some_content.png"
controls="controls">
<source src="some_content.mp4"
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D348
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=_
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br>
MPEG4
Ogg Theora
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
</body></html>
The above code is the code that used to work, but got broken.
Final solution that worked for me: Manual clean of the 3rd party taint from my MP4 videos.
There are many options to clean and re-encode an MP4 video, some free others non-free. One way is open the MP4 file with VLC or other video player or software that has and open/save/reencode/convert tools in it, and save it out to a different video encoding format.
I was able to cook up a handy dandy script in Java to iterate over every MP4 file crack open the MP4 file, clean out the hobo taint if it exists then save and redeploy the mp4 file, and now all is well. Then do this on a schedule.
Other solutions considered, but rejected:
Eliminate the bugged HTML5 video embed tag from your tool set. Display an image with an html5 <img .../> tag, overlay a play button so as to indicate this is a video, when the user clicks either open a new tab where the raw MP4 video plays in browser: the volume button is shown correctly, or worst case the user downloads the MP4 video to disk, and they can open it up from disk with their video player.
Use a different browser or an open source browser, that know how to do the right thing.
Try toggling on the 'new media controls' chrome://flags, maybe at some point in the future the Chrome Devs will push a fix and it won't freak out on the evidence that the mp4 smells of digital rights violations.
Yield the vanguard and eyeball click revenue to the big player content providers, just use an whatever tag to redirect users to the websites who are able to show video correctly.
The game is afoot make your time.
It seems that you are using a mute video. Because of that, the volume control is not showing.
Check this out:
<video src='https://www.w3schools.com/tags/mov_bbb.mp4' controls>
</video>
I want to play an HTML5 video (MP4, quickstart) in IE 11 using the autoplay option.
All browsers are working fine (Firefox, Chrome, mobile Android and iOS): they start playing the video immediately while downloading in background.
Only IE does not start playing before it completely downloaded the file. After downloading the file (I can see this in the apache log) the video starts playing - so the autoplay option is recognized in some way.
The code is really easy and only basic html5 video markup
<video id="myVideoPlayer" height="260" class="hidden-print" style="display:inline-block; float:left;" preload="auto" autoplay="autoplay" controls="controls" loop="loop">
<source src="/stream.php?id=1234&quality=hd" type="video/mp4"></source>
<source src="/stream.php?id=1234&quality=webm-hd" type="video/webm"></source>
</video>
If I directly call the stream.php I have the same issue - but again only in IE.
I can then see in my server logs:
one complete download of the video during page load
then some kind of embedded quicktime player is shown on the IE page. The player starts a new download ans starts playing the video while downloading.
and I then have a second entry for the complete download in the apache log.
Looks like IE has to download the while file to examine it and to decide how to open it. But the header of the video is at the beginning (this is why other browser are working), so why is this neccessary?
It was an apache configuration issue!
We are using DEFLATE as OutputFilter also for .php endings, so the transfer-encoding of the video streaming php-script was set to "chunked" which causes IE to completely download the file. Even setting "Content-length" header in the php file did not help. Only way was to disable DEFLATE for this php file.
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>
I'm pulling my hair here trying to figure out why Safari (v6) won't play .mov files.
This is my setup, simplified -
<video width="800" height="450" controls="controls" preload="none">
<source src="example.mov" type="video/mp4" />
Your browser can't play this video.
</video>
What I'm trying to achieve is uploading movie clips to a WordPress blog from an iPhone. iPhone saves video in .mov with h264 encoding (correct?). It would be too much of a hassle for the client to render other formats as well when uploading, and we decided to settle with this format.
In Chrome, I can see this video but in Safari it won't play, even when accessing the file directly. The player simply displays its UI bar with a loading statement. I get no errors.I've also made sure to set the .htaccess file to include AddType for .mov / quicktime.What could I possibly be missing?
Could you please put this example online? Be good to examine this example.mov with ffprobe.
IOS Safari seems very sensitive how MP4s are encoded. Only thing I've found that works for me is the libx264-ipod640.ffpreset with ffmpeg. See https://github.com/kaihendry/recordmydesktop2.0 for more.