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.
Related
looking for assistance from anyone who might have some insight into this. having a problem with the MediaRecorder API built into Chrome, specifically on macOS, a problem that does not appear at all on windows
i am needing to capture the desktop screen as well as the desktop audio, and currently i get the stream using:
navigator.mediaDevices.getDisplayMedia({
video: {
cursor: 'always',
width: 1280,
height: 720,
frameRate: {
ideal: 12,
max: 15
},
},
audio: true
})
this of course gives the prompt for the user to select a screen/application/tab
following that, i load that into a new MediaRecorder:
new MediaRecorder(screenCaptureStream, {mimeType: "video/webm"})
on windows this all works fine. as long as the "Share Audio" checkbox on the bottom left is marked, audio will be heard in the ending file.
on mac however, the only time a "Share Audio" option is allowed is when a chrome tab is selected. this is fine for something like a youtube tab playing music, it captures both video and audio without a problem.
however, on a tab running an opentok video session, no audio coming from the video session is captured. at first i thought it may have been ffmpeg incorrectly processing it, but simply playing back the raw webm file gives no audio. checking with mediaInfo the file does indeed come back with an audio stream at "48.0kHz, 32bits, 1 channel, Opus"
because this isnt a problem on windows, i imagine that the Opentok video session is somehow outputting in such a way that it it bypassing the chrome tab altogether, so that even is the user can hear the audio, the recorder doesnt capture it.
does anyone know how to allow chrome to record audio on the Application/Screen choices on macOS?
EDIT: upon more experimentation, ive discovered that the issue lies in tokbox streams themselves.
setup: using a second pc, i hooked up my phone to a line-in port to use as the "mic" for the tokbox stream, and started up the session again. on that same page i have a youtube embedded iframe link to a random video, and on firefox, another video entirely.
selecting entire screen and making sure "Share Audio" is selected, i check that i can hear the audio being played from the phone on the other pc and its fine. the recording is going, and the checks for if there is an audio track pass. i swap to the next audio source by muting the 'phone' stream, and start playing the youtube embed. after a little bit, i stop it, and play the firefox video.
the results are that the embed and firefox audio got captured, but NONE of the tokbox audio got captured. (this was done on windows, so now i know its not a mac issue)
where is it being outputted?
Due to a fairly recent update, Chrome no longer will autoplay media content such as video if it tries to start in a tab or window which does not have focus.
There are a few sites, including my own - which rely on switching then playing videos in the background as a music player. This has been broken by Chrome, with their idea being that it prevents annoying videos from playing.
I'm reluctant to even consider building a chrome extension to circumvent this (if that would even work), but would like to hear how if possible. Is there any way to get around this annoying issue?
edit: according to this reddit post it may not be Chrome, but YouTube's chrome specific implementation...
edit2: this Chrome issue states that “Once a tab / RenderFrame has ever played media before, it’s allowed to continue to autoplay/autoload indefinitely; this is to support playlist type applications.” - Perhaps if somehow a 'RenderFrame' contains all future media which is also loaded by AJAX this will work... whatever a render frame is (Since as noted in the comments, a page reload/change does not count as the user having allowed autoplay.)
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'm using jQuery to dynamically write <video> objects, and running videojs to init them. After I play a video, SOMETIMES when I try to play it again, it just won't play, and from that point on, even after refreshing the page, no videos will play. Each time, the <video> object renders, but the video just doesn't play. Nothing is written to the console. There don't appear to be any errors. Restarting Chrome resolves the issue, but only momentarily. After playing a few videos, the issue comes back again.
I found that closing other tabs in Chrome does indeed fix the problem, so it appears to be some kind of memory issue.
I'm running Chrome 19.0.1084.46
Exactly how many video tags to you have? What do they look like? Do they include preload='none' attribute? Are the source videos all on the server?
I ask because if you have more than six video tags on a single page pointing to the same source server then you could be experiencing "connection starvation":
Chrome allows only six open connections to a single server (based on DNS name in the URL)
the html5 video tag's preload attribute default value is 'auto'
Chrome's auto behavior is to preload some data and leave the connection open ready to pull more data for the video
So, with more than six video tags on a single page pointing to a single server, the videos will not play. To resolve this particular problem, set the preload attribute to 'none'
Stu is correct. But sometimes, in my experience, Chrome ignores the preload="none" attribute and goes ahead and opens a connection anyway. I've had much problem with this when developing a site which had many smaller videos on it. The connections blocked the rest of the content (images, custom fonts (and when custom fonts are delayed, the text does not even render)) My solution was to build an own preloader which loads the images. This made sure I could control at least when the images (which was the most crucial aspect from a design point of view) was loaded.
That solved the problem with images not showing but the problem still remained. So the best solution is to set up subdomains pointing to the same server, like: v1.server.com, v2.server.com, and so on. This means you won't have to move your files and you get the benefit from enabling browsers to have more open connections. Watch out for increased dns lookup time though.
There is a known bug with Chrome. It will not play the same video in multiple tabs at the same time. This is probably what you are running into if you are a developer and happen to have your page open in two tabs at the same time.
The bug has been known for almost 5 years as of this writing. Feel free to visit the Chromium bug report and star the issue. Hopefully it will increase in priority for the Chrome devs.
In the meanwhile, a workaround is to use a random query parameter in your video src. For example, instead of <video src="vid.mp4">, use <video src="vid.mp4?_u=1253412">. This will break Chrome's caching mechanism and allow the same video to be streamed to two different tabs at the same time.
I had a similar but related issue which I can expand on slightly here.
I had 14 different small videos on a page but only 2 were available at a time. Setting preload = 'none' didn't fix the issue so I also used a data attribute to store the src, and remove the src for all videos that aren't currently being viewed.
I'm having a lot of problems with video html5 and google chrome.
I have this site on two different servers and chrome is showing the transition video aleatory.
http://mitoteweb.com/vivaldo/
I made some files to test the video the simplest way to check this problem and it isn't working.
I tried with mp4 h.264, ogv y webm video format and I'm having the same issues with all of them.
Here's the test files.
http://mitoteweb.com/vivaldo/chrome/prueba1.htm
When I load the page it shows the video but once I click on the second link it doesn't show any video unless I manually reload the page. And even with that, sometimes it doesn't happen.
Sorry, I couldn't include more links because this is my first post.
Thanks in advance.