如何讓iPad上的HTML5視頻邊上的黑條消失？

我正在研究一個應該主要在iPad上運行的WebApp。該應用程序播放多個視頻並具有一些交互式組件。如何讓iPad上的HTML5視頻邊上的黑條消失？

我的問題是化妝品：即使HTML5視頻標籤工作正常，我創建的自定義控件控制視頻/音頻播放就好了，爲我的生活我無法弄清楚如何使視頻邊上的黑條消失。

的嵌入是完全標準：

<video id="video" src="./video/video.mp4" width="1024"></video>

我只是想該死的視頻是完全一樣寬的iPad屏幕，但無論我指定什麼規模，總有在旁邊黑網吧。我發現的唯一解決方法是超大視頻，然後給它一個負邊距，所以它會居中，但肯定必須有更好的解決方案......特別是因爲黑色不需要的「邊距」的寬度不是恆定的，根據指定的視頻寬度進行更改。有沒有人有過同樣的問題？任何想法或幫助將不勝感激。謝謝你們。

來源

2012-08-07 Kristof Gatter

視頻是否有4/3的比例？ – 2012-08-07 16:05:35

不是它的16：9 ...但不管比例如何，它應該填寫屏幕寬度...或者iPad播放器認爲它是4：3？ – 2012-08-07 16:12:43

iPad使最高的一面充滿可用空間。所以你的16：9視頻應該填滿這個寬度。但是，也許這是你的CSS。身體有一個默認的「邊距」，「視口」設置可能會關閉......因素太多。請張貼您的頁面佈局以及您的CSS的外觀。也許做一個[小提琴]（http://jsfiddle.net）。 – 2012-08-07 21:40:10

感謝您的意見。事實證明，我必須指定視頻元素的高度，出於某種原因，iPad上的Safari不會正確縮放視頻和控件;只要我在HTML文件的實際視頻標籤中明確指定了等效於16：9的像素，該條消失。

來源

2012-08-08 13:51:55

你仍然可以使用這個百分比。 16：9將是：寬度：100％;高度：56.25％; – 2013-04-19 17:41:43

如何讓iPad上的HTML5視頻邊上的黑條消失？

回答

相關問題