There is an HTML video with an image that loads initially and then disappears to play the video.
I would like the image to always be visible until I click on it. Once clicked, the video should start playing.
You can view the code on JSFiddle:
http://jsfiddle.net/pwxcvxe8/173/
We have attempted using autoplay = "" and removing autoplay from the video tag, but without success.
What changes do I need to make in order for the video to play when the image is clicked?
After removing the autoplay attribute from the <video> tag, the autoplaying issue was resolved successfully.
To enable the image to play upon click, you can utilize the jQuery script below:
$('#vid').click(function() {
$('#vid').get(0).play()
});
If you have any questions, feel free to reach out.
If you want to stop the video from playing automatically, consider removing the autoplay="false" attribute or simply deleting the autoplay property.
Consider either adding autoStart="off" or removing the autoplay tag altogether. I found success with this method.
May this solution prove beneficial to you as well.
If you want to update your code, one option is to remove the autoplay attribute from the video element. This will prevent the video from automatically playing when the page loads. If you need to stop autoplay through a script, you can register an event on the video element and use the Dom Method "element.pause()" to halt the video playback. Check out this link for more information.
Referenced from the MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video, it states that "The autoplay attribute takes precedence over preload. If autoplay is defined, the browser must begin downloading the video for immediate playback."
Following these steps resolved the problem for me personally.
Is there a way to make an image responsive by resizing it while keeping its aspect ratio intact at all sizes? I want the height of the image to stay fixed above 650px, cropping the top and bottom to maintain the ratio without stretching. Additionally, I do ...
In my JavaScript, I have the following code snippet... $.ajax({ type: 'POST', url: 'http://www.example.com/ajax', data: {email: val}, success: function(response) { alert(response); } }); The PHP fil ...
I am currently utilizing AngularJS to develop a basic web application. My goal is to have the values of city A displayed as the default choice in my select dropdown. index.html <body ng-controller="MainCtrl"> <select ng-model="selectedCity" ...
I'm currently trying to read a geojson file in Node.js/express.js. The file I am working with is named "output.geojson". I want to avoid using JSON.parse and instead load it using express.js (or at least render it as JSON within this function). var o ...
Looking at the code snippet below: a_ajouter = $('.question'); hidden_div.push(a_ajouter); console.log(hidden_div); Upon examining the output in the console, instead of a DOM object being added to the div as intended, it shows &apo ...
I've recently created a table in Webix, and I have a column labeled "TBD" where I display a URL. My question is: how can I make this URL, 'https://pops.dra.com/TBD.php?jour=$adep&arc=$ads', clickable? while($row = mysqli_fetch_array($req ...
As an avid user of Javascript AJAX and long-polling, I am constantly seeking the best value for server response timeout. Despite scouring numerous documents, a detailed explanation for timeout continues to elude me. Some suggest 20 seconds, while others ...
Is it feasible to establish a direct two-way connection with a UDP server using javascript/HTML5 (without node.js)? While WebRTC is an option, my understanding is that it does not support sending datagrams to a specific server. I am primarily focused on c ...
I recently came across a similar project here: My current project involves animating boxes by clicking a button. While I am able to move the boxes around smoothly during animation, the issue is that the connections between them do not move along. Is there ...
Recently, I developed a vuejs application incorporating Google's material design components. I've been exploring options to customize the background color. <template> <div class="page-container"> <md-app> ...
I am in the process of extracting HTML data from a local weather channel's website in order to gather closing information for schools, businesses, and churches in my area. However, I am facing an issue as the information is housed within tables that ...
I have two divs, each containing a span. By default, the display of each span class is set to none. My goal is to toggle the display property of the span within the clicked div. If the span is already visible, I want to hide it; if it's hidden, I want ...
There is an endpoint / which may receive different get parameters for oAuth and logging in to an app. A function called queryAction has been created to handle these requests. Platforms like express can route at the path level but not the res.query level, ...
Currently, I am facing a challenge with two tables that are positioned next to each other. My goal is to append a selected row from the first table to the second table. After successfully extracting data from the selected row and converting it into an arr ...
Currently, my goal is to utilize JSPM module loader to import javascript packages from npm instead of CDN and employ an offline package loader. Now, the next step involves incorporating an importmap script in order to successfully import modules like rea ...
Is there a way to show this DIV only on an iPad screen? I've looked around on Google for solutions, but none of them seem to work. It always ends up displaying on my computer as well. Is it possible to make it show only on an iPad screen? @media only ...
I am currently working on implementing an ajax call for a dynamic dropdown box. Once the variable $place is available, it triggers an ajax call to populate the dropdown box. My goal is to pass the variable $place to listplace.php, encode it as JSON data ...
I recently encountered an issue in my Vue.js 3 app with the following code snippet in my main.js file: import { createApp } from "vue"; import App from "./App.vue"; import { firestorePlugin } from "vuefire"; const app = creat ...
I am looking to recreate the effect seen on the background image of this website , where the image gets covered by content as you scroll down. ...
Looking for help on deleting multiple items from an array and updating the state. I have selected multiple items using checkboxes, which are [5, 4, 3]. My goal is to remove all these items from the array based on their ids and then update the state accordi ...