任何方式使Bootstrap中的HTML5音頻響應？

我有一個簡單的HTML5音頻播放器，我想在Bootstrap中做出響應。任何方式使Bootstrap中的HTML5音頻響應？

<div class="col-sm-4 col-sm-offset-4"> 
     <audio controls style="width: 600px;"> 
     <source src="sample.mp3"> 
     </audio> 
    </div>

有沒有一種方法，使含有這種響應音頻播放器在div不管什麼樣的內容在裏面，或者至少一個類或東西，使音頻播放器響應？如果可能，希望不必使用外部庫。

謝謝！

來源

2017-03-17 Casey

響應以什麼方式？你希望控件總是100％寬度，或者是什麼？ –

我建議使用width:100%和max-width:600px。當您在桌面瀏覽器中縮小窗口大小時，您將無法像在真實的移動設備上看到一樣，但移動設備上的音頻元素（例如iOS，Android）無論如何肯定會變小 - 對它的感覺沒有太大的影響。與這些設置一起，它應該適應任何情況。

（你也許會想與音頻格式ogg添加第二個source標籤，並添加源標籤/秒文件格式，見https://www.w3schools.com/tags/tag_audio.asp）

來源

2017-03-17 18:05:10 Johannes

這工作，謝謝！猜猜我認爲有一個BootStrap在課堂上建成，但這是一個很好的工作！ – Casey

嘗試：

<div class="col-sm-4 col-sm-offset-4 embed-responsive embed-responsive-4by3"> 
    <audio controls class="embed-responsive-item"> 
     <source src="sample.mp3"> 
    </audio> 
</div>

編號：http://getbootstrap.com/components/#responsive-embed

來源

2017-03-17 14:21:26

謝謝，但這不起作用。「嵌入響應-4by3」應該只用於視頻標籤而不是音頻。 – Casey

任何方式使Bootstrap中的HTML5音頻響應？

回答

相關問題