I am retrieving tweets via the Twitter api and attempting to embed their video attachments.
Embed Code:
<video controls="">
<source src="https://video.twimg.com/ext_tw_video/1444247208514113546/pu/vid/1280x720/6rw0rzMWMSk39eoz.mp4?tag=12" type="video/mp4">
</video>
Firefox:
The above code fails to render the video player altogether in firefox, choosing instead to simply return: No video with supported format and MIME type found.
Note: There is no issue in playback when the video url is entered directly into the address bar.
Chrome:
Chrome spontaneously stops playback after 0-4 seconds, returning to the first frame. This behavior is somewhat sporadic, occurring sometimes, but not always. When it does occur, no matter how many times the play button is pressed, the video is unable to progress any further. Once a video is in memory and has been successfully loaded by refreshing the page, it no longer behaves in this way. Like firefox, there is no issue in loading or playback if the video url is entered directly into the address bar.
Video demonstration:
Some more examples of twitter videos to play with:
Many site issues such as the No video with supported format and MIME type found error can be caused by corrupted cookies or cache.This can cause streaming problems in any browser
Firefox Solution:
I suggest you Clear the Cache and Remove Cookies in your settings
Warning ! ! This will log you out of sites you're logged in to.
To do this enter about:preferences in the url bar.
To clear Cookies: Select Privacy under History, then select Firefox will Use Custom Settings. Press the button on the right side called Show Cookies, then use the search bar to look for the site. There may be more than one cookie in use for this site. Remove All of them.
To clear cache: Select Advanced > Network. Across from Cached Web Content, Press Clear Now.
If there is still a problem, Start Firefox in Safe Mode {web link} While you are in safe mode;
Then restart.
Chrome solution:
At the top right, click the More button
Navigate to More tools > Clear browsing data .
At the top, choose a time range. To delete everything, select All time.
Next to Cookies and other site data and Cached images and files, check the boxes.
Click the Clear data button.
I am attempting to write a web service (using C# and WebAPI, thought the actual server technology likely isn't important) that hosts dynamic video files for consumption by a basic HTML5 video element.
Here is my situation and my requirements:
The video is being transcoded on the fly and so the final file size is not known. I cannot provide a Content-Length. However, the time duration of the video is known in advance.
The video must be immediately playable when the page loads, even if it's not done transcoding.
The user must be able, via the HTML5 video controls, to seek backwards and forwards in the video. If they attempt to seek forward to a point that is not transcoded, the request will block until the transcoding catches up.
I tried to use a 206: Partial Content response with the Content-Range header but since I am unable to provide a content-length, the player in Chrome seems unable to seek beyond the first chunk of video it gets and the player in Firefox doesn't even attempt to download more than the first chunk. It is also invalid to respond with a range outside what is asked for by the client but the video player always asks for bytes 0+.
Without a content-length, I considered using Transfer-Encoding: chunked and chunking the output. However, Chrome does not let you seek through a video if the server does not support ranged requests.
I have also considered specifying a fake content length of 1TB or something ridiculous just so I can do the ranged response option but I do not know if that will affect the progress bar or seek capabilities. Does the HTML5 video player determine the progress bar's dimensions based on file size or duration?
So what are my options? I am sure this is a problem that's been solved before. Can ranged responses be used in conjunction with chunked encoding?
I'm working on my own DRM solution for video content. I'm verifying each access to the actual video file. So video.mp4 is actually video.php which then streams orig_vid.mp4 into a <video> element.
It works fine and all – except on mobile! Mobile seems to access the video file two times, making the second request unverifiable.
Before the video is played (autoplay not possible on mobile) it accesses the file once, probably to get headers, etc. Then another request is coming throug, once we hit the play button (as expected), but after that, there's another request, and I can't figure out why or how to validate this request.
If at least I know the pattern behind the requests, I could build my script so it accommodates those. But to me right now the 2 requests seem random...
Any idea or explanation why that is or what's going on?
Are there Cache-Control, Date and Expires headers properly set?
I have a weird issue in Chrome.
Each time I load a <video> element, chrome will start two HTTP request.
The first one will stay pending forever (I guess this is the "meta-data", "partial content" request. But the point is that it stay pending)
The second one to the same file is ok and goes on and close after the loading is over.
The problem here is that the first request stay pending until I close the browser page. So at some point, if I load multiple video, Chrome will break and stop downloading anything because every available request is occupied by these pending requests.
I created a reduced test case here: http://jsbin.com/ixifiq/3
I've check to reproduce the issue, and it is happening on both Video.js and MediaElements.js frontpages. Open your network tab when loading the page, you'll see the first pending request. Then press play on the video, and you'll see the second request working, but the first one will stay pending forever.
Does anyone knows a fix to this bug?
(This bug still exists in Chrome 38.0.2125.111, OS X 10.10)
This may be a Chrome bug & you may solve it without any dummy ?time-suffix trick, just helping Chrome releasing sockets faster:
I had the same bug on a RevealJs HTML presentation, with 20+ videos (one per slide, autoplayed on slide focus). As a side effect, this unreleased socket problem also affected other ajax-lazy-loaded medias following immediately the first pending/blocked video, in the same HTML DOM.
Following Walter's answer (see bug report), I fixed the issue following the next steps:
1- Set video preload attribute to none:
<video preload="none">
<source src="video.webM" type="video/webM">
</video>
2 - Use a canplaythrough event handler to play and/or pause the video once it is loaded & ready. This helps Chrome releasing the socket used to load that video :
function loadVideos(){
$("video").each(function(index){
$(this).get(0).load();
$(this).get(0).addEventListener("canplaythrough", function(){
this.play();
this.pause();
});
});
}
Apparently that's a bug from Chrome. And there's nothing to do about it ATM.
I reported the issue a while ago on the Chromium project and it's been assigned. So hopefully it'll be fixed in near future.
Bug report: https://code.google.com/p/chromium/issues/detail?id=234779
I don't know if it will be functional right now, but I remember solving this issue by adding a parameter to the video URL, just like "video.mp4?t=2123". Of course, everytime you load the video, the parameter should be different. I'd use
var parameter = new Date().getMilliseconds();
to get it, and add it.
With this, at least a few months ago, I was able to play the same video multiple times without Chrome waiting forever the response.
Hope it helps.
This bug still exists. I'm using an HTML5 video player on a single page application. After loading about 7 players with pre-buffering, I hit the limit and no more videos load. I found another answer having to do with images and I was surprised to find that this answer solves this problem.
if(window.stop !== undefined) {
window.stop();
} else if(document.execCommand !== undefined) {
document.execCommand("Stop", false);
}
reference: Javascript: Cancel/Stop Image Requests
I found this issue when using html5 video inside dynamic content such as carousels, to release the blocked sockets you have to unload the video source:
var video = $('#video');
video[0].pause();
video.prop('src','');
video.find('source').remove();
video.remove();
The bug claims to be fixed but I still had to do this on Chrome 42. At least I could still set preload="auto".
We had the same symptoms, but the problem was that we were calling load() on the same video twice in succession: same video control, same video source (MP4). Two identical 206 requests showed up in the dev tools, and then, after switching video a few times, Chrome would cancel the first request, turn off progressive playback, and wait for that second request to complete.
Also note that if you're using an MP4 source and it isn't formatted for progressive playback (meaning the MOOV atom is at the beginning of the file), then you will have 1-2 additional requests for the file, which makes it even more confusing.
#sidonaldson 's answer is the only one that worked for me. However I did not remove the video or source. The following code worked for me, run this just before putting the correct src and playing it.
const video = document.getElementById('player')
video.pause()
video.setAttribute('src', '')
video.load()
#ecropolis's answer also worked but my SPA would end up having no images so it was not an option.
I was wondering if it is possible to stream to the user HTTP Live video. NOT a video file.
LIVE video. Using any technology. Flash or HTML5. I did some research and most of the players I found support live streaming but most of them mean youtube-like style streaming, where you can click further in the video and get the video loading. I am talking about LIVE video, happening the same time the user watches the video.
I got the incoming HTTP packets, stored in a file called "current_frame.h264". This files gets updated as the packets come in. It does NOT grow in size, just get updated. (stays at around 17-20kb). Now I want to take this file and show it on a browser. Anybody can help me out?
Apple developed something like that a while ago: https://developer.apple.com/streaming/
All you need is a webserver and a HTML5 enabled webpage.
With this technology you also have the ability to stream different quality files based on the connection (mobile usage for example)
https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming.html