In my client website, when we play youtube videos in modal windows, they keep playing as we close the window.
Site: https://apoloi9.com.br. Each of the html list elements, where the videos and names are organized (as shown in the picture bellow), have unique id, but I couldn't find a way to make it work.
Section specified in this screenshot
You just have to empty or reload the src of the video embed. Therefore it would be stopped. Assuming you use JQuery:
$("#yourModal").on("hide",function(){
var video=$('.yourEmbed').attr("src");
$('.yourEmbed').attr("src",video);
});
These actions can also be achieved using plain Javascript.
Related
How can I show the same HTML5 YOUTUBE Video twice on a website without loading it twice?
Here you are taught to display a same html 5 video twice without having to load twice. But I want to know how to do it with a youtube video, using the IFRAME tag. The link is taught using the canvas, but I can not do the same with the iframe. Can you duplicate the video even with the iframe? Or is there a way to "catch" the iframe video tag? (I've tried, but it has an "access denied" error). This might help, too.
This is just an example, but I wanted to do something like this:
Original youtube video.png
My "site" with 1 youtube video and several canvas.png
I wanted to take this video is to post several in my site, enabling multiple simultaneous playbacks. As this would take a lot of the internet, I wanted to get the current frame of the original video simultaneously and place them on several canvases, this link teaches you to do just that, but using videos (< video> tag). I want to do this using youtube videos.
I want all players to play / pause at the same time, as if they were copying each other
You can't.
At least, not legitimately. There is no provision in the YouTube Iframe API for granting you access to the underlying video element.
I may be asking this incorrectly. I'm not super familiar with the terminology of javascript or ajax. I've been able to get by just enough using html and javascript code from highslidejs to create most of our companies in-house web pages. Now I am stuck on how to go about this issue. Originally I built this page using simply html code. Then one of the higher ups requested that I use this template. :( So I am attempting to work with this template that has no functionality what so ever. Everything was going ok until I came to having to reveal the video content below each selection using the ajax code that I grabbed from hsjs. While I got it to show the videos onclick with each submenu item.. the problem is that the way the template is built it has each video positioned just under it's name when it is clicked. And it doesn't clear the previous video being played. I was thinking that I could have each video be targeted to play in a specific div with an iframe. That way each video will play in that same div and override the previous one selected thereby avoiding having several open at the same time. I have had that work before. However, I am running into a conflict with the href having two functions: "javascript:;" and "mymoviesource.mp4"
I apologize for the lengthy explanation of my problem. Here is my work in progress: http://www.foxsportsgraphics.com/Lab-presentation/index-6-7a.html
I'm currently only working with the first "Virtual Reality" menu tab. I had each movie opening in a separate web window but they would like for each to open as the first one does for "Big East Basketball (jeep)" in that same position. Here is my first web page that I used a target iframe to play each video in:
http://www.foxsportsgraphics.com/template/index-Lab-original.html It works great having each video play in the same spot. But I don't know how to have one href do both: javascript code to reveal the iframe below the selections and target the video URL's to play in the iframe . Would it be better to use an "onclick" behavior to reveal the iframe? And if so.. how would i get the positions of the iframe to be in the same place for each selection? Again, I apologize if this question is troublesome because of my lack of knowledge in this area. But I would so greatly appreciate any help at all to direct me in some way to be able to accomplish what I want to do. Thank you in advance!
I have several YouTube videos embedded on a webpage. To be more specific, the page has one single iframe and links to several youtube videos - I use the target attribute to force these links to open within the iframe.
For users on mobile, I'd like the videos to open within the YouTube app (if they have it installed). This is the default behavior for YouTube links, however, it doesn't happen in my case because the links target the iframe so it just causes the video to embed on the page and then play within the browser.
My guess is the easiest way to do what I'm looking to do would be to use javascript to change the target attribute(s) just on mobile. However, I'm open to other ideas to achieve this as well.
Hyper video is video which can:
Have links or "clickable objects or interfaces" in the video, that can be clicked, and clicking those takes you to the page or object the URL of the link points to.
Be searched by its contents. So if you remember a dialogue spoken in a hyper video, you can search the web for this video , by this dialogue or part of that dialogue.
At the conceptual level, these "links" can be normal hyperlinks or even objects in the video like a chair or a table. So clicking on the table (when it comes in the video), will take you to an information page about the video. You can view the demo here: http://insidescience.open-hypervideo.org/sequence/6 . But the creator of this project has not released the product yet, and has not mentioned how he has done it. My understanding is that you can specify the entire video by using XML,HTML,CSS3,JS.
My question: How exactly does one make a hyper video?
Have links or "clickable objects or interfaces" in the video, that can be clicked, and clicking those takes you to the page or object the URL of the link points to.
Start with HTML 5 video, then listen for play events to figure out when to add and remove the interactive elements which you position over the video.
Be searched by its contents. So if you remember a dialogue spoken in a hyper video, you can search the web for this video , by this dialogue or part of that dialogue.
That's a matter of having a timed transcription of the dialogue video, and searching it like any other content. This would usually involve server side technologies though.
I have a page with a YouTube video embedded in html. I want to stop the video when it's closed using the YouTube API. I have included SWFObject (and jquery), but I'm not able to control the video using any of the described methods.
document.getElementById()
swfobject.registerObject('id', 'version')
How can I control a youtube video using the js api without embedding it through swfobject i.e. by hooking up to the existing tag in the DOM?
Edit for clarification: The video is displayed in a lightbox that is opened by the user and closed by clicking outside it. I want the video to stop playing when the user closes this lightbox.
this might be a better way: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
embed as an iframe. you can still control it with javascript.