My code is basically this
<audio controls preload="metadata">
<source src="linktofile.wav" type="audio/ogg">
</audio>
In Firefox 18.0.1 - it results in 8.4 KB data download (checked on Firebug).
But in Chrome 24.0.1312.52 m - it starts downloading the entire file (In developer tools - it shows download size in MBs).
What gives?
As I understand preload values are hints for the browser, not absolute commands. In other words, they are a suggestion for how the browser should behave. The browser may or may not follow the hint so don't be surprised if it doesn't always work.
http://www.mediacollege.com/internet/html/audio/preload.html
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
preloading is fixed, and has been for a while
the behavior with preloading with it holding the connection is not a bug.
It keeps the connection open to allow for stream protection by use of one time tokens.
If it didn't do this, the audio or video wouldn't even play if it is protected by a token.
Therefore, chrome MUST keep the connection open until the page is left or closed.
Related
My mp4 videos are not loading in safari for some reason, in every other browser the html5 player works absolutely fine, but in safari it doesn't. This is for a clients website i'm helping with.
I must stress, i cant host these videos on a different server or video hosting platform. does anyone know how i can this to work.
http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4
my code for the player :
<video class="eltdf-self-hosted-video" controls="true" preload="auto">
<source type="video/mp4" src="http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4">
</video>
You server appears to be not set up to handle range requests properly.
Some browsers will ignore this and simply handle the full video being downloaded, but Safari seems to not play the video in this case - unfortunately the error message in the console is not that helpful.
You can check this by doing a range request test - Apple explain the approach here:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6
If the tool reports that it downloaded 100 bytes, the media server correctly handled the byte-range request. If it downloads the entire file, you may need to update the media server.
Doing this for your video confirms that the server is downloading the full video rather than just the range requested:
It may be worth contacting your hosting provider to ask them to correct the server configuration.
I have a problem in loading a webpage that has a html5 video element in it that runs into a weird problem in chrome. I say it is weird because the behavior is inconsistent.
here is a screenshot to explain my problem...
this is the side by side comparison of the same page when opened in firefox and chrome. The firefox loads the page as it should but chrome does not load the video when play is clicked. Even IE 11 had no issues in loading the video.
Now let me specify the environment where the problem occurs as well. The whole application is hosted on IHS/ Websphere (test environment-although WAS does all the job- not under my control). The link is,
http://wwwtest.courts.mo.gov/civiceducation/pages/const_proj_home.html
I do have another environment where the site is hosted by tomcat where there is no problem at all no matter what browser is used. The link to that page (the exact page under review) is,
http://www.courts.mo.gov/civiceducation/pages/const_proj_home.html
I would appreciate if someone would help me in understanding what is causing this issue or why. Thanks in advance
UPDATE:::
durin my research i found this SO post What does status=canceled for a resource mean in Chrome Developer Tools? and found this link which says that it is a chrome bug issue dated april 2013 http://wwwtest.courts.mo.gov/civiceducation/pages/const_proj_home.html but then why does chrome load the videos when a different webserver(tomcat) is used?
UPDATE #2 ::::
i was able to isolate the problem just to mp4 files.In my section of code that handled the video, I flipped the source tags that pointed to mp4 and webm such that the webm is now listed first...
<video id="video1" width="850" height="530" poster="../snapshot/constitution_project_home_video_fullsize.png" controls="controls" preload="none" style="display:none;">
<source src="../Media/video/webm/const_proj_welcomevideo.webm" type="video/webm" />
<source type="video/mp4" src="../Media/video/mp4/const_proj_welcomevideo.mp4" />
If you are seeing this, then your browser does not support the video element. You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.
</video>
Now the page load works just fine.
Even though this solved my original problem, I would still like to know what is causing this issue.
UPDATE #3::: Disregard update#2
I thought that the problem was solved but over the weekend I did not test it and now even webm files are not working. Its cancelling the request again. Only when I have websphere as my app server. Hence in am adding the tag "Websphere" back into the mix. Here is a screenshot now...
And here is the comparison screenshot between tomcat server and WAS 8.5 side by side on chrome
I am running out of ideas as my requirement going forward is that the content is going to be hosted on the Websphere server. Any help is greatly appreciated. Thanks
After researching through a lot of materials thats is available online , the bug report from google for chromium etc, I still was not able to understand what was causing the myriad of inconsistent behavior( some videos worked sometimes- Cached maybe?). But I also found out that the version of chrome that I was using were 32 and 34 respectively on 2 test machines. My workplace network policy also prohibited chrome from updating itself automatically.
Hence I performed a manual update on one of my systems ?(v32 to v38) and after that update things started working the way it was supposed to. I updated my other system as well after that and it worked again.
So I dont know if I can post this as an answer here but to me it is now confirmed that it was a chrome bug that was causing the inconsistent behavior. And simply updating the browser (uninstall/re-install) worked as a solution.
I apologize to those who came here looking for a full fledged solution to this problem only to come here and find out that they have to just update the browser.
And last but not the least-- A BIG THANKS to all to who took time to even read and respond to my issue.
I want to show a video on my website. I have created a .mp4 file and using the HTML5 video tag to add it to the html.
The problem is that it is not being displayed in chrome. I would also like to know how I can replay it again and again.
I too had the same issue. I changed the codec to H264-MPEG-4 AVC and the videos started working in HTML5/Chrome.
Option selected in converter: H264-MPEG-4 AVC, Codec visible in VLC player: H264-MPEG-4 AVC (part 10) (avc1)
Hope it helps...
After running into the same issue - here're some of my thoughts:
due to Chrome removing support for h264, on some machines, mp4 videos
encoded with it will either not work (throwing an Parser error when
viewing under Firebug/Network tab - consistent with issue submitted
here), or crash the browser, depending upon the encoding settings
it isn't consistent - it entirely depends upon the codecs installed
on the computer - while I didn't encounter this issue on my machine,
we did have one in the office where the issue occurred (and thus we
used this one for testing)
it might to do with Quicktime / divX settings (the machine in
question had an older version of Quicktime than my native one - we
didn't want to loose our testing pc though, so we didn't update it).
As it affects only Chrome (other browsers work fine with VideoForEverybody solution) the solution I've used is:
for every mp4 file, create a Theora encoded mp4 file (example.mp4 -> example_c.mp4)
apply following js:
if (window.chrome)
$("[type=video\\\/mp4]").each(function()
{
$(this).attr('src', $(this).attr('src').replace(".mp4", "_c.mp4"));
});
Unfortunately it's a bad Chrome hack, but hey, at least it works.
Source: user: eithedog
This also can help: chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
Also check your version of crome here: html5test
(#Alston posted this as a comment, and it worked for me, and 9 others who also upvoted, so posting this as an answer to get more eyeballs on it:)
Simply re-encoding the video file with this FFMPEG command solves it:
ffmpeg -i input.mp4 -vcodec h264 output.mp4
This started out as an attempt to cast video from my pc to a tv (with subtitles) eventually using Chromecast. And I ended up in this "does not play mp4" situation. However I seemed to have proved that Chrome will play (exactly the same) mp4 as long as it isn't wrapped in html(5)
So here is what I have constructed. I have made a webpage under localhost and in there is a default.htm which contains:-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video controls >
<source src="sample.mp4" type="video/mp4">
<track kind="subtitles" src="sample.vtt" label="gcsubs" srclang="eng">
</video>
</body>
</html>
the video and subtitle files are stored in the same folder as default.htm
I have the very latest version of Chrome (just updated this morning)
When I type the appropriate localhost... into my Chrome browser a black square appears with a "GO" arrow and an elapsed time bar, a mute button and an icon which says "CC". If I hit the go arrow, nothing happens (it doesn't change to "pause", the elapsed time doesn't move, and the timer sticks at 0:00. There are no error messages - nothing!
(note that if I input localhost.. to IE11 the video plays!!!!
In Chrome if I enter the disc address of sample.mp4 (i.e. C:\webstore\sample.mp4 then Chrome will play the video fine?.
This last bit is probably a working solution for Chromecast except that I cannot see any subtitles. I really want a solution with working subtitles.
I just don't understand what is different in Chrome between the two methods of playing mp4
Encountering the same problem, I solved this by reconverting the file with default mp4 settings in iMovie.
I was actually running into some strange errors with mp4's a while ago. What fixed it for me was re-encoding the video using known supported codecs (H.264 & MP3).
I actually used the VLC player to do so and it worked fine afterward. I converted using the mentioned codecs H.264/MP3. That solved it for me.
Maybe the problem is not in the format but in the JavaScript implementation of the play/ pause methods. May I suggest visiting the following link where Google developer explains it in a good way?
Additionally, you could choose to use the newer webp format, which Chrome supports out of the box, but be careful with other browsers. Check the support for it before implementation. Here's a link that describes the mentioned format.
On that note: I've created a small script that easily converts all standard formats to webp. You can easily configure it to fit your needs. Here's the Github repo of the same projects.
I ran into this peculiar problem that I couldn't get HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplays just fine. My code looks like this:
<video id="frontpage-video" autoplay loop>
<source src="http://test-site:8084/video_mp4.mp4" type="video/mp4">
<source src="http://test-site:8084/video_webm.webm" type="video/webm">
</video>
If I change video source URLs to some publicly available URLs (for example to dropbox), loop works just fine. This is not a major problem since I think (hope) it will work once my site goes live and the video is publicly available.
My question is: Can I make the video loop if my video is not publicly available?
I couldn't find similar problems by googling. Could it be some kind of IIS setting that prevents videos to loop?
Update 1: The problem seems to occur only in Chrome. Firefox and IE works fine.
Update 2: It seems that the video will stop at the end but never returns true for element.ended
> document.getElementById('frontpage-video').duration;
< 16.12
> document.getElementById('frontpage-video').currentTime;
< 16.12
> document.getElementById('frontpage-video').ended;
< false
Update 3: Problem is either in IIS or in Telerik's Sitefinity CMS. Server should send a "206 Partial Content" status but instead it sends 200 OK. Has any Sitefinity users had this problem and know how to solve it?
It looks like your problem is that you're not using HTTP Byte Serving. Your server is sending a "200 OK" response, but it should be sending "206 Partial Content" along with these headers:
Accept-Ranges:bytes
Content-Range:bytes 0-1492370/1492371
The byte range request allows the browser to request only the portions of the file that it needs. So if you seek around, it can skip right to that point.
With the regular 200 response, you will usually at least find that you can't seek in the video. But, depending on how your video file is encoded and where in the file the metadata is placed, you may see more problems. Sometimes the file might not even play at all. WebM is usually more robust than MP4, which can be all over the place.
I don't know IIS well enough to tell you how to configure it, but try starting here:
http://blogs.visigo.com/chriscoulson/easy-handling-of-http-range-requests-in-asp-net/
Chrome/Opera can't loop the video if the video itself is not served with HTTP 206 Partial Content response but 200 OK instead.
The problem is that Sitefinity's storage providers do not support partial content (version 7.0). They are planning to implement this for the future.
At the moment the possible workaround is to use an external blob storage provider such as Azure, Amazon or ExternalFileSystem (ExternalFileSystemStorageProvider).
I got this information from Sitefinity's support team.
May be MIME type in IIS is not set up for MP4.
Open IIS, and locate you default page. You'll see MIME type in right pane.
Click Add and put field1=.mp4 and field2=video/mp4.
Restart IIS.
Hope this might work.
In your question, your video-element doesn't have the id frontpage-video (but i guess it's copy paste?)
check if the video end event is called in your webkit browsers, and if so, restart your video.
.
<script type='text/javascript'>
document.getElementById('frontpage-video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
//restart your video
}
I’ve tried several combinations of types and setting in (the excellent) mediaplayer.js, but cannot get BBC Radio 3 to play in Chrome. The stream URL is here, and the playlist from which it is taken is here.
The tag is:
<audio src="http://bbcmedia.ic.llnwd.net/stream/bbcmedia_intl_lc_radio3_p?s=1362261751&e=1362276151&h=47e8b2755e05d1a5ceeb665f116984de" type="audio/mp4" id="player"></audio>
Looking at Chrome’s inspector, I see that the network is calling the stream, but it just loads indefinitely, without audio starting.
Other streams are working fine (demo), but this particular one is problematic, and I assume it has to do with the AAC+ format.
Edit: The instantiation code is here, figure it’s clearer than pasting the whole thing in.
Edit 2: It works in Safari (Mac)! Which I assume is related to Quicktime. Which is why I believe that AAC+ is the issue.
See https://groups.google.com/forum/m/#!msg/jplayer/9Ks2Crfjwrg/jDCDBgv3qr0J. It seems that AAC+ support is somewhat odd. It also seems that AAC+ can be placed in various containers. like m4a and FLV. Also see stackoverflow.com/questions/4018596/aac-streaming-from-shoutcast-in-flash.
Firstly, which OS, which Chrome version did you test with?
AAC+ is covered by software patents so it isn't going to be available if your OS has disabled it in the ffmpeg library that Chrome depends on (on OS where Chrome doesn't bundle its own ffmpeg). If you are running something like debian or ubuntu it might be disabled by default for legal reasons. On Windows Chrome may have removed support from the bundled ffmpeg themselves to avoid liability issues.
Alternatively since AAC+ supports DRM it might be an issue with BBC encrypting or blocking the stream in a way that Chrome doesn't support.
If I'm right then there's probably no good solutions since you can fix it on your machine (with a custom Chrome/FFMpeg build) but not on your end-users side where it really matters. Flash supports AAC so you could fallback to a flash player using the codec fallback techniques described here but you might run into the crossdomain/licensing issues described here.
The MDN codec page claims Chrome 3.0 (but not Chromium) supports AAC in MP4 containers but it does not clarify whether that support extends to AAC+ (unless that's what they mean by "main only").
html audio player plays aac+ file in chrome browser.
<audio id="audio1" controls autoplay>
<source src="test.aac"></source>
</audio>
it does play aac+ streams if it is from SHOUTCAST v2.
(sometime crossdomain.xml must be exist in shoutcast folder for audition)