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.
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.
I am using Brightcove for my videos, however, I need to be able to click on a selection of buttons to go to specific timestamps within the video.
I have found how to deep-link (https://support.brightcove.com/deep-linking), but this is to start a video at a specific point, rather than change the time of an existing or playing video.
I need to be let the user click on links like this (as an example):
Go to 60 seconds
Go 5 minutes
Go to 20 minutes
Clicking on any of those links will update the video.
Please help! Thank you.
Use the player API
myPlayer.currentTime(60);
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.
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.