web-dev-qa-db-ja.com

ブートストラップ3 - レスポンシブmp4ビデオ

私はブートストラップサイトで良い解決策を見つけようとしましたが、まだ答えが得られませんでした。私はこれに苦しんでいるのは私だけではないと思いますが、私を助けてくれるものは何も見つかりませんでした。

私は自分のウェブサイトにmp4ビデオを埋め込もうとしています。問題は、iframeタグを使用すると自動再生とループを使用できないことです。そのため、私はビデオタグ（または自動再生とループをサポートする何か他のもの）でそれを解決したいと思います。その後、私は自分のビデオをオブジェクトタグで反応させようとしましたが、これはうまくいきませんでした。私はあなたの下に見ることができます（あなたを見るために）私のコードにそれを入れても：

<div align="center">
   <object class="embed-responsive-item">
     <video autoplay loop >
       <source src="file.mp4" />
     </video>
   </object>
 </div>

私はあなたの誰かが私がこれを直すのを手伝うことができると思います。

twitter-bootstrapvideotwitter-bootstrap-3responsive-designmp4
54
BRsmover

それはあなたがあなたのサイトにビデオを埋め込むことを望んでいるというのが私の理解です。

  • レスポンシブです
  • 自動再生とループの両方を許可
  • ブートストラップを使用

これ Demo Here はまさにそれをします。 説明はこちら に従ってobject/embed/iframeタグの外側に別の埋め込みクラスを配置する必要がありますが、objectタグの代わりにvideoタグを使用することもできます。指定されています。

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
</div>
114
Schybo

ビデオタグにclass = "img-responding"を追加するだけです。私は現在のプロジェクトでこれをやっています、そしてそれはうまくいきます。何でも包む必要はありません。

<video class="img-responsive" src="file.mp4" autoplay loop/>
15
Allan Clayton

そのコードを使用すると、フルコントロールのレスポンシブビデオプレーヤーが得られます

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" width="640" height="480" src="https://www.youtube-nocookie.com/embed/Lw_e0vF1IB4" frameborder="0" allowfullscreen></iframe>
</div>
2
Zama Sparlay

これは私のために働いた：

<video src="file.mp4" controls style="max-width:100%; height:auto"></video>

2
Hein van Dyke

ページ上の複数のビデオに関するヒント：ChromeまたはFirefoxでのmp4再生がない（IEでは正常に再生される）という問題を、モーダルで16個のビデオ（ブートストラップ3）が含まれるページで解決しました。同じです。 25fpsで6本、29.97fpsで12本... 25fpsのバージョンにすべてレンダリングした後、すべてのブラウザですべてがスムーズに動作します。

0
T Gorle