视频播放/暂停图标的切换

最新推荐文章于 2024-07-12 16:27:40 发布

weixin_33860737

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量940

点赞数

文章标签： javascript 移动开发 ui ViewUI

原文链接：http://www.cnblogs.com/gwcyulong/p/6478723.html

版权

刚入行的码农小白努力的工作

-----------------------------

自定义：视频播放/暂停图标的切换

、（自己截图的）

<!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>

如此，就可以自定义视频开始/暂停的图标

转载于:https://www.cnblogs.com/gwcyulong/p/6478723.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33860737

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
视频播放/暂停图标的切换

刚入行的码农小白努力的工作-----------------------------自定义：视频播放/暂停图标的切换、（自己截图的）<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>test</...
复制链接

扫一扫