I have an embedded vimeo video iframe that is blurry upon the page fully loading. On desktop things are usually fine here, but mobile it gets blurry.
How can I prevent the blur on initial load on mobile (normally, it goes away if I click on it or it is fully loaded).
Is there a setting for this with vimeo embeds that I'm missing? Thanks!
Leaving this to help next poor sucker.
In my case this was being cause by using jQuery show() and hide().
I have a single player that I dynamically pass the url and other attributes to.
So I would hide() it, change url, then show() it.
This eliminates the flicker of the video src changing.
It would work, but randomly lock up in that very blurry state, if you clicked on the video enough it would load.
Solved by using fadeTo().
videoUrl = vimeo link.
$('#playerContainer').fadeTo(0, 0); // speed, opacity
$('#yourPlayerIframe').attr('src', videoUrl);
$('#yourPlayerIframe').on("load", function() {
$('#playerContainer').fadeTo('fast', 1);
)};
Related
I have a website build using Vue.js.
It has several mp4 videos, one of the being full-width full height on the first screen with some text on top of it. It also has a loader screen.
Right now this kind of action determines when the loader is to be removed.
window.addEventListener('load', () => {
removeLoader();
});
The problem is that on some mobile devices it takes about 20 seconds to load every resource (every video and image) and then remove the loader.
I thought of doing something like this.
Just to wait for the loading of the first video and then removing the loader. But loadeddata event firest too soon and as a result, the only thing which is visible for half of a second is a video without text.
Plus I have a logic for a situation when video cannot be autoplayed to display an image instead of a video. So I'm not sure this will work anyway.
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
document.getElementsByTagName('video')[0].addEventListener('loadeddata', () => {
removeLoader()
})
}, 500)
})
So I'm not sure if there a way to load everything but the rest of the videos in onload event? Or is there any other way to improve site performance in this situation?
#Allan, i think you need not display video and text components at all (by adding class with css display: none with or with opacity, if it will be any problems) until video component fires loadeddata event. At that moment you remove loader and show these two simultaneously - what is your target.
Hope this helps.
Synopsis
Basically I have a web page that loads videos via html5 video tags. I want to be able to stop the loading of a resource in a certain context.
Context:
On my site I have a grid of video thumbnails.
When you hover over the thumbnail a preview popover of the video (html5) comes up.
The user manually clicks to play the video preview.
The previews range from 5-45 seconds.
The user usually doesn't want to watch the whole preview if it's not what they're looking for.
So they move their mouse to another video thumbnail and repeat the process.
Problem:
Even though the popover disappears when their mouse moves away, the video preview continues to download in the browser, even though this data is no longer necessary and is a drain on the network and the browser.
I would like to save bandwidth and increase browser responsiveness by canceling the download when it's containing div is removed from the dom or set to display:none
//cancel image downloads
if(window.stop !== undefined)
{
window.stop();
}
else if(document.execCommand !== undefined)
{
document.execCommand("Stop", false);
}
Dont know exactly whether it'll stop the video download but it worked for images
I have a page that loads images from various sources. Occasionally these images fail to load; perhaps the link has gone dead or whatever. That's fine.
What bothers me is that the browser might take 6 seconds or even longer (I've seen 20 seconds) before it decides that the image has failed to load. During this time the spinning loading wheel in the Chrome tab keeps going and going, making it seem like my page isn't ready.
I've switched my javascript loading from onload to $(document).ready() so at least my page isn't inactive while it waits for the images to load. But it might appear as though it is.
But is there some way to make my page appear "ready" (no spinning wheel) when all it's doing is waiting for the image? Maybe another way to load images? I currently use the img element with src. Or a way to make it give up sooner? Does it really need 6 seconds to decide that an image link is dead?
Not sure if this has a solution. It's a problem that I have seen on a lot of websites, not just mine, but it drives me nuts. I'll often click the stop-loading-x just to make it stop! I'd at least like for my own website to not be like that.
According to my tests, the loading indicator in Chrome does not show for image elements where the loading was triggered by Javascript. Thus, if you don't mind the images not loading with javascript disabled, you could send the img with the src unset, and set it when the page loads. You can store the URL in data-src. The upside is then that you can control when the image loads, if you want to (though you may want to use a plugin for that, like Roullie's answer suggests).
<img width=100 height=100 class="async-img" data-src="http://www.example.com/some.png">
...
$(document).ready(function(){
$(".async-img").each(function(){
this.src = $(this).data("src");
})
})
maybe it can help. lazyload.js
I'm having the following problem: i have to show a video inside a page, but it needs to alternate with page content. Everytime the video stops playing, i have to show a div or something. After a few seconds, that div goes away and the video starts playing again. Alternating between normal content and video.
Is this possible with HTML5 and JS? Any ideas on how to do it?
Consider implementing Popcorn.js. It's part of Mozilla's Popcorn project.
The demo on the front page shows a div with changing HTML content depending on the time code of the video.
Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web
Bind an event when the video stops (addEventListener( "ended", function(){ ... }, false)) to show the div, start a timer after which the div hides and video starts playing again.
I am working on a pop out for videos on a website I am doing some development work for. The idea is to click on a thumbnail of the video and then the video pop's off the page. Like how facebook works with their image viewer. I currently have a div tag with it's CSS display attribute set to hidden and an iframe with no src. When a user clicks on the thumbnail for the video I have JavaScript load the appropriate youtube embed link into iframe by this method:
document.getElementById('iframe-id').src = "http://www.youtube.com/embed/(videoID)";
The video is set to automatically start playing. When a user exits the popped off content the src of the iframe is then set to "" by the same method. It works fine, and the video is no longer in the iframe. The issue is with the back button.
Here is my process leading to my problem:
I click on the thumbnail and the
video pops off and starts playing.
I close the popped off content.
I press the back button.
The video I popped off previously is playing in the background. (The Problem)
Here is what I know of the process that is happening:
The page that is being viewed has two
instances created back to back in the
history of a browser. (ie I press the
back button and I am on the same page
still.. this is also when the video
starts playing in particular
browsers)
When I leave the popped off content
open and press the back button I see
just an empty iframe.
I believe my issue lies in the fact that I am changing the src to the iframe. The process of that seems to be causing the browser to load the page again and create a second instance of the same page in the history (where reloading a page does not). When the back button is pressed the page goes to the previous instance, but depending on the browser the hidden iframe is not always empty and the video is playing.
My question(s):
Can this issue be resolved with
JavaScript?
If it can't what could accomplish the task I am trying with out the issue creating two seperate instances of the same page? I was thinking AJAX might be the solution, but I don't know. I am still a little new to this all.
This can be resolved within javascript.
Additionally, AJAX has nothing to do with the problem you're having. AJAX is a mechanism for moving data around, not manipulating HTML documents.
If you just need to display a video, you don't need to use an iframe to do so. I'd suggest keeping a hidden div somewhere on the page and use that as a container for your video pop-up. When you need to display a video, insert whatever HTML you need to get it working into the div and display it when it's ready.