使用HTML5视频和Javascript的自定义控件的视频

Question

我正在尝试创建一个没有默认控件的HTML5视频播放器,只需单击视频(或覆盖div)即可播放/暂停.我想完全隐藏默认控件.我希望用户只能通过点击视频暂停/播放.这可能吗？我最初的策略是将透明div叠加在可用作我的播放/暂停按钮的元素上方.下面是我开始的HTML和javascript,但需要一些帮助.感谢大家!

<!-- Video -->
<div style="height:980px;height:540px;">
    <div style="z-index:100;position:absolute;">
        <video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
            <source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
        </video>
    </div>
    <div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video --> 




    <!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
    var videoEl = $('#myVideo');
    playPauseBtn = $('#imgPoster');

    playPauseBtn.bind('click', function () {
        if (videoEl.paused) {
            videoEl.play();
        } else {
            videoEl.pause();
        }
    });

    videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->