视频播放/暂停图标的切换
Posted 嘴里坚持着逞强,眼里的泪在投降
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了视频播放/暂停图标的切换相关的知识,希望对你有一定的参考价值。
刚入行的码农小白努力的工作
-----------------------------
自定义:视频播放/暂停图标的切换
、(自己截图的)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div style="width: 20px"> <a id="videoPlay"> <img id="picChange1" src="WechatIMG2.jpeg" style="width: 100%;"> <img id="picChange2" src="WechatIMG3.jpeg" style="width: 100%;display: none"> </a> </div> <video id="video" width="500"> <source src="Sea.mp4"> </video> <script> var video = document.getElementById("video"); $("#videoPlay").bind("click",function () { bofang(); }); function bofang() { if (video.paused){ video.play(); document.getElementById("picChange2").style.display = "none"; document.getElementById("picChange1").style.display = "block"; } else { video.pause(); document.getElementById("picChange1").style.display = "none"; document.getElementById("picChange2").style.display = "block"; } } </script> </body> </html>
如此,就可以自定义视频开始/暂停的图标
以上是关于视频播放/暂停图标的切换的主要内容,如果未能解决你的问题,请参考以下文章
单击视频时,如何使用 Javascript 切换多个视频的播放/暂停?