Search code examples
javascriptonloadanimated-gifautoplay

Disable GIF autoplay

I'm looking for a way to automaticly disable autoplay for the animated gifs posted on my little chat-site (php-based) I think I'm getting close, but I'm all out of ideas with this script:

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

Objective: Prevent posted GIF's (animated) from automaticly starting onload. Thanks

Update

Able to make it work with jquery but-> Trying to figure out a cleaner way to do this, that suggestion about mouseover-events got me thinking, perhaps something like this would be possible?

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

I'm on thin ice now, not even sure that it's possible to control GIFs like this with HTML-tags

Solution

  • I don't know if there is native way of stopping, but what you can do is just put static png/jpeg picture which is starting point of your gif picture. Then when you hit play, replace that static image with animated gif one.

    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: the code was not tested... this is for just showing a pseudo code.