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.
Related
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
I am creating a website which hosts 360 panaramic photography. I am creating basically a slideshow of 360's using an iframe with tiled thumbnails. When the user clicks on a tile it loads that 360 into the iframe through JS by changing the src value of the iframe.
My issue is bandwidth, If I use the method of loading the src value into the iframe then every time this occurs, it seems to reload the content - looking at my network tab in my browser this does seem to be the case, I can see the image files being reloaded for a second time if the user re-views a tile/iframe.
My other option would be to have multiple iframes and just hide or show them based on which tile was clicked. Maybe using 'display:none'?
However would this then create the issue of multiple 360 panoramic photos running at the same time and being taxing on the users computer/ graphics card? Or would display:none then disengage the iframe from creating work for the graphics card?
Is there anyway to tell whether the iframe has been disengaged when hidden and is no longer taxing the users computer?
And if it is, then is there a way around this somehow? Can an iframe be disengaged so that it isn't running so to speak but it can still be made visible to the user again without reloading the content again.
Thanks, I hope this makes sense.
I think your problem can be solved using two things: Lazy Loading and Visibility.
You can achieve the lazy loading either the native way
<iframe src="your-360-image" loading="lazy"></iframe>
or using one of the libraries that does it for you, Iframely and lazyframe are good ones.
You can set the all the iframes to start loading in the background when the user is near them, so by the time the user clicks the tile, it's already loaded.
Regarding that the browser reloads the images, that might be because you set display to none, or even remove the element completely from the DOM. You might just want to hide it by setting the visibility to hidden, this should not re-load it again.
I'm trying to rebuild the audio effects this page has http://resn.co.nz/
When hovering over one of the icons an audio file is played that keeps playing even when the next page is loaded. This feels smooth and has a good UX. I have rebuild it as far as I could, however in my case when I click the icon the audio clip stops … How can I prevent this?
Your problem is that when your page redirects and the new one opens, there is a break while everything is loading. On the example you cited, it is never actually redirecting the page, it is just changing the URL. You know it's not redirecting because of the # in the URL. You can learn more here.
I am watching football videos and collecting data, I have set up a webpage that plays the video in the middle of the screen while I click scroll buttons of different aspect of the game, at the end I submit the data into a database.
At the moment I am just pasting the URL into the code and refreshing the page.
I want an easy way to paste an embed URL into a text box in the same webpage and the video will load in the iframe automatically (without the need to click a submit button, something like onpaste function, if it exists), I assume some javascript may need to be used.
I don't want to go away from the page (even for a few seconds - the task is tedious enough), I have a list of games I want to watch and with URLs ready to be pasted.
Is there a way to do this?
Edits
1. This is a typical URL with the iframe info
<iframe width="950" height="534" src="https://www.youtube.com/embed/xouOxFziuIk" frameborder="0" allowfullscreen></iframe>
also I am not experienced with Javascript so I have not tried anything.
The iframe (because of the way the page is set up) is inside a form tag
I have a page that has a table whose rows are links to other pages.
When there is a click on a row (link), I set location to that URL like this:
window.location=mytable.rows[temp_no].getElementsByTagName("a")[0];
And in one of those link, a video player starts to play a file in the link and I want it to keep playing when I go back to the previous page so that I can listen to the music when browsing other links.
I go to the previous page with:
window.location.href="..";
This destroys everything i.e. video player naturally. I can't popup a new window or open video player in a new window since this application works on devices which have single browser window.
Any solutions ?
Of course it does. Changing the location causes the full page to be unloaded and the new one to be loaded.
If you do not want this behaviour you'll have to use AJAX to reload only parts of your site.
Opening the video in a popup window would be another solutionbut new windows are usually annoying, so provide the user e.g. with a "open video in new window" link.
Edit: In this case - assuming the TV browsers have sane JavaScript engines - use AJAX.
Another "solution" would be adding an onbeforeunload event to request confirmation from the user before he navigates away from the page.
Without being able to use a new window or AJAX it is impossible unless you use frames and just load another page in a different frame.
Use window.open on your videos in a different window so the parent window can navigate wherever.
Keep in mind that you'll have to disable any pop-up blocker.
** UPDATE **
If you need everything in the same window, consider using some iframe to view other pages. The advantage of iframes is that they have their own CSS styles, Javascript sandbox so any page viewed within an iframe does not (generally) affect it's parent container. Of course, there are ways to communicate between an iframe and it's parent and vice versa. But this is out of the question scope.