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

我的Ionic应用程序中有一个video标签，点击按钮后添加视频元素。删除Ionic中html5视频标签上的空白

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

视频添加成功，但也有底部和顶部的白色空间/条：

enter image description here

后，点击播放按钮，空间已不再存在：

enter image description here

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

enter image description here

这可能是保证金Ø填充，但是我将它们设置为0：

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

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

任何想法是什么问题？

来源

2015-07-21 Mikel

您是否尝试过设置'vertical-align：top'on' video'element –

这可能是海报的大小，当您点击海报被替换为视频 – maurycy

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

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

视频内容要元素的播放区域内呈现使得显示的视频内容在集中在回放区域的最大可能大小适合完全在其中，视频内容的宽高比被保留。因此，如果播放区域的比例与视频的宽高比不匹配，则视频将显示为信箱或邮筒。区域范围元素的播放区域不包含视频代表什么都没有。

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

我没有看到它简单的......如果有人知道另一种解决办法，让我知道！

来源

2015-07-21 13:06:39 Mikel

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

回答

相关问题