視頻全屏使用HTML5

我試圖做一個fullscrren頁面與video.This是我的代碼：視頻全屏使用HTML5

<video id="backgroundvideo" autoplay controls> 
      <source src="{% path video, 'reference' %}" type="video/mp4"> 

     </video>

的CSS是：

#backgroundvideo { 
      position: fixed; 
      top: 50%; 
      left: 50%; 
      min-width: 100%; 
      min-height: 100%; 
      width: auto; 
      height: auto; 
      z-index: -100; 
      -webkit-transform: translateX(-50%) translateY(-50%); 
      transform: translateX(-50%) translateY(-50%); 

     }

當我試圖打開網頁在我的手機與Android（5英寸）它不起作用，但開放與Iphone 4它的作品。我認爲這個問題與CSS有關。

你能幫我解決嗎，或者你能給我另一種解決方案嗎？

來源

2016-01-27 Carmen Mitru

使用http://vodkabears.github.io/vide/ –

只是一個猜測：'寬度：100％;身高：100％;左：0;頂部：0;'沒有變形 –

在縱向上它不是全屏Android上5英寸 –

既然你不說如何不起作用，我不知道如何幫助你。但是：

top: 50%; 
    left: 50%;

如果您要全屏顯示，爲什麼要將視頻放置在50％右側，而將50％置於右側？ top：0;左：0;似乎更合乎邏輯。我錯過了什麼嗎？

min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto;

不確定你想在這裏，但全屏==全屏，那麼爲什麼告訴瀏覽器它可以自己決定如何確定視頻的大小？如果你想全屏，寬度：100％;身高：自動;應該做。請注意，因爲比例可能與您的屏幕不同，您可能會得到上/下的酒吧。但我認爲這比延伸視頻要好。

我不確定，我沒有做很多的視頻和支持是非常普遍的，但我認爲你的代碼可能只是混淆瀏覽器。

-webkit-transform: translateX(-50%) translateY(-50%); 
transform: translateX(-50%) translateY(-50%);

你是否抵消了50％？爲什麼？

無論如何，無論這個問題真的在這裏，視頻支持僅僅是那些在「瀏覽器戰爭」領域中仍然很好和真實的東西之一。每個人都以自己的方式做事。

看看這個解決方案爲兼容的視頻服務（幾乎）所有。它還帶有相當體面的CSS來竊取...我的意思是，'學習'。 ;-)

http://mediaelementjs.com/

來源

2016-01-27 12:27:44

我在教程的網站上找到了這段代碼 –

視頻全屏使用HTML5

回答

相關問題