After using this particular script:
<script>
myVid=document.getElementById("video1");
myVid.oncanplay=alert("Can start playing video");
</script>
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_event_canplay
A notification window appears when the video is ready to play.
I am hoping to modify the appearance of a div container once the video begins playing (such as dimming the background). Is it possible to achieve this with the play event?
Best regards,
Torsten
This piece of code is designed to trigger a specific action when the Play event occurs for a <video> element. In this particular scenario, it changes the background color of a div. However, you could easily modify it to adjust classes or apply opacity to different elements as well.
By incorporating events for play, pause, end, error, and more, you can finely tune and control the behavior of your webpage.
<!DOCTYPE HTML>
<html>
<body style="background-color: white">
<div id="dimMe" style="background-color:blue">
<video id="video" autobuffer controls muted width=240 height=200>
<source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v">
</source>
</video>
</div>
<script>
document.getElementById("video").addEventListener('play', dimBack, false);
function dimBack() {
this.removeEventListener('play', dimBack, false);
document.getElementById("dimMe").style.backgroundColor="green";
}
</script>
</body>
</html>
I'm currently struggling with AngularJS and would really appreciate any constructive assistance. Below is the Angular code snippet I am working on: app.controller('customersCtrl', function($scope, $http) { $scope.element = function(num ...
Recently starting my journey with Bootstrap, I've included a screenshot of my progress below. This is the CSS I'm using: .snippet img{ width: 150px; max-width: 100%; height:auto; } @media(max-width: 767px) { .snippet img{ width:100px; ...
Considering that I have 2 divs with images and text, I encountered some formatting issues when attempting to float the image to the left using float:left;. The strange formatting is ruining the layout. Below, I've included my code snippet along with a ...
Consider this example: I am working with a string array const groceries = [ 'milk', 'coriander', 'cucumber', 'eggplant', 'carrot', 'brinjal', 'on ...
Having some trouble getting EventEmitter to work in both directions between two Javascript files. In my server.js file: let api = require('./api') // Not working api.on("yo", data => { console.log(data) }) // Working api.emit("ready", "S ...
I currently have the following code snippet: $('#button1').click(function(){ $('#header_bg').fadeTo(15, 0, function() { document.getElementById('header_bg').style.fill = '#FF0000'; }).fadeTo(&ap ...
After upgrading from angular 1.3.9 to angular 1.6.5, I encountered the following console error. Uncaught Error: [$injector:unpr] Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- compile No changes were made to my m ...
I've been tackling a fun little project from The Odin Project called "ETCH-A-SKETCH". The idea is to change the color of squares when the mouse hovers over them, but I'm having trouble getting the onmouseover event to trigger. Any idea what could ...
After installing the flat-responsive theme, I noticed that it includes Font Awesome CSS. Additionally, there is a reference to this in the functions.php file: wp_enqueue_style( 'flat_responsive_font-awesome', get_template_directory_uri() . &apos ...
I am encountering an error stating that includes is not a function, and the record.id is not being recognized in VS Code. I'm not sure where the problem lies? import React, { Component } from 'react' import axios from "axios" export de ...
Exploring the dynamic usage of paths in Express has been on my mind. Specifically, I have been employing lodash to locate a path in a separate file using regex methods. routes.js const json = require('./routes.json') const _ = require('l ...
Currently facing an issue while attempting to utilize bower for installing all necessary components for my website project. Each time I make an attempt, the following error presents itself: TypeError: Object #<Object> has no method 'toLowerCase ...
I'm having an issue with applying a new id to the next button in a Bootstrap tour template. I added the id to the button, but it only seems to work for the first stage and not the subsequent ones. Can anyone provide insight into why this might be happ ...
I seem to have a tangled mess of CSS / PHP / HTML to deal with. The issue I'm facing is that something works on one PHP script but not the other. Here's a snippet of my code: <?php if ($daten->getData_DB_User($get_page_num) != fa ...
My current challenge involves loading returned html from an .aspx page through AJAX, but facing a timing issue with a click event that needs to occur before executing some essential tasks. Specifically, the process begins when a user types in a text field ...
I am struggling to arrange images in rows, but I'm facing unexpected outcomes. The images only break to a new line when the page is filled. I attempted to use overflow:hidden, however, the expanding images end up hidden under white space. I can't ...
I have created a card using HTML and CSS, but I am struggling to make it line up with Bootstrap. Currently, the card is only in the middle of the section and I can't seem to figure out how to get four of these cards to line up in one row, and then ano ...
Seeking a solution to modify the text underneath a name form element on a squarespace.com website. This platform aids in website creation, but direct manipulation of the source code is not allowed. However, injecting JavaScript is permitted. I have identi ...
I am working on creating a dynamic input form that, when clicking a button, will generate a new row of description input fields. To keep track of these descriptions, I am using an array within the state: state = { descriptions: [ { ...
Creating an image map can be a tedious task, especially when dealing with complex shapes that require pinpoint accuracy. Is there a tool available that simplifies the process by allowing easy plotting of points for mapping? ...