简易HTML5 video点击元素弹框播放视频的jQuery代码

很简单的点击指定元素弹出层播放video视频的代码，如果不喜欢很炫酷的弹框视频效果可以一用。

CSS代码：

.popup{position:fixed;left:0;top:0;width:100%;height:100%;overflow-y:auto;background-color:rgba(0,0,0,0.75);z-index:10;-webkit-overflow-scrolling:touch;display:none;}
.popup .video{width:100%;min-height:100%;justify-content:center;align-items:center;padding:1vh 0;display: flex;}
.popup .info{background-color:#fff;}
.popup video{display:block;width:auto;max-width:90vw;height:auto;max-height:90vh;}

提示：这是弹出层的样式，可以根据自己的喜好调整。

HTML代码：

<a data="vplay" href="video.mp4">播放视频</a>

jQuery代码：

var _popuphtml = '<div class="popup"><div class="video"></div></div>';
$('a[data="vplay"]').click(function(e){
    e.preventDefault();
    var _videourl = $(this).attr('href');       
    var _videohtml = '<video src="'+_videourl+'" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" x5-video-orientation="portraint" controls autoplay></video>';
    var _popup = $('.popup');
    if(_popup.length == 0){
        $('body').append(_popuphtml);
        var _popup = $('.popup');
    }
    _popup.find('.video').html(_videohtml);
    _popup.stop().fadeIn('fast',function(){
        $(this).find('video').trigger('play');
    });
    _popup.click(function(e){
        if($(e.target).closest($(this).find('video')).length === 0){
        	$(this).find('video').trigger('pause');
            $(this).stop().fadeOut(50,function(){
            	$(this).remove();
            });
        }
    });
});