通过video实现视频暂停时出现图片

最新推荐文章于 2023-11-10 16:31:44 发布

风过留痕丶

最新推荐文章于 2023-11-10 16:31:44 发布

阅读量1w

点赞数 1

分类专栏： web前端文章标签： html javascript html5

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

由于有video标签，兼容到ie9，ie9一下视频无法正常播放，下面贴出代码

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
    <script src="jquery1-11.js"></script>
    <style>
        img{
            position: absolute;
            top:40px;
            left:750px;
        }
    </style>
    <script type="text/javascript">
        window.οnlοad=function(){
            var myVideo=document.getElementById("video1");
            function eventTester(e){
                myVideo.addEventListener(e,function(){

                    if(e=='pause'){
                        $('img').show();
                    }else{
                        $('img').hide();
                    }

                });
            }
            eventTester("pause");
            eventTester("play");
        }




    </script>
</head>
<body>

<div style="text-align:center;">
    <br />
    <video id="video1" width="420" style="margin-top:15px;" autoplay="autoplay" controls="controls" loop="loop">
        <source src="http://d.liyi.in/incobook.mp4" type="video/mp4" />
        Your browser does not support HTML5 video.
    </video>
</div>
<img src="1.jpg" alt="" width='420' height="206" style="display:block;z-index:9999" >

</body>
</html>