重新加载视频onclick并在播放时将图像添加到视频中像youtube一样暂停

Question

当我点击视频图标显示视频时，视频将显示屏幕并自动播放，用户可以点击视频屏幕进行播放和暂停。

我现在面临的问题是：

1. 如果我在视频中添加自动播放功能，即使我没有点击显示该视频，视频也会开始加载。
2. 点击播放/暂停视频并点击视频图标再次显示后，视频将从播放/暂停时开始，但我希望它再次重新加载，这意味着每次用户点击显示视频，它将从0开始。
3. 当用户点击暂停时，视频将显示暂停图像，就像youtube一样。

这是小提琴，我不确定为什么视频图标不适合小提琴，但它在我的网站上运作良好。

https://jsfiddle.net/7uxvc1p0/3/

这是我的剧本，

function showVideo(id) {    
    $('#divVideo' + id).fadeIn();
    $('#divVideo' + id).addClass('selectedVideo');
    $('#' + id).addClass('selectedVideoTitle');
    video.load();
    video.currentTime = 0;
    video.autoplay = true;
};

function clsBtn() {
    $('.videowrapper').fadeOut();
    $(".selectedVideo").removeClass('selectedVideo');
    $('.selectedVideoTitle').removeClass('selectedVideoTitle');
};

$("video").click(function(e){
    // get click position 
    var clickY = (e.pageY - $(this).offset().top);
    var height = parseFloat( $(this).height() );

    // avoids interference with controls
    if(clickY > 0.82*height) return;
    // toggles play / pause
    this.paused ? this.play(function(){
        $(".videopause").removeClass("videopausedisplay");
    }) : this.pause(function(){
        $(".videopause").addClass("videopausedisplay");
    });
});