您当前的位置:首页 > 网络技术

实现HTML5 Video元素中间的大播放按钮

时间:2026-01-09 15:52:44    来源:    作者:
                                                 <video width=100%  height=100%  poster="/images/gongsi.jpg"  controls="controls" >
                                                    <source src="/images/gongsi.mp4" type="video/mp4"></source>
                                                </video>
                                                <button class="play-button"  id="myButton">
                                                        <i class="iconfont icon-play" style="font-size:60px;color:#fff;"></i>
                                                </button>
                                                <style>
                                                    .play-button{
                                                    position:absolute;
                                                    top:50%;
                                                    left:50%;
                                                    transform:translate(-50%,-50%);
                                                    z-index:99;
                                                    border-radius:50%;
                                                    border:none;
                                                    cursor:pointer;
                                                    background:none;
                                                    }                                                
                                                </style> 
                                                <script>
                                                    const video = document.querySelector('video');
                                                    const playButton = document.querySelector('.play-button');
                                                    playButton.addEventListener('click',() => {
                                                        if(video.paused){
                                                            video.play();
                                                        }else{
                                                            video.pause();
                                                        }
                                                    });
                                                    document.getElementById('myButton').addEventListener('click', function() {this.style.display = 'none';});
                                                </script>
推荐资讯