css - 在 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);
    };

视频添加成功但底部和顶部有空白/条:

点击播放按钮后空格不再存在:

我为所有元素设置边框以了解发生了什么。蓝色边框为视频标签:

它可能是 margin o padding 但我将它们设置为 0:

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

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

知道问题出在哪里吗？

Answer 1

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

阅读 HTML 5 Video stretch post 后我开始理解发生了什么:

Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.

然后在谷歌图书中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);
};

我不认为它是直截了当的...如果有人知道其他解决方案，请告诉我!