Удалите пробелы в HTML5 видео тег в Ionic

Question

Удалите пробелы в HTML5 видео тег в Ionic

0

У меня есть тег video в моем приложении Ionic, элемент видео добавляется после нажатия кнопки.

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

Любая идея в чем проблема?

Mikel 21 июль 2015, в 12:44

Источник

0

Вы пытались установить vertical-align:top на элемент video
Luís P. A. 21 июль 2015, в 09:51
0

Это может быть размер плаката, когда вы нажимаете плакат заменяется видео
maurycy 21 июль 2015, в 09:58

Теги:

ionic-framework

angularjs

css

cordova

html5-video

1 ответ

Ещё вопросы

Вы пытались установить vertical-align:top на элемент video
Это может быть размер плаката, когда вы нажимаете плакат заменяется видео

Mikel · Answer 1 · 2015-07-21T10-53-00.000Z

После многих исследований я нашел решение.

Я начинаю понимать, что произошло после того, как прочитал HTML 5 Video stretch post:

Видеоконтент должен отображаться внутри области воспроизведения элемента таким образом, чтобы видеоконтент показывался по центру в области воспроизведения с максимально возможным размером, который полностью помещается внутри него, при этом сохраняется соотношение сторон видеоконтента. Таким образом, если соотношение сторон области воспроизведения не соответствует соотношению сторон видео, видео будет отображаться в виде почтового ящика или столбца. Области области воспроизведения элементов, которые не содержат видео, ничего не представляют.

Затем в книгах Google, которые я нашел и объяснил, как работает ширина видео, книга называется "Полное руководство к видео HTML5"

Если ширина и высота не совпадают с форматом изображения, это не работает. Установка ширины 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);
};

Я не вижу его прямолинейным... если кто-то знает другое решение, дайте мне знать!