Firefox intentionally doesn't always autobuffer / preload a web video's full data. Their thinking is that it may not even be played. Unfortunately, this screws up my app.
How can I force the full video content to download in forefox, as it does in chrome? I need the event to occur, and I need to detect it without a false-positive.
Related
I am developing a video based timeline where each video will be played automatically while scrolling.
I'm only showing one video at a time when it scrolls into view, and then I'm removing DOM video node as it scrolls out and thats working perfectly fine.
{this.state.playing == key &&
<video autoPlay muted loop>
<source src={"/static/webm/videos/"+video.webm} />
</video>
}
The problem I have are slow networks, if a user has slow internet connection and keeps on scrolling every removed video they scrolled past even though no longer existing in the DOM tree continues to be downloaded which causes the website to very quickly come to a halt and waste my resources.
As you can see in here when I tested my site with dev tools and throttling enabled:
So my question is how do i stop video from being downloaded in the background after its been removed from the DOM before finishing the download?
If you use the built-in video support in the browser then there is no way to control the amount of data that's being buffered. It depends on the browser implementation and there is no API to control it.
Your best bet here is to use another player implementations which support these functionalities like dash.js, Bitmovin Player
I'm using this example http://threejs.org/examples/#webgl_video_panorama_equirectangular
For a panoramic video player using Three.js which is fine on desktop, but doesn't render on mobile. Just get a black screen and the following warnings:
three.min.js:573 THREE.WebGLRenderer: OES_texture_float extension not supported.
three.min.js:573 THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
three.min.js:573 THREE.WebGLRenderer: EXT_texture_filter_anisotropic extension not supported.
Is there any way to this working on mobile - or am I doomed.
Most of mobile browsers disabled autoplay by default, it requires user interaction (e.g. a click event) to start the video. I believe it's a good intention to save initiate data bandwidth.
Safari HTML5 Audio and Video Guide
Warning: To prevent unsolicited downloads over cellular networks at the user’s >expense, embedded media cannot be played automatically in Safari on iOS—the user >always initiates playback. A controller is automatically supplied on iPhone or >iPod touch once playback in initiated, but for iPad you must either set the >controls attribute or provide a controller using JavaScript.
You just need to create a playback button like below, which is working on my Nexus 7.
playbackButton.onclick = function(){
video.paused ? video.play() : video.pause();
}
For iOS, it's a bit tricky. First issue you would have to deal with is the video format support. The example is using webm which is currently not supported. See Can I Use WebM for more support detail .
Good news is that switch to mp4 format this will work half-way. iOS Safari has its own native fullscreen video player which will take over the screen with video content instead of three.js rendering, so basically you would need inline video player solution (e.g. www.brid.tv/in-page-mobile-monetization/) or js-based currentTime trick (e.g. pchen66.github.io/Panolens/examples/panorama_video.html).
Hope this answers your question. :)
My website currently loads a video in the banner when a desktop user visits the webpage. Currently the video is hidden but will still download if the user is on a mobile device. I would like to keep the video from downloading if the screen size below a certain count. I'm not sure how to go about this, I know of the display:none that can go along with CSS but this still downloads the file which is something I'd rather not do if the video isn't going to show at all.
If jQuery is fine, here's something you can try:
$(function(){
if($(window).width()>640){ //add video only if screen width is above 640px
$("body").append(yourVideoHere);
}
});
You need to first check to see if the screen is the appropriate width and then load your video source. Something like this should get you started.
var videoElem = document.querySelector('video');
var yourThreshold = 600;
if (screen.availWidth >= yourThreshold) {
videoElem.append('<source src="yourVideo.mp4" type="video/mp4"');
}
You can of course decide how specific you want to be as far as targeting devices. Just the width alone might not suffice.
Depends how you are trying to load the video, I would recommend the HTML5 video element with the preload attribute set to none so the video does not automatically begin to download. You could also then look at using a script that allows you to swap out video files depending on screen resolution, so for mobile you could load a smaller video size, a script that can get you up and running quickly is enquire.js. Hope this helps.
<video poster="image-location.jpg" preload="none">
<source class="mp4" src="video-location.mp4" type="video/mp4">
<source class="webm" src="video-location.webm" type="video/webm">
<source class="ogg" src="video-location.ogv" type="video/ogg">
<!-- Fallback Content such as embed YouTube video-->
</video>
How to do it based on screen size
see the other answers, measure screen size with javascript and only add the video tag, or set the source, if the screen size is big enough.
There's a gotcha if you use jquery as the <video> functions like .play() are javascript functions and won't be available to a jquery object.
How to actually do it
The best current solution for the problem of avoiding sending large video files to devices that haven't got the available bandwidth to handle it is currently server side and relies on the much more reliable metric of actual bandwidth. This is what YouTube do.
Consider the following two scenarios:
I'm at home, I have my smart phone connected by wifi to my high speed internet connection and the signal is good, but my screen resolution is reported as 480px - why should I be denied a video?
I'm out of the house, I've connected to wifi on a train, but the signal is horrible, my screen size reports as 1600px so I get a huge video, your site doesn't load and I go visit your competitor.
You can find out more about this here at MDN, and about one of the key tools, ffmpeg here, or you can use Any Video Converter to do a similar thing in a desktop GUI if you have full control over the videos. It's complicated and difficult and you may be better off using a third party service.
Part of my current project involves loading external videos through HTML5's native video tag and then resizing them with Javascript to be the full height & width of the DOM.
My code seems to work perfectly on desktop browsers, but when I load up my project on my ipad the video doesn't get resized because the onloadedmetadata event never gets fired.
Here is a small code sample which reproduces the problem:
function init() {
var video = document.getElementById('viddy');
video.addEventListener('loadedmetadata', function(e){
var dimensions = [video.videoWidth, video.videoHeight];
alert(dimensions);
});
}
document.addEventListener("DOMContentLoaded", init, false);
<video id="viddy" autoplay>
<source src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>
http://jsfiddle.net/AUSNu/213/
I've even tried coding up a solution using jQuery, on the off-chance that the event may fire, but it still doesn't.
$('#viddy').on('loadedmetadata', function() {
alert('test');
});
I even went as far as enabling remote debugging through safari on my ipad, but still no output within the console.
Are there any workarounds to this? I couldn't find much info about this on the web / in documentation.
Unfortunately, there isn't really a way around this. Mobile Safari will not download any part of the video file until it gets a user interaction (i.e. some kind of touch event), not even the header, which is required to know the dimensions.
In your specific example, you need to enable controls on the video so the user can start it playing. (Or you can write your own code that starts it, but it has to be triggered by a touch or click event.) Once it starts playing, the loadedmetadata even will fire, and you can do what you want.
I recommend reading this other answer where someone else was trying to do pretty much the same thing. It discusses the problem in more detail along with a working link. Also, it addresses another problem with scaling the video that you will probably run into.
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
I'm using a latest flowplayer, and i'ved created couple of buttons that provides video source from cdn. With the click event the player should load the video source dynamically. But for some reason flowplayer cant unload and load the source of video properly. Instead I get the following error
html5: Video file not found
function flow(source) {
jQuery("#flow").flowplayer().unload();
jQuery("#flow").flowplayer().load(source);
}
alternatively I've tried to re-init the flowplayer with every click, but sometime the initial video get loaded instead of the clicked video source. After couple of clicks the flowplayer also get stuck on loading screen.
http://jsfiddle.net/qAj8x/
If you are using chrome for this purpose then from here . Chrome and Flow Player dose not go well together.
Native fullscreen is supported in Chrome 15+, Safari 5.1+ and Firefox 14+ and others will use full browser window. In Firefox 9+ the fullscreen is disabled and needs to be manually enabled at about:config (full-screen-api.enabled;true).
Some Chrome versions have issues with playing MP4 content. Workaround: List a WEBM before the MP4 source and/or set preload="none" as video tag attribute.
Chrome gets stuck when trying to load the same video twice, even in two different tabs.