HTML5视频标签的水平集中

Question

我正在使用angular.js开发一个仪表板，它包含几个视频。仪表板允许用户选择每个视频应该在哪个尺寸（小，中，大）。我喜欢集中视频，并尝试了几个选项（包括在这里：How to center HTML5 Videos?），但不能让它们中的任何一个工作......有人可以帮助我吗？

JS：

$scope.videos = { videosArray: budilVideoArray(), colsize: { small: 'col-md-4', medium: 'col-md-6', large: 'col-md-12'}}

function buildVideoArray() {
    return [
        {
        name: 'video1',
        path: 'src/path/to/video/video1.mp4',
        size: 'col-md-6'
    },
    {
        name: 'video2',
      path: 'src/path/to/video/video2.mp4',
      size: 'col-md-6'
    }
    ]
}

$scope.resize = function (video, size) {
    video.size = $scope.vidos.colsize[size];
}

HTML：

<div ng-repeat="video in videos.videosArray">
  <div class="row">
    <input type="radio" name="radioButton-{{video.name}}" ng-click="resize(video, 'small')"> small
    <input type="radio" name="radioButton-{{video.name}}" ng-click="resize(video, 'medium')"> medium 
    <input type="radio" name="radioButton-{{video.name}}" ng-click="resize(video, 'large')"> large 
  </div>
  <div class="row">
    <div ng-class="video.size">
      <video class="video_attr" id="{{video.name}}">
        <source src="{{video.path}}" type="video/mp4"> 
      </video>
    </div>
  </div>
</div>

CSS：

.video_attr {
  width: 100%;
}

Answer 1

一段时间后找到我的解决方案。这是它：

HTML：

<div class="row row-center">
    <div ng-repeat="video in videos.videosArray" class="{{video.size}} col-center">
        <video class="video_attr" id="{{video.name}}" src="{{video.path}}" preload="auto"> </video> 
    </div>
</div>

CSS：

.row-center {
    text-align:center;
}
.col-center {
    display:inline-block;
    float:none;
}
.video_attr {
    width: 100%;
}