刪除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視頻標籤上的空白

回答

相關問題