Update the div's class according to the video file it is linked to

Is it possible to dynamically show or hide a div depending on the source of a video being played? I have a slideshow of videos running using bigvideo.js and I am looking for a way to toggle the visibility of certain divs based on which video is currently playing. Here's the code snippet I have been experimenting with:

function checkVideoSource() {
    setTimeout(checkVideoSource, 100);
    if (jQuery('#big-video-vid_html5_api').src('http://localhost:8888/mobilwave/images/video1.mp4'))
        jQuery('.demo').css('visibility', 'visible');
    else if (!jQuery('#big-video-vid_html5_api').src('http://localhost:8888/mobilwave/images/video2.mp4'))
        jQuery('.demo').css('visibility', 'hidden');
}

jQuery(checkVideoSource);
javascriptjqueryhtmlcssvideo

Answer №1

If you're looking for a method like $.fn.src(), it doesn't exist. Instead, you can use .attr() to retrieve the attribute.

function checkClass() {
    setTimeout(checkClass, 100);
    var src = jQuery('#big-video-vid_html5_api').attr('src');
    if (src == 'http://localhost:8888/mobilwave/images/video1.mp4')
        jQuery('.demo').css('visibility', 'visible');
    else
        jQuery('.demo').css('visibility', 'hidden');
}

jQuery(checkClass);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

My website is displaying ASCII 3D Text with glitchy lines, but this issue is not present on other websites. Example 1: Glitchy lines visible on my website Example 2: A different website using the same text without any glitchy lines. No glitches detected h ...

javascripthtmlcsswebweb-testing

The slideshow fails to show correctly after being loaded from an external JavaScript file

Utilizing standard code, I have set up a Slideshow at the top of a website: HTML: <body id="Top" onload="showSlides()"> ... <div id="slides"> <div id="slide1" class="slides fade"></div> <div id="s ...

javascriptcss

Reset the child JSP page to its original appearance

Displayed below is a JSP page: <div id="tabs-7" style="width: 100%;"> <form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data"> <div class="inputWidgetContainer"> <div class="inputWidget"> <table> ...

javascriptjqueryhtmlajaxjsp

Eliminate values from an array by utilizing either a for loop or a custom filtering function

I need help with removing specific URLs from an array every time they appear. Here is the list of URLs I want to filter out: "https://basueUrl.com/Claim" "https://basueUrl.com/ExplanationOfBenefit" This is my current array: Array= [ "https://b ...

javascriptarraysfunctionfor-loop

When assessing a list against an array of objects in JavaScript

I am currently working on some Angular code with the objective of minimizing the use of Angular 1.x functionality, as it will be refactored in the near future. My task involves comparing an array: let subscription = [ "Cinemax Subscription", "Disn ...

javascriptangularjsarraysloops

JavaScript Mouse Events preventing movement

I've been working on a simple script that allows users to adjust panel sizes horizontally by clicking and dragging the divider between them (check out the snippet below). Initially, everything works smoothly but I have encountered a bug. Here's ...

jquerymouseup

Show concealed elements above everything else

I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior. Despite trying to set position: relative; and z-index:100;, ...

javascriptjqueryhtmlcss

Angularjs is throwing an error message that states "$compile:tpload Error Loading Template"

Recently, I have been delving into the world of AngularJS and encountered a perplexing constraint error: $compile:tpload Error Loading Template index.html: <!DOCTYPE html> <html ng-app="latihan7"> <head> <title>Learn</ti ...

javascriptangularjs

A technique to trigger the display of a detailed grid by clicking in the master section

Currently, I am in the process of creating a reusable master-detail grid component using Backbone. My goal is to incorporate an event that triggers the loading of the detail grid whenever a user clicks on a row within the master grid. However, I am facin ...

javascriptjquerybackbone.js

Is there a way to automatically fill a form from a database using the HTML column of a gridview?

I have developed an asp.net webform that contains checkboxes and textboxes. Upon submission, the data is stored in a SQL Server database. In addition to this form, I have created another webform with a gridview displaying the submitted data. My goal is t ...

c#jqueryhtmlasp.netgridview

Is there a way to incorporate the ACE code editor into a Vue project without relying on its built-in Vue

Just starting out with Vue and I'm looking to incorporate the ace code editor (this package) into my project. However, I want to avoid using the vue2-component & vue3-component versions for learning purposes. How can I achieve this? What's t ...

javascriptvue.jsnpmace-editor

From declaring variables locally to accessing them globally in JavaScript

I'm facing an issue with JavaScript, webRTC, and Kurento that I can't seem to resolve on my own. My problem arises when trying to store the remote stream from a local variable into a global variable. I'll explain the steps leading to the iss ...

javascriptcallbackstreamwebrtckurento

Using PHP code in CSS for the background styling

I'm having trouble with this line of CSS... background-image:url(upload/<?php echo $array['image']; ?>); It's not working properly, and all I see is a blank screen. The image exists in the database and on the server in the corre ...

phpcss

Display the vertical scroll bar of the page when the mouse hovers over it

Struggling to reveal the main page scrollbar upon hover? While working on my portfolio, I hid the page scrollbar. Trying to display the scrollbar when hovering over the main container. Below is a link to my portfolio page and corresponding code. Any assis ...

htmlcssscrollbar

What are the implications of sending xmlhttprequests to a server every second?

Currently in the process of developing a Chrome extension designed to monitor Gmail inbox activity. To retrieve the necessary data, I am utilizing the XML feed URL: For updating purposes, I've integrated the chrome.alarms API to execute a GET reques ...

javascriptajaxgoogle-chromegmail

Enhancing Your Website with Interactive Highlighting Tags

Looking at the following html: Let's see if we can <highlight data-id="10" data-comment="1"> focus on this part only </highlight> and ignore the rest My goal is to emphasize only the highlight section. I know how to emphasize a span ...

javascripthtmlcsstags

Invoking a function beyond the boundaries of an Angular application

The Angular code I have is structured within a single module and controller. app.controller('MainCtrl', function($rootScope, $http) { $rootScope.graph = {'width': '100%', 'height': 500}; $rootScope.rectangl ...

javascriptjqueryangularjs

Effortlessly handle form submission with jQuery AJAX, automatically redirecting upon successful

I am working on a project using ASP.Net MVC where I have a view that submits form data to a controller action. In order to make this form submission more dynamic, I am trying to utilize jQuery to post the form via an AJAX call with the following code: $(" ...

javascriptjqueryajax

Creating dynamic bar chart visuals using Morris.js with JSON responses

Utilizing the morris.js library, I am extracting and plotting bar charts from data retrieved through a webservice. Issue: The format of my webservice URL is as follows: http://localhost:9999/hellowebservice/search?select=* I populate the select query ...

javascriptajaxjsonmorris.js

Analyzing various field data collectively

Is there a way to use jQuery to compare multiple input field values and trigger an alert message saying 'There are similar values' if any match is found? <input value="111"> //similar <input value="222"> <input value="111"> //s ...

javascriptjquery