What is the code to hide text once an HTML5 video has completed loading?

Is there a way to display "Video Loading" with a 75% opaque background over an HTML5 video, and then have both the text and background disappear once the video has finished loading? If so, how can I achieve this?

Thank you for your time and effort! You can find the page I'm working on at jeffarries.com/videos. Let me know if you need me to share the code.

I came across a post discussing getting the duration of an HTML5 video. However, I am looking for a way to use JavaScript to change CSS properties once the HTML5 video has completely loaded in the browser.

javascriptcsshtmlvideo

Answer №1

Utilizing JavaScript, I successfully concealed my HTML element labeled "video_cover" by altering the CSS from display: block; to display: none; when the HTML5 video element known as "myVideo" triggers the canplaythrough event.

<script>
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
    var e = document.getElementById("video_cover");
       e.style.display = 'none'
};
</script>

For further guidance, I referred to W3Schools' canplaythrough JavaScript event documentation.

Please bear with me if my comprehension of JavaScript terminology is not up to par—it's a work in progress!

A huge thank you to @Quantastical and @Offbeatmammal for your invaluable assistance!

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

Learn the technique for creating line drawings with SVG elements or by utilizing HTML div elements

In my app, users can easily generate a request for creating an email with the organization's domain instead of filling out forms manually on paper. Once the form is filled out and submitted, it goes through an approval process starting with HR departm ...

htmlcssanimationsvgline

The Google Maps App fails to launch now

Recently, my map started experiencing issues. The problem seems to be related to the HTML using a javascript and css file that is loaded from Google Drive for display. However, when I directly load these files from my computer, it works perfectly fine. Bel ...

htmlgoogle-mapsgoogle-maps-api-3google-drive-api

javascript download multiple PDF files on Internet Explorer

I am facing an issue with downloading multiple PDF files In my list, I have various a elements with links to different PDF files. I created a loop to go through each a element and generate an iframe using the value of the href as the source. This solutio ...

javascriptjquerypdfdownload

How can I make Material UI's grid spacing function properly in React?

I've been utilizing Material UI's Grid for my layout design. While the columns and rows are functioning properly, I've encountered an issue with the spacing attribute not working as expected. To import Grid, I have used the following code: ...

javascriptcssreactjsmaterial-ui

Utilize a form with a table layout to send all data to an IEnumerable Controller method

I'm experiencing an issue with a form containing data presented in a table structure @model IEnumerable<myType> @Html.AntiForgeryToken() @using (Ajax.BeginForm("Save", "NOC", null, ajaxopts, new { @encType = "multipart/form-data", @id = "myform ...

javascriptc#ajaxasp.net-mvc-4

What causes React useEffect dependency to be seemingly overlooked?

My React component contains two useEffect hooks. One of these should only run when a value stored in context is updated. However, I'm noticing that this hook runs even before the context value changes, and I can't figure out why. Below are the c ...

javascriptreactjsreact-hooksdependenciesreact-context

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

Retrieving parameters from within iframe (child)

I currently have an embedded Iframe within a website, with both residing on different domains that I own. My goal is to pass a query parameter to the src attribute of the iframe. <iframe id="iframe" title="Survey" allowtr ...

javascriptiframenext.js

Change the div attribute when clicking on a corresponding link

For the full code, please visit: https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview Here is an angular ui bootstrap accordion with nested panels: <uib-accordion close-others="oneAtATime"> <div ng-repeat="sub in subdivisions"> < ...

javascripthtmlangularjstoggleangular-ui-bootstrap

Managing state in React components across multiple pages/routes

I have successfully implemented setState on a specific component named SubmitProject located at the route /submit. Now, I also have another route /portfolio with a component called Portfolio. I am curious about how to synchronize the state between SubmitPr ...

javascriptreactjsstate

Ng-Paste - Retrieving Data from Clipboard as a List or Array

The Concept Currently, we are in the process of developing an Angular 1.5.x app and are exploring ways to incorporate a feature that allows users to paste a single column of cells from an excel sheet or another spreadsheet (regardless of row count) into a ...

javascriptangularjsclipboarddataonpasteng-paste

Warning: Non-power of two image detected in Three.js

Encountering an issue with a warning in three.js that says: THREE.WebGLRenderer: image is not power of two (600x480). Resized to 512x512. Attempted to resolve it by adding THREE.LinearFilter, but no luck. var texture = new THREE.TextureLoader().load(data[ ...

javascriptthree.js

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

htmlcsscheckbox

Javascript problem with adding floats

I am encountering an issue with the total value not being calculated correctly. Here is the scenario: let a = 86.2500; let b = 32.3550; alert(a+b); //returns 118.60499999999999, expected 118.605 alert((a+b).toFixed(2)) //returns 118.60, expected 118.61 ...

javascriptjquery

Monitoring changes in session storage with AngularJS

In the sessionStorga, I have stored data from various controllers using a library called https://github.com/fredricrylander/angular-webstorage. The data is being successfully stored and is accessible within the current session. However, I am encountering a ...

javascriptnode.jsangularjssession-storageweb-storage

Unable to find a bootstrap dropdown component using Python in Selenium

I am currently facing an issue trying to find a dropdown menu and select an option. Below is the code snippet I have been using for this task: from selenium import webdriver driver=webdriver.Chrome(r"C:\Users\nithi\Downloads\chrom ...

pythonhtmlselenium

Choose a class and all its offspring as a selector

I possess the subsequent <label class="noblock"> <input> ... ... </label> Is there a method to indicate the CSS property display: inline for both the class noblock and its offspring (all elements within it)? ...

htmlcss

Is it possible to deceive Array.isArray?

Although I have a good understanding of prototypes, I encountered some confusion when I attempted the following: var obj = {}; Object.setPrototypeOf(obj, Array.prototype); console.log(Array.isArray(obj)); // false? What's even more perplexing: var ar ...

javascriptarrays

send multiple textbox values to controller in CodeIgniter

I am new to Codeigniter and I'm facing some difficulties in understanding how to accomplish a task. In my view page, there are five rows generated using a for loop. Each row consists of two select boxes and two input boxes. I don't know how to re ...

phpjavascriptjqueryajaxcodeigniter

The current context does not have a reference to TextBox

I am encountering an issue with my simple aspx page. Despite not using Master Content Page, I am seeing the following error: The name 'txtFirstName' does not exist in the current context Here is my Markup: <%@ Page Language="C#" %> &l ...

javascripthtmlasp.net