Question

我发现这个支持youtube源的html5视频播放器。但它没有全屏按钮，所以我开始实现全屏功能。我现在的问题是，在chrome或safari上，视频的宽度不是100％（不是真正的全尺寸，我的所有边都有黑色间隙）。

我用过这个脚本：

$('.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%;}

仍然无法正常工作。有人知道为什么这不适用于chrome / safari吗？

整个示例可以在这里找到：http://jsfiddle.net/Z5PTv/

Answer 1

我认为这仅仅是由于实际视频内容的宽高比。如果您查看原始YouTube视频，它在视频的任一侧也有黑条。

这就是为什么预加载图像看起来像素化的原因，因为与我认为的视频具有相同宽高比的图像被迫占用空间。

如果视频是屏幕的整个宽度，视频的顶部和底部将被剪掉。我认为你宁愿在侧面有黑条而不是剪裁。

Answer 2

如果问题是纵横比，则可以使用CSS object-fit：fill; 进行控制但是现在只支持Opera。

如果视频元素使用100％的屏幕，这并不意味着它自己的视频图像将被拉伸以填满整个屏幕。你可以通过使用视频元素上的controls属性来观察它，并注意控件如何比视频图像宽。

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

HTML5视频全屏按钮

2 个答案: