使用自托管视频作为BG.我可以通过点击视频来控制播放/暂停，就像嵌入的YouTube视频一样

Question

我正在制作一个单页WordPress网站，并使用松饼生成器进行布局。我正在使用它的功能，我可以设置一个自托管视频作为BG。但是，没有选项来控制视频的播放/暂停。我需要帮助添加一些自定义JS，使视频播放/暂停点击。可能吗?

链接:http://flipped.in/AXSuede/

视频BG是页面的第一部分

Answer 1

处理点击事件时，使用:

var myVideo = document.querySelector('#myVideo'); //must be a MediaElement like <video> or <audio>

然后，暂停或播放:

myVideo.play();
myVideo.pause();

要停止它，你必须手动将光标设置到开头:

myVideo.pause();
myVideo.currentTime = 0; //Set the cursor to 0 seconds

Answer 2

添加jquery代码

<script src="jquery-1.11.3.min.js"></script>
<script>
    (function($) {
        $('video').addClass('is_playing');
        $(document).on('click', '.section_video', function(){
            var $video = $(this).find('video');
            if($video.hasClass('is_playing')){
                $video.get(0).pause();
                $video.removeClass('is_playing').addClass('is_paused');
            } else {
                $video.removeClass('is_paused').addClass('is_playing')
                $video.get(0).play();
            }
        });
    })(jQuery);
<script>

没有尝试，但应该可以。

问候提摩太

Answer 3

由于您的video元素具有更高的z-index，因此单击事件将被阻止。

检查点击事件是否发生在视频元素上的一个解决方案是获取其getBoundingClientRect()值并将其与事件的clientX和clientY属性进行比较。

document.addEventListener('click', function(e){
    var vid = document.querySelector('video');
    // get the video position in viewport
    var rect = vid.getBoundingClientRect();
    // Did we clicked over the video ?
    if(e.clientY > rect.top && e.clientY < rect.top + rect.height)
       // is our video already paused?
       vid.paused? vid.play(): vid.pause();
}, false);