I have created a site where instead of "pages" i have created divs that show/hide on different menu clicks using the code below.
The only issue is the You Tube videos on one of the pages, when the user plays the video they then have to stop it otherwise the video continues to play when visiting other pages.
Is there a way to pause the video when the user leaves the page or to just stop the video outright when clicking on another content.
Here is the code for the page navigation
$('#homePage').show();
$('.nav').click(function () {
$('.page:visible').slideUp('slow'); // or .hide()
$($(this).data('target')).slideDown('slow'); // or.show()
})
Any help is greatly appreciated
Hi this page should help a lot. https://developers.google.com/youtube/iframe_api_reference. You are just going to 'wrap' the video in the youtube Api and use their events and methods already tied to it.
Basically what you will need to do is when the div is closed or a button to x out of the video is clicked you will need to do something like this.
$("#myDiv").click(function () {
player.stopVideo();
});
One thing to note is that if you are going to be hidding the showing the div that contains the Iframe you will need to re-add the player everytime it is shown or you will lose your events that are tied to it. I hope this helps.
Related
I am making a project using jquery in which a chat thread has to be created, i am having the following code in my project that pauses all the videos except the one that is playing. This works totally fine until and unless i append a new video in my chat thread.
$("video").on("play",function(e)
{
var $allVideos = $('video');
$allVideos.not(this).each(function()
{
this.pause();
});
});
For example, i am currently playing a video in a chat thread and i am going to upload another video, while i am on the preview div inside bootstrap4 modal that autoplays the video, the one currently playing in the chat thread pauses and the one inside the preview div starts playing automatically. But when i append this preview video in my chat thread and trigger play buttons on this just appened video and the previous video that was paused, they both start playing simultaneously despite of the fact that i am having the code to manage this.
I see i need to pass some selector with on method like
$("body").on("play","video",function(e){});
but then i can't use this keyword in my code because now it refers to the body instead of the video.
How do i fix this problem? Thank You In Advance!
I am working with selenium for the first time, and I'm trying to play a video on another website.
I've already managed to play the video, but now I'm stuck trying to make it full-screen. The full-screen button is hidden unless I hover with my mouse over it.
So I searched for a solution and everybody suggests to use switch_to.frame() and then access the button, but it seems like no frame surrounds the video in my case. I'm not an expert in HTML so maybe I am getting this wrong, but is there a way to click that full-screen button when there's no frame surrounding the video?
Thanks in advance for any help :)
If there isn't an iframe containing the video, you should be able to click the button like you would any other on the screen. To get the hover menu to appear you can use ActionChains(driver).move_to_element(element).perform().
If you're having issues finding the button, you may also be able to video_player.send_keys("f"). Many players will use that shortcut to switch to fullscreen.
Long story short: (tried looking this up to no avail; maybe not wording it right? newbie here).
I'm working on a mobile-friendly webpage. On this webpage is a button. When you click said button, it takes you to ANOTHER webpage with a video on it.
The desired effect I'm looking for is when you click on the button, it doesn't take you to the new page, but rather opens up the video on the spot.
Is this achievable? Thank you in advance.
I have created a jsfiddle, see below, so that if you click on the button, it loads the video without bringing you to a new page as you requested.
http://jsfiddle.net/yb6s7fud/
Here is the jquery code I used:
$(document).ready(function () {
$('button').click(function () {
var video = '<iframe src="https://www.youtube.com/embed/koJlIGDImiU?autoplay=1"
frameborder="0" allowfullscreen></iframe>';
$("#video").append(video);
});
});
Hopefully this is what you are looking for.
With youtube you can easily open the video in a modal box.
With other webiste you can open a iframe modal with the entire page content. You can affect iframe with jquery to take only the video only if the other page is the same domain.
Have you tried creating a container with the right properties so inside you can place an iframe? The button should be the anchor to the iframe source.
Hi to everyone and thank you in advance for the help! I have an html page with only videos (about 20 of them). What i'd like to have is the play/pause click in every one of them (without showing the controls).
Basically when you click in the area of one video, that video should stop and when i click back it should continue playing...
Any help will be very appreciated!
If you're using the html5 video tag, there are play() and pause() functions associated with it. You can put a div over the video and toggle the video on its click event. Here's a jsfiddle with an example of this.
Videos also have a currentTime variable that is both readable and writeable, so you can do useful things with that as well.
I need a little help. I went div crazy on my site using a toggle class to hide and the divs in the middle of the page. Well a couple things first the website http://gregedisonproductions.com
The first is if you click on things eventually especially on the leftsidebar they don't switch, and a bigger problem is if I'm watching a video from the leftsidebar and a play another one, it switch's but the audio keeps playing.
I was thinking that if the user clicked on anything, it would refresh the page, then execute the href command.
Can anyone help me in this area?
If you want to reload the page with href, you can try this
Reload
Your problem though involves the fact that when you click on another video, it doesn't stop the original one; it simply hides it. Youtube has an API that allows you to stop the video through javascript though. I believe to pause a video you can do a pauseVideo with the API.
If you want to redirect the URL, just add this to your onclick event, using PHP:
header("Location: http://yourpage.com/"); // add your URL
exit;
Using Javascrip:
window.parent.location = "http://yourpage.com/";