I have a WYSIWYG editor (Tinymce).
I use Vue.js 1 to show a preview of the editor contents real-time. If a user types in the editor, the preview updates real-time as expected. But here is a problem.
If there is an iframe tag (Youtube video) in the preview, the video content tries to send a request to Youtube to reload as a user starts typing because the preview updates real-time. If there is only 1 video(iframe) it's ok but if there're 2 or 3 videos it gets really heavy and slow since multiple videos try to reload by themselves.
So, is there any way to make them stop sending a request to Youtube to reload when the editor contents update real-time?
Related
I am creating a website that alerts when certain events happen with an audible alert. Since the arrival of chrome 66 it is not possible to play audio without the user making a gesture. For me this is a big problem, I was searching but I did not find any solid solution.
For example Youtube. When entering a link in the browser, the video starts automatically, without any user gesture. How do they do it?
It also occurred to me to ask for permission for the browser to allow automatic audio playback. Something like: "Notification.requestPermission ()". But I couldn't find how
When you navigate to a YouTube video link within YouTube itself, it doesn't actually navigate to a new page. YouTube uses a library called Structured Page Fragments (SPF) to render only relevant parts that need to be changed. Because of this, the browser doesn't consider this as a newly navigated page, and allows YouTube to automatically play videos with audio.
For example, from the Homepage, when you click a video in the Subscription box, this counts as a user interaction. The page then loads the fragments required to watch the video using SPF and - because the user is in the same navigation context as far as the browser is concerned - plays the video automatically with audio.
However, if you load the same video in a new navigation context (such as using a link from an external site, or opening it directly in a new tab) users will still need to interact with the page - in this case by clicking the video - to get audio. Once this is done, because the user has now interacted with the page and other videos are dynamically loaded using SPF, further interaction is not required for other videos to play automatically with audio in that navigation context.
Note that you don't need to specifically use SPF to achieve this effect. You can use libraries such as Angular and Vue to change views with a click event, and these should still count as the user having interacted with the page.
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'm building a markdown editor using node-webkit (native applications using HTML/JavaScript), marked (a js markdown compiler) and CodeMirror (code editor). So I'm basically building a markdown editor using HTML and JavaScript (+ jQuery) that runs as a native application.
One of it's features is that it has a live preview of the compiled HTML. This live preview is inside an iframe and updates every time the user changes any content in the CodeMirror editor. The problem is that when the preview updates the whole document inside the iframe gets replaced. So it's basically reloading a whole webpage every time you press a key. This is not very efficient, and makes the whole application run slow. It's also a problem when you add any embedded media like a Youtube video to your document, because it's going to reload that video every time the preview updates.
I tried to solve the problem by adding a timer so the preview won't update faster than once every 250 milliseconds. This solves the slowness problem, but embedded media will still reload on every preview update.
I tried some other live preview HTML/markdown editors and most of the used the same method for a live preview as me, except StackEdit (and probably some other ones but StackEdit is a good example). I noticed that in StackEdit when you embed a youtube video somewhere in the document, and then edit some text somewhere else in the document the Youtube video doesn't reload. That's exactly what I need: only update content in the preview that has changed. How can I get my live preview to work like that?
Note: This is how the preview currently gets updated:
var HTML = marked(CodeMirror.getValue());
$('iframe').contents().find('.content').html(HTML);
(This happens every time with an interval of 250 milliseconds when the
content of the codemirror editor changes.)
You're probably looking for a way to compare HTML with something like HTML_PREV. If that's the case, you may be looking for HTML diff algorithms, like htmldiff.js. You also might be interested in this related question.
Situation: I have a page that shows a stream of posts (news) submitted by our members. I have a setInterval() in this page that causes it to refresh every x seconds - if user is idle for x seconds.
Recently I have added video posts where user can click on an item and video would begin to play immediately in the page (so far I'm only using youtube iframes).
The problem: my auto refresh sometimes refreshes the news content while user is watching a video and being "idle"... which causes video to close and content to reset...etc. Meaning, user will loose his/her position in the video and have to start over.
My question: how do I detect if this page has at least one video that is currently "playing"? I'd like to use this to decide if auto refresh should occur or not.
Note: I'm not currently in favor of using the custom player or google/youtube js api because soon I will be adding support for videos from other services such as vimeo, 56.com...etc.
Question rephrased: is there a "universal" javascript or jquery method to detect if a video is currently playing in the document or window?
Thank you!
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.