HTML5視頻全屏按鈕

我發現這個支持youtube源碼的html5視頻播放器。但它沒有全屏按鈕，所以我開始實現全屏功能。現在我的問題是，在鉻或狩獵視頻不佔用100％的寬度（不真正的大小，我有一個黑色的差距在所有方面）。HTML5視頻全屏按鈕

我用這個腳本：

$('.video-fullscreen-btn', player).bind('click', function(e){ 
     if (player.requestFullscreen) { 
      player.requestFullscreen(); 
     } else if (player.msRequestFullscreen) { 
      player.msRequestFullscreen(); 
     } else if (player.mozRequestFullScreen) { 
      player.mozRequestFullScreen(); 
     } else if (player.webkitRequestFullscreen) { 
      player.webkitRequestFullscreen(); 
     } 
    });

我還與CSS的webkit

:-webkit-full-screen video {width: 100%; height: 100%;}

仍然沒有工作嘗試過。有人有一個想法，爲什麼這不適用於鉻/ safari？

整個例子可以在這裏找到：http://jsfiddle.net/Z5PTv/

來源

2014-02-24 marc4ndrew

我覺得這只是由於實際視頻內容的縱橫比。如果你看看最初的YouTube視頻，它也會在視頻的任何一邊都有黑條。

這就是爲什麼預加載圖像看起來像素化，因爲圖像與我假設的視頻具有相同的寬高比，已被迫佔用該空間。

如果視頻是屏幕的整個寬度，視頻的頂部和底部將被剪掉。我假設你寧願在邊上有黑條而不是剪裁。

來源

2014-02-24 17:32:12 deez22

如果問題是寬高比，你可以控制是用CSS object-fit：fill; 但是這隻在Opera中受到支持。

如果視頻元素正在使用100％的屏幕，這並不意味着它自身的視頻圖像將被拉伸以填滿整個屏幕。您可以通過使用視頻元素上的控件屬性來控制這一點，並注意控件可以如何寬於視頻圖像。

演示：http://netkoder.dk/netkoder/eksempler/eksempel0017.html

來源

2014-02-24 19:14:26 scootergrisen

HTML5視頻全屏按鈕

回答

相關問題