Stop GIFs from playing automatically

Question

Stop GIFs from playing automatically

Looking for a solution to disable autoplay for animated gifs on my chat-site (php-based). Tried script below but out of ideas:

<script>
myVid=document.getElementsByTagName('img');
function disableAutoplay()
  { 
  myVid.autoplay=false;
  myVid.load();
  } 
</script> 
</head>
<body onload="disableAutoplay();">

Goal: Stop GIFs from auto-playing on load. Thanks

Update

Made it work with jquery, but looking for cleaner solution-> Thinking about using mouseover-events, any suggestions?

        $com  = $_POST['txt'];
        $count = strlen($com);
        $com = stripslashes($com);
        $alter1 = array(".gif");
        $com = str_ireplace($alter1, ".gif autoplay=false onmouseover **MAKE IT PLAY**", $com);

Not sure if controlling GIFs like this with HTML-tags is possible.

javascript onload animated-gif autoplay

Answer 1

Answer №1

One method to potentially stop a gif from playing is by replacing it with a static image until the user clicks play. By initially displaying a static png or jpeg image, you can then switch it out for an animated gif when needed.

Update:

<script>
window.document.onload = function(e){ 
   var myVid=document.getElementsByTagName('img');
   var gifPath=myVid.src;
   myVid.src='/static/image/path.png'; 
   // now you can use your gif depending on business logic
}    
</script>

PS: Please note that this code has not been tested and is intended as pseudo code demonstration.

Answer 2

One method to potentially stop a gif from playing is by replacing it with a static image until the user clicks play. By initially displaying a static png or jpeg image, you can then switch it out for an animated gif when needed.

Update:

<script>
window.document.onload = function(e){ 
   var myVid=document.getElementsByTagName('img');
   var gifPath=myVid.src;
   myVid.src='/static/image/path.png'; 
   // now you can use your gif depending on business logic
}    
</script>

PS: Please note that this code has not been tested and is intended as pseudo code demonstration.

Stop GIFs from playing automatically

Answer №1

Similar questions

Using multiple jQuery dialogs on index.php

Issues with the count up functionality in jQuery

What could be causing render_template to fail when attempting to update the same parameters more than once?

Guide to illustrating the connections between origin and destination nations utilizing IP addresses

Create a dynamic table using an array in jQuery

Access another page by clicking on a link within an HTML document

Building a multilingual website using AngularJS UI-Router

Integrating an API with a Discord bot using an embedded link in Discord.js

CFGRID Binding Issue: Element Not Located in CF11 Compared to CF2018

Select objects from an array that are contained within another array of objects

Utilizing PHP and AJAX to Extract Information from a MySQL Database

Unveil Information with Underscore JS

I keep encountering an Uncaught TypeError when trying to read the property 'options' of null, despite having the element ID properly defined

How to Convert Python Lists into JavaScript?

The onclick function fails to function properly following an Ajax reload of the <div> element

Create a personalized and distinct name following the submission of data into multiple text fields either through Nuxt/Vue or by utilizing pure JavaScript

Achieving success seems to be out of reach

Divide the promised variable into separate named variables

Creating a multi-dimensional array in order to store multiple sets of data

How do I set up a timing mechanism in a VSCode extension to automatically clear error messages after a specified duration?