通過video實現視訊暫停時出現圖片

風過留痕丶發表於2014-06-23
IDE
由於有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.onload=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>

相關文章