如何使视频播放器适合其内容?
How to make a video player fit its content?
我正在制作一个以背景视频为主要功能的网络应用程序。
我设法让视频适合整个屏幕,方法是在两侧添加一些黑条以防止宽高比(我需要显示整个视频,我不希望部分被切断)。
这是宽度不够的情况
高度不够的时候是这样的
其实这就是我想要它做的,只有一个问题。您可以在两张图片上看到的消息来自插件 videojs-overlay,它将消息对齐到您想要的位置,在本例中为顶部。为了对齐这些消息,它需要整个视口,而不是视频播放的位置。
我希望这一切发生
这是我的实际代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
<link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
<title>Videojs Dailymotion</title>
<style>
* {
margin: 0;
padding: 0;
}
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: #2B333F;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(43, 51, 63, 0);
}
</style>
</head>
<body>
<video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
<source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
</video>
<script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
<script>
var player = videojs('vid1',{
controls: true,
posterImage: false,
textTrackDisplay: false,
loadingSpinner: false,
controlBar: {
fullscreenToggle: false,
progressControl: false,
remainingTimeDisplay: false
}
});
player.overlay({
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}]});
</script>
</body>
</html>
我已经尝试过对象匹配、流畅的纵横比但似乎没有任何效果
另一张图片来解释我想做什么:
我想让蓝色方块变成红色方块,同时保持纵横比
你可以试试这个。
.video-js.videoContainer video {
display: block;
min-height: 100%;
min-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: auto;
height: auto;
}
或者甚至是视频元素上的这个:
object-fit: cover;
如果你不关心宽高比,那么object-fit: fill;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
<link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
<title>Videojs Dailymotion</title>
<style>
* {
margin: 0;
padding: 0;
}
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
padding-top: 50%;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
object-fit: fill; /*Added property*/
}
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: #2B333F;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(43, 51, 63, 0);
}
</style>
</head>
<body>
<video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
<source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
</video>
<script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
<script>
var player = videojs('vid1',{
controls: true,
posterImage: false,
textTrackDisplay: false,
loadingSpinner: false,
controlBar: {
fullscreenToggle: false,
progressControl: false,
remainingTimeDisplay: false
}
});
player.overlay({
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}]});
</script>
</body>
</html>
我终于得到了我想要的。
.container {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.wrapper {
width: 100%;
max-width: calc(100vh / 0.5625);
padding-bottom: (9 / 16) * 100%;
top: 50%;
left: 50%;
background-color: deepskyblue;
}
<video id="vid1" class="video-js vjs-default-skin" style="width:100%;height:auto; position: relative;" controls>
<source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
</video>
有了这个,我能够在保持播放器在视频内容上的同时保持视频的纵横比。
唯一的问题是视频不在屏幕中央。
谢谢大家的帮助!
我正在制作一个以背景视频为主要功能的网络应用程序。 我设法让视频适合整个屏幕,方法是在两侧添加一些黑条以防止宽高比(我需要显示整个视频,我不希望部分被切断)。
这是宽度不够的情况
高度不够的时候是这样的
其实这就是我想要它做的,只有一个问题。您可以在两张图片上看到的消息来自插件 videojs-overlay,它将消息对齐到您想要的位置,在本例中为顶部。为了对齐这些消息,它需要整个视口,而不是视频播放的位置。
我希望这一切发生
这是我的实际代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
<link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
<title>Videojs Dailymotion</title>
<style>
* {
margin: 0;
padding: 0;
}
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: #2B333F;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(43, 51, 63, 0);
}
</style>
</head>
<body>
<video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
<source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
</video>
<script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
<script>
var player = videojs('vid1',{
controls: true,
posterImage: false,
textTrackDisplay: false,
loadingSpinner: false,
controlBar: {
fullscreenToggle: false,
progressControl: false,
remainingTimeDisplay: false
}
});
player.overlay({
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}]});
</script>
</body>
</html>
我已经尝试过对象匹配、流畅的纵横比但似乎没有任何效果 另一张图片来解释我想做什么:
我想让蓝色方块变成红色方块,同时保持纵横比
你可以试试这个。
.video-js.videoContainer video {
display: block;
min-height: 100%;
min-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: auto;
height: auto;
}
或者甚至是视频元素上的这个:
object-fit: cover;
如果你不关心宽高比,那么object-fit: fill;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://vjs.zencdn.net/7.5.4/video-js.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://vjs.zencdn.net/7.5.4/video.js"></script>
<script src="https://vjs.zencdn.net/ie8/7.5.4/videojs-ie8.min.js"></script>
<link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
<title>Videojs Dailymotion</title>
<style>
* {
margin: 0;
padding: 0;
}
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
padding-top: 50%;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
object-fit: fill; /*Added property*/
}
.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */
background-color: #2B333F;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(43, 51, 63, 0);
}
</style>
</head>
<body>
<video id="vid1" class="video-js vjs-default-skin videoContainer" controls >
<source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
</video>
<script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
<script>
var player = videojs('vid1',{
controls: true,
posterImage: false,
textTrackDisplay: false,
loadingSpinner: false,
controlBar: {
fullscreenToggle: false,
progressControl: false,
remainingTimeDisplay: false
}
});
player.overlay({
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: 'This event-triggered overlay message appears when the video is playing',
start: 'play',
end: 'pause'
}]});
</script>
</body>
</html>
我终于得到了我想要的。
.container {
width: 100%;
height: 100%;
background-color: red;
overflow: hidden;
}
.wrapper {
width: 100%;
max-width: calc(100vh / 0.5625);
padding-bottom: (9 / 16) * 100%;
top: 50%;
left: 50%;
background-color: deepskyblue;
}
<video id="vid1" class="video-js vjs-default-skin" style="width:100%;height:auto; position: relative;" controls>
<source src="https://drive.google.com/uc?export=download&id=1KhfURPSYOTjPVxIwWdicd5OHo651PaPy" type="video/mp4">
</video>
有了这个,我能够在保持播放器在视频内容上的同时保持视频的纵横比。 唯一的问题是视频不在屏幕中央。 谢谢大家的帮助!