覆盖video上的播放按钮

我目前有一个播放和暂停video的剧本。 我想要做的是在开始时和暂停时在video上叠加播放按钮，并且当video再次播放时同一按钮消失。

任何建议，将不胜感激。

HTML

CSS

 .video { width: 50%; border: 1px solid black; } 

JS

 // Plays and pauses video on click $('.video').click(function(){this.paused?this.play():this.pause();}); 

Answer 1

如果你想要一个可以编辑的内容的实际叠加，也许这适合你： https ： //jsfiddle.net/svArtist/9ewogtwL/

 $('.video').parent().click(function () { if($(this).children(".video").get(0).paused){ $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut(); }else{ $(this).children(".video").get(0).pause(); $(this).children(".playpause").fadeIn(); } }); 

 .video { width: 100%; border: 1px solid black; } .wrapper{ display:table; width:auto; position:relative; width:50%; } .playpause { background-image:url(http://sofzh.miximages.com/javascript/media_play_pause_resume.png); background-repeat:no-repeat; width:50%; height:50%; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center; } 

Answer 2

我想我只需要解释一下。

当.video被点击并且video暂停时 – >
.video{visibility: hidden;}
当.video被点击并且video正在运行时 – >
.video{visibility: visible;}

如果您想要更多代码，请发表评论

Answer 3

单击切换也可以正常工作……它将减少jQuery代码。 .toggle()