I have project that relies heavily on video and leverages html5 video when available. This was working across all browsers up until the IE9 RC was released about a week ago! This is very frustrating!
The confusing thing is I am able to play videos when they are sourced from a different location than my domain but not when they are sourced from my domain. It is as if the path to the video is being distorted.
WORKING:
<video src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" controls="controls">
</video>
NOT WORKING
<video src="http://www.mysite.com/video/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v" controls="controls">
</video>
Please bear in mind that this is working in all HTML5 browsers (even IE9 Beta) but not the very latest 'IE9 RC' release. And that all read/write permission have been set correctly.
To test this for yourself visit this link:
http://thebeer.co/labs/video.html
You should find in IE9 RC that the first two videos don't load but the last does. And even more strangely is you visit the direct URLS of the videos in IE9 RC they will play. All three videos work in Chrome (for the time being as the haven't dropped the H.264 format yet).
Please help me out guys...
A Broken Man.
Can you check your web server configuration? It seems that wrong MIME type is being sent. If you go to IE9 Developer tools, click the Network tab, press Stop capturing and reload the page, you will see that the first two videos are sent as text/plain, which means that no content-type is specified for them, and the last two are sent as video/mp4. Chrome seems to handle it somehow, but it really doesn't have to.
You can see the same using Firebug HTTP headers sniffer. Yet, Firefox doesn't play any of the videos, probably due to h.264 codec.
Related
I’m currently working on a web application whose main purpose is streaming/timeshifting TV channels. Application is written in Javascript React framework and for web player we are using CookPete ReactPlayer with integrated hls.js. We have managed to successfully play live TV channels but unfortunately, we are experiencing some issues with timeshifting channels
Live streams are distributed over XtreamUI server as a m3u8 lists, and have this kind of format
example.org/live/username/password/channel_1.m3u8
So when a user is watching Live TV this kind of URL goes to the player source and CookPete player + hls.js are doing their magic with parsing/processing m3u8 list which results in playing video flawlessly.
Here comes the problem, for timeshift XtreamUI are using this kind of URL example.org/streaming/timeshift.php?username=XXX&password=XXX&stream=2&start=2020-04-26:19-23&duration=7
As you can see its PHP script which STREAMS raw bytes into the player. Here are response headers from /streaming/timeshift.php
As you can notice, the Content-type is video/mp2t which for some reason cannot be played in the browser environment.( Google Chrome, Mozilla Firefox, IE 11). This warning pops up.
On the other hand, Safari browser on Mac video is playing completely normal, but the request from Safari is a little bit different. This is a screenshot from Safari's console network tab. As you can see there are several requests with different byte-ranges.
We are seeking a solution which will provide playing timeshift video (video/mp2t content) in Google Chrome, Mozilla Firefox and IE 11. All suggestions/advices are welcome.
the Content-type is video/mp2t which for some reason cannot be played in the browser environment
This is because chrome and Firefox do not support mpeg transport streams, and safari does. hls.js works because it knows how to read a binary ts file, and rewrite it as mp4 fragment before sending to the the media source extensions buffer. You will need to do the same. Take a look at mux.js.
In Firefox install a codec by running this command.
sudo apt-get install libavcodec58
Install a similar codec in chrome too. It should fix the problem.
I'm have the problem that video doesn't work in Safari, but works perfectly fine with Chrome and Firefox.
<video controls muted preload="none" playsinline src="/path/to/video" type="video/mp4"/>
Get fom VLC codec informations:
video h.264/mpeg-4 avc
audio mpeg aac audio mp4a
This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.
They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.
You could workaround that issue by either
Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...
*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.
Another possible solution for you future searchers: (If your problem is not a mimetype issue.)
For some reason videos would not play on iPad unless i set the controls="true" flag.
Example: This worked for me on iPhone but not iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
If you haven’t solved the problem yet then go to your phone setting then choose safari and tap Clear History and Website Data, that worked for me the problem wasn’t the code but safari itself.
I have made a music player by JS. However I have noticed that in Chrome it does not load some songs, basically any song except the one that loaded with the page.
Using inspect tool, I noticed the http request stays in "pending" status and never load the track. even tho the song is in the right folder.
if the song playes if i put its full address in the browser: www.site.com/music/song.mp3
but it does not load it in the music player.
I tried to stream songs from other websites and the player in Chrome works perfectly, such as this: https://media.rdjavan.com/media/mp3/Masih-Arash-AP-Be-Hame-Begoo.mp3.
The above address works fine n the player, so somehow it is streamable.
In safari it works fine, basically it is slow since it has to download the song but then it works. But in Chrome it stays in the status and never loads.
I was wondering is it related to MIMEs? or does my code have to do something with servers? I have tried it on an actually server and also on Xammp and both have same result. I have not fixed htaccess but it seems unrelated to my issue.
UPDATE:
I have noticed that Chrome is even slow in loading the directories. for example it takes ages of chrome to open localhost/AudioPlayer/audio/. So i believe it is a similar problem to why my music player does not load tracks.
Any idea?
jPlayer songs not loading correctly using MVC method
Look at the answer I gave in this thread above. This may or may not be your problem.
I had problems with chrome and my music player, you have to allow content-range requests.
These are enabled default in other browsers. Reason why it works in .mp3 url's is because it's using default <audio> </audio> tags which support content-range requests I think
I'm working on an adaptive streaming solution for video out of Azure Media Services. On the client side, I'm using Azure Media Player.
Everything seems to be working fine on all the major browsers. However, Firefox pops up a yellow warning when loading the JS file that drives Microsoft's player. This warning appears even without a <video> tag on the page.
Here's a screenshot.
Can this be disable? I know I can in my Firefox, but I need my users to not see this warning. As you can see, the video IS playing anyway.
When AMP sets up it needs to query the platform capabilities to make a correct decision which tech to use. AMP is simply querying an API if it exists or not. Firefox, has decided that if you query any DRM support, even if you aren’t using it, you are forced to see this message. The message itself is a misnomer from Firefox.
This is a known issue and Microsoft is working on it.
I have a web video player that plays mkv and mp4 videos, everything runs well on google chrome but firefox only plays mp4 ones, when I try to click one of mkv videos it says: Video format or MIME type is not supported this is my video script, just in case you need it to find out what's wrong: http://pastebin.com/Vrvqt8wq
So what could be the problem ?
Firefox simply does not support Matroska natively, except for the subset of it that is WEBM.
As far as I know, Chrome does not officially support or endorse Matroska either, but it happens to work.