移动端视频的处理鬼方法

移动端视频提供的标签video是视频播放的功能。在安卓手机中一切都是正常的,只是ios貌似有点问题,就是全屏视频时返回原始页面的时候小视频框会跳一下才能原位,优化方案(这个肯定不是人脑能想出的)
html:(布局格式)

布局

js(因为只有ios是有问题的所以要判断一下,安卓正常处理就好了)

 $('#video img').on('click', function(){
            var $this = $(this).parent();
            var videoSrc = $this.attr('data-video-src');
            if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
                if (!$this.find('video').length) {
                    var video = $('');
                    $this.append(video);
                }
                $this.find('video')[0].play();
            } else {
                var video = $('');
                $this.empty().append(video);
                video[0].play();
            }
        });

css(成败这个样式是关键)

.video-ios {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0px !important;
  height: 0px;
}


你可能感兴趣的:(移动端视频的处理鬼方法)