<div class="picture-wrap">
  
  <picture>

    <source srcset="https://csstricks-images.s3.amazonaws.com/board.png" media="(prefers-reduced-motion: reduce)"></source>

    <source type="video/mp4" srcset="https://csstricks-images.s3.amazonaws.com/board.mp4">

    <img srcset="https://csstricks-images.s3.amazonaws.com/board.gif" alt="brick wall" />
  
  </picture>

  <button class="animate-button">Animate</button>

</div>

picture {
  position: relative;
}

.picture-wrap {
  position: relative;
}
.picture-wrap .animate-button {
  position: absolute;
  top: 10px;
  left: 10px;
  display: none;
  z-index: 2000;
}
@media (prefers-reduced-motion: reduce) {
  .picture-wrap .animate-button {
    display: block;
  }
}

let button = document.querySelector(".animate-button");

button.addEventListener("click", () => {
  const parent = button.closest(".picture-wrap");
  const picture = parent.querySelector("picture");
  picture.querySelector("source[media]").remove();
});