html - IE および iOS で html5 ビデオの黒いバーの色を変更できない

Question

スケーリングの境界線が背景に溶け込むように、レスポンシブデザインでビデオを表示しようとしています。

ビデオ要素のサイズが指定された範囲内で変化することを許可します。その結果、再生中のビデオが実際の html 要素を埋めていない場合、ビデオの周りに黒いパディングバーが表示されます。

css background プロパティを使用して、Chrome、FireFox、Opera で表示されるバーの色を変更できました。Internet Explorer または iOS (iPad) で表示される色を変更する方法がわかりません。

誰でもこれで私を助けることができますか?

要求に応じてフィドル: http://jsfiddle.net/swaEe/

html:

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

css:

video {
    width: 500px;
    background: blue;
}

*** _編集_ * **

これはより良いフィドルです: http://jsfiddle.net/swaEe/40/

ビデオの再生は、コンテナー内で垂直方向および水平方向の中央に留まる必要があります。「バー」を透明にするか、コンテナと同じ色（この場合は赤...）にしたい。

<div style="width:200px; height:600px; background-color:red;">
    <video width="100%" height="100%" style="background-color:red;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
    <video width="100%" height="100%" style="background-color:red;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>

score 2 · Accepted Answer

解決しました！ライブ jsbin へのリンク: http://jsbin.com/AVOZoXu/9
説明に従って jsbin を編集: http://jsbin.com/AVOZoXu/9/edit
IE でテストできませんでしたが、動作するはずです。魔法のように。

iOSには本当の問題があります。プレーヤーに背景色を設定することはできず、 Safari Developer Libraryで確認できるように、デフォルトのプレーヤーサイズは 150x300 です。

動画のネイティブサイズは動画のメタデータが読み込まれるまでわからないため、 iOS を実行しているデバイスでは、高さや幅が指定されていない場合、デフォルトの高さと幅150 x 300が割り当てられます。現在、ムービーの読み込み時にデフォルトの高さと幅は変更されませんが、[...]

したがって、黒いバーを削除するには、デフォルトのサイズを変更して、できるだけ早くムービーのサイズに合わせる必要があります。はい、JavaScript が必要です。

// set height and width to native values
function naturalSize() {
  var myVideo = document.getElementById('theVideo');
  var myContent = document.getElementById('content');
  myVideo.height = myVideo.videoHeight;
  myVideo.width = myVideo.videoWidth;

  //if the video is bigger than the container it'll fit
  ratio = myVideo.videoWidth/myVideo.videoHeight;
  if(parseInt(myContent.offsetWidth,10)<myVideo.videoWidth){
   myVideo.height = myVideo.videoHeight*parseInt(myContent.offsetWidth,10)/myVideo.videoWidth;
     myVideo.width=parseInt(myContent.offsetWidth,10); 
  }
}
// register listener function on metadata load
function myAddListener(){
  var myVideo = document.getElementById('theVideo');
  myVideo.addEventListener('loadedmetadata', naturalSize, false);
}

window.onload = myAddListener();

これで、メタデータが読み込まれるとすぐに、ビデオのビデオプレーヤーサイズが取得されます。ビデオには黒いバーがなくなったので、テキストとして中央に配置する必要がありました.

おー！そして、あなたはそれをレスポンシブにしたかったですか？#content比率とコンテナの幅をチェックし、元のビデオの高さよりも小さい高さをビデオに設定するため、設定した幅は関係ありません。幅naturalSize()が小さい元のビデオの高さに黒いバーが表示されるのを防ぎます。

幅はmax-width:100%;プロパティで制御されるため、手動で変更する必要はありません。

#content{
  background:blue;
  width:50%;
  height:auto;
  text-align:center;
}
video {
  max-width:100%;
  vertical-align:top;
}

ビデオは再生を開始するまでサイズ変更されませんが、iOS でやりたいことを実行するのに最も近いのはビデオです。とにかく、それは素晴らしい解決策だと思います。お役に立てば幸いです。

score 1 · Accepted Answer

質問が出されてからすでに時間が経過していることは承知していますが、この問題の回避策を実装する必要があったため、共有したいと思います。この問題は、ビデオが任意のサイズまたはアスペクト比である可能性があるという点で、OP のものと似ていました。

サイズがまったく指定されていない内に HTML<video>要素が含まれている場合<div>、コンテナは自動的にビデオの周囲に収まり、黒い「パディング」はありません。

これを知っていれば、loadedmetadataイベントを利用できます。実際には計算にビデオのサイズは必要ありませんが、コンテナーのサイズが変更されるように、このデータが読み込まれるのを待つ必要があります。それが発生するとすぐに、コンテナーの位置を水平方向および/または垂直方向に調整できます。

IE11でテストされたフィドルは次のとおりです。

http://jsfiddle.net/j6Lnz31y/

ソース (フィドルが利用できなくなった場合):

<div class="whatever-container" style="width:200px; height:600px; background-color:red;">
        <div class="video-container">
            <video controls>
              <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
              <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
            Your browser does not support the video tag.
            </video>
        </div>
    </div>
    <br />


    <div class="whatever-container" style="width:600px; height:200px; background-color:red;">
        <div class="video-container">
            <video controls>
              <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
              <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>
        </div>
    </div>

.whatever-container {
    position: relative;
}

.video-container {
    position: absolute;
    opacity: 0;
}

.video-container > video {
    position: relative;
    width: 100%;
    height: 100%;
}

/*
 * After the video dimentions have been acquired, its container will have
 * resized and we can adjust its position as necessary.
 */
function adjustVideoContainer() {
    console.log("video metadata loaded");
    var videoContainer = $(this).parent().filter(".video-container");

    if (videoContainer.length === 0) {
        //abort
        console.log(
            "adjustVideoContainer() was called but no it wasn't "+
            "wrapped in an appropriate container"
        );
        return;
    }
    var containerParent = videoContainer.parent();
    var parentWidth     = containerParent.width(),
        parentHeight    = containerParent.height(),
        containerWidth  = videoContainer.width(),
        containerHeight = videoContainer.height();

    if (containerWidth < parentWidth) {
        videoContainer.css(
            "left",
            (parentWidth - containerWidth) / 2
        );
    }

    if (containerHeight < parentHeight) {
        videoContainer.css(
            "top",
            (parentHeight - containerHeight) / 2
        );
    }
    else {
        videoContainer.height("100%");
    }
    videoContainer.css("opacity", 1);

}

$("video").on("loadedmetadata", adjustVideoContainer);

score 0 · Accepted Answer

インラインの幅/高さ属性を削除します。CSSでレイアウトをコントロールしたい！
身長には魔法のキーワード「auto」を使用してください
動画と同じ縦横比のポスターも必ず使用してください

ここにフィドルがあります：http://jsfiddle.net/swaEe/13/

video {
    width: 500px;
    min-width: 200px;
    max-width: 100%;
    height: auto;
}

score 0 · Accepted Answer

JSなしで解決：

<div style="display: table-cell; vertical-align: middle; width:200px; height:600px; background-color:red;">
<video width="100%" style="background-color:red;" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
    <video height="100%" style="background-color:red; display: block; width: auto; margin: 0 auto;" controls>
      <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
</div>

基本的に、どちらの場合もビデオの高さまたは幅の設定を削除します (細い div では高さを削除し、短い div では幅を削除しました)。次に、ビデオ要素を中央に配置します（display:blockで水平に配置し、次にマージントリック、display:table-cellで垂直に配置します。おそらくそれを行うより良い方法があります）。

html - IE および iOS で html5 ビデオの黒いバーの色を変更できない

6 に答える 6

Related

Reference