Is there a way to display text at 5 seconds into a video playing on the website, and then hide it after 10 seconds?
$(document).ready(function() {
$('video').on('timeupdate', function() {
var timeElapsed = Math.round($(this).get(0).currentTime);
if (timeElapsed == 5) {
$('txt1').show();
}
if (timeElapsed == 10) {
$('txt1').hide();
}
});
});
Using JavaScript for this task is another viable option and could potentially simplify the process.
// Access the video element using its id "myVideo"
var vid = document.getElementById("myVideo");
// Set an ontimeupdate event listener on the video element to trigger a function when the playback position changes
vid.ontimeupdate = function() {myFunction()};
function myFunction() {
// Display the current position of the video in the HTML elements with ids "shown" and "hidden"
var shown = document.getElementById("shown"),
hidden = document.getElementById("hidden");
shown.innerHTML = Math.round(vid.currentTime);
hidden.innerHTML = "Displayed from 2s to 7s: " + Math.round(vid.currentTime);
if (vid.currentTime > 2 && vid.currentTime < 7){
// console.log(vid.currentTime);
hidden.style.display = 'block';
} else {
hidden.style.display = 'none';
}
}<video id="myVideo" width="320" height="176" controls>
<source src="http://www.example.com/video.mp4" type="video/mp4">
<source src="http://www.example.com/video.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>Current Playback Position: <span id="shown"></span></p>
<p><span id="hidden"></span></p>Below is the code I am currently using: angular.module('ngApp', []) .factory('authInterceptor', authInterceptor) .constant('API', 'http://myserver.com/app/api') .controller('task', taskData) function task ...
I have a simple JS/jQuery code that makes an AJAX call to retrieve some HTML and insert it into a div on my webpage. While this process works smoothly in Firefox, it encounters a failure in Chrome. Upon checking the Chrome console, I can see the AJAX requ ...
After submitting my form and it being processed by the PHP, the variables from the HTML are not being received. This is the code in my index.php form: <form method="post" action="postConsole.php"> Target: <select name="target" size ="1"> & ...
Hi there, I'm fairly new to JavaScript and I've been working on implementing a feature where a Bootstrap modal opens when a button is clicked (the button's ID is set dynamically from a database). If the user clicks "Yes" in the modal, it sho ...
I have linked the library jquery.peity.min.js and loaded it before anything else. Following that, I am utilizing a function from the above library in my script called myscript.js. Here is an example of how it is used: $(".donut-mult").peity("donut", { ...
$.post("location_example.php",{data:data},function(){ //performing some action }); I attempted to specify the full location path as "localhost:8888/myweb/data/index.php", but it does not seem to be posting anything. It appears that the parameter cannot ...
In my project, I am working with an .html file (File X) that needs to immediately open another .html file (File Y) based on a certain value. Could someone provide guidance on the best way to achieve this using JavaScript? Additionally, I would like the pa ...
Having some trouble fixing the display of a button when adjusting page width in Chrome using inspect and toggle device toolbar. Specifically, when the width is less than 600, the button doesn't show up. Can anyone point out what might be causing this ...
Need help with fixing overflow issue in a fixed-width div used as a left sidebar. The main content renders correctly except for tables with many columns, causing overflow before the scroll bar appears. How can this be resolved? Various layout attempts hav ...
After struggling with this issue for an entire day, I'm seeking help to implement an animation using Lottie on my website. The animation format is 1080*1920, but the problem arises when trying to fit it within a div. The dimensions of the div are set ...
I am currently facing an issue with disabling previous dates from the current date in my code. While the functionality works well for the "From Date" date picker, I am having trouble implementing the same restriction for the "To Date" date picker after 90 ...
Is there a way to load a div that I have saved as plain text (in a file)? The file is located in the same root directory as my HTML page. I am attempting to call this file using jQuery's event load on my HTML page like this: $("#tab2").load("textfile ...
I implemented a hover effect on my button with the intention of making the button background transparent gradually when hovered over. However, I am encountering difficulties in achieving the desired transparency... I opted for ease-in as the transition di ...
For my layout, I wanted a design with a header and footer that remained fixed at the top and bottom of the window, and content in between. That part was relatively simple to achieve. However, I also needed the main content area to have its own header and ...
I have been working on a form validation project that requires all text input fields to be filled in. I've written the following functions to achieve this, but I am encountering an issue where it always displays the verified message. Even when some fi ...
Is there a way to conceal the overflowing red color in this SVG? I attempted repositioning it before the rect with the stroke, but that didn't solve the issue. Check out the code and screenshot below. <br><br> <svg _ngcontent-fdl-c1 ...
I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider. Whenever I use these arrows to n ...
I'm fairly new to JSON and JavaScript, as I stumbled upon this code from someone else and am attempting to adapt it for my needs. In my JavaScript file, I have the following functions: function signIn(var1, var2) { SignIn('login.htm?var1=&ap ...
I've been struggling to get my logo to display properly on my website. I have managed to position it, but the image isn't fully visible. Here's a screenshot for reference: http://gyazo.com/1d23c924cdb401fc0cca76b946e57dcb There doesn't ...
When I type a letter in the field, within 1 millisecond the cursor jumps to the beginning of the line in the typing field, causing text to be typed in reverse. I can only send messages on certain sites, such as YouTube comments and Yandex Translate, for ex ...