HTML5ビデオタグの水平統合

Question

私はangular.jsを使用してダッシュボードを開発しており、複数のビデオが含まれています。ダッシュボードを使用すると、各動画のサイズ（小、中、大）を選択できます。私はビデオを一元化したいし、severalsオプション（ここに含まれています：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%; 
}