删除Ionic中html5视频标签上的空白区域

Question

我的Ionic应用中有video标签，点击按钮后添加了视频元素。

function addVideo(videoId){
        var path = $scope.getVideo(videoId).newVideoLocation.nativeURL;
        path = $sce.trustAsResourceUrl(path);

        var container = document.getElementById('videoContainer' + videoId);
        var video =  document.createElement('video');

        video.src = path;
        video.setAttribute('id', 'video' + videoId);
        video.setAttribute('poster', $scope.getVideo(videoId).thumbnailPath);
        video.setAttribute('width', '100%');

        container.appendChild(video);
    };

视频添加成功但有底部和顶部空格/条：

单击播放按钮后，空格不再存在：

我将边框设置为所有元素以了解发生了什么。蓝色边框是视频标记：

它可能是边距填充但是我将它们设置为0：

* {
    border: 1px solid red !important;
  }

  video {
    border: 2px solid blue !important;
    margin: 0;
    padding: 0;
  }

知道这是什么问题吗？

Answer 1

经过大量研究后，我找到了解决方案。

我开始了解阅读HTML 5 Video stretch post之后发生的事情：

  

视频内容应该在元素的播放区域内呈现   使得视频内容以回放区域为中心显示   最大可能的尺寸，完全适合它，与   视频内容的宽高比得以保留。因此，如果方面   播放区域的比例与宽高比不匹配   视频，视频将显示为letterboxed或pillarboxed。的领域   元素的播放区域不包含视频表示   什么都没有。

然后在Google图书I found and explanation how works video width中，该书名为The Definitive Guide to HTML5 Video

如果宽度和高度与原始视频的宽高比不同，则无法正常工作。将100％设置为宽度并不意味着您希望视频适合容器。所以我决定计算容器的宽度和高度，并设置为video元素：

function addVideo(videoId){
    var path = getTrustUrl($scope.getVideo(videoId).newVideoLocation.nativeURL);

    // Create container element and get padding 
    var container = document.getElementById('videoContainer' + videoId);
    var paddingLeft = window.getComputedStyle(container, null).getPropertyValue('padding-left');
    var paddingRight = window.getComputedStyle(container, null).getPropertyValue('padding-right');

    // Get only numeric part and parse to integer
    paddingLeft = parseInt(paddingLeft.slice(0,-2));
    paddingRight = parseInt(paddingRight.slice(0,-2));

    //Get internal width of container and calculate height
    var width = container.offsetWidth - paddingLeft - paddingRight;
    var height = (width * 9 ) / 16; // TODO, if not 16:9 error

    // Create video element and set attributes
    var video =  document.createElement('video');
    video.src = path;
    video.setAttribute('id', 'video' + videoId);
    video.setAttribute('poster', $scope.getVideo(videoId).thumbnailPath);
    video.setAttribute('width', width);
    video.setAttribute('height', height);

    // Append video to container
    container.appendChild(video);
};

我没有看到它直截了当...如果有人知道另一种解决方案让我知道！