Question

我的项目可能需要一点帮助我试图创建一个基于gif图像的播放按钮。如何使它如此gif将作为播放功能javascript的功能？我也想这样做，当我点击gif图像时它会开始播放动画而不是gif自动播放。

Answer 1

您可以使用以下代码段来制作自定义播放按钮/元素：

<button id='playVid'>Play</button>

document.getElementById('playVid').onclick = function (){
    document.getElementById('video').play();
};

在w3schools.com上查看此信息：https://www.w3schools.com/tags/av_met_play.asp

Answer 2

你可以简单地

使用css＆amp;下面的javascripts，但是你需要使用两种不同类型的图片，第一种是gif图像，另一种是常规的img类型，例如jpeg或png文件。：

如果你不知道你是否使用了Chrome浏览器，只需右键单击你的项目页面然后只需单击inspect，然后选择inspect元素，将其拖到元素中，这样你就可以获得特定的css id。

<style>


#u11246{
visibility: hidden;
}
</style>

试试这个javascript如下：

<script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
document.getElementById("u11236").style.visibility = "hidden";
document.getElementById("u11246").style.visibility = "inherit";
  }

                                function stop(){
       var audio = document.getElementById("audio");
       audio.pause();
document.getElementById("u11236").style.visibility = "inherit";
document.getElementById("u11246").style.visibility = "hidden";
                 }
   </script>

并使用以下代码作为音频。

<audio id="audio" src="http://m4a-64.cdn107.com/01/65/45/0165451642.m4a" ></audio>

祝你好运！

使用gif作为音频的暂停/播放按钮

2 个答案: