video自动全屏解决办法-canvas

video自动撑满父级元素

最近有个需求，将视频充满，并可以随父元素缩放

先说说试过哪些方法：
  1：css3：object-fit: fill;（可惜ie不支持）
  2：使用css控制，借鉴的其他大神的，但是对于我，竟然一点都不好使，忧伤。实现如下代码可见：

/* 父元素 */
.videoWrap{
  position: relative;
  height: 0;
  width: 80%;
  padding-bottom: 45%;   //需要计算得到（ (video的高 / video的宽) * 父级的width ,使用的是百分比 ）
}
.videoWrap video{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

以上方式都无法实现

而我要实现的最终效果如下：

左侧昆虫为视频，而且视频大小不做控制

是通过canvas定时画图实现的

    var self = this;
    this.vm = new Vue({
                el: '#loginconfig',
                data: {
                    formdata: {
                        video: {
                            url: '25a39632de654947bcb4ec936f78489c',
                            name: 'mov.mp4'
                        }
                    },
                    updataService: 'http://11.11.180.217:6004'
                },
                computed: {}
                },
                mounted: function () {
                    this.$refs.video.controls = false;
                    var v = this.$refs.video;
                    var c = this.$refs.canvas;
                    var ctx = c.getContext('2d');
                    this.$refs.canvas.width = this.$refs.videoWrap.offsetWidth;
                    this.$refs.canvas.height = this.$refs.videoWrap.offsetHeight;
                    var cwidth = this.$refs.canvas.offsetWidth;
                    var cheight = this.$refs.canvas.offsetHeight;

                    // 初始化定时器
                    self.timer = null;
                    // 每0.02秒画一张图片
                    v.addEventListener('play', function () {
                        self.timer = window.setInterval(function () {
                            ctx.drawImage(v, 0, 0, cwidth, cheight);
                        }, 20);
                    }, false);
                    v.addEventListener('ended', function () {
                        clearInterval(self.timer);
                    }, false);
                },
                methods: {}，
                ,
                destroyed: function () {
                    clearInterval(self.timer);
                }
   });