美文网首页
移动端视频的处理鬼方法

移动端视频的处理鬼方法

作者: yyshang | 来源:发表于2017-03-20 18:41 被阅读14次

    移动端视频提供的标签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 = $('<video controls="controls" class="video-ios"><source src="' + videoSrc + '" type="video/mp4"></video>');
                        $this.append(video);
                    }
                    $this.find('video')[0].play();
                } else {
                    var video = $('<video controls="controls"><source src="' + videoSrc + '" type="video/mp4"></video>');
                    $this.empty().append(video);
                    video[0].play();
                }
            });
    

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

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

    相关文章

      网友评论

          本文标题:移动端视频的处理鬼方法

          本文链接:https://www.haomeiwen.com/subject/kjeinttx.html