正文

手机视频播放，大小不一怎么办？教你一招轻松实现前端视屏全屏适配

/0 浏览量
1113

在浏览网页或者使用手机应用时，我们经常会遇到视频播放大小不一致的问题。有时候，视频可能过大，占据了整个屏幕，有时候又过小，无法清晰地看到内容。今天，就让我来教大家一招，轻松实现前端视频全屏适配，让视频播放大小完美适应屏幕。

1. 视频全屏适配原理

要实现视频全屏适配，我们需要了解两个关键点：

  • 视频比例：视频的宽高比，如16:9、4:3等。
  • 屏幕比例：屏幕的宽高比，通常为16:9或4:3。

当视频的宽高比与屏幕的宽高比相同时，视频可以完美地适应屏幕。如果不同，就需要进行一定的调整。

2. HTML和CSS实现视频全屏适配

下面，我将通过HTML和CSS代码，为大家展示如何实现视频全屏适配。

2.1 HTML结构

首先，我们需要创建一个视频播放器容器，并引入视频文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>视频全屏适配</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="video-container">
  <video id="videoPlayer" src="your-video.mp4" controls></video>
</div>
<script src="script.js"></script>
</body>
</html>

2.2 CSS样式

接下来，我们需要为视频播放器容器和视频元素添加一些样式。

/* styles.css */
.video-container {
  width: 100%;
  height: 100vh;
  background-color: #000;
  position: relative;
}

#videoPlayer {
  width: 100%;
  height: 100%;
}

2.3 JavaScript脚本

最后，我们需要使用JavaScript来监听屏幕尺寸变化，并调整视频播放器的宽高比。

// script.js
document.addEventListener('DOMContentLoaded', function() {
  var videoPlayer = document.getElementById('videoPlayer');
  var videoWidth = videoPlayer.videoWidth;
  var videoHeight = videoPlayer.videoHeight;

  function resizeVideo() {
    var screenWidth = window.innerWidth;
    var screenHeight = window.innerHeight;

    if (screenWidth / screenHeight > videoWidth / videoHeight) {
      videoPlayer.style.width = '100%';
      videoPlayer.style.height = (screenWidth * videoHeight) / videoWidth + 'px';
    } else {
      videoPlayer.style.height = '100%';
      videoPlayer.style.width = (screenHeight * videoWidth) / videoHeight + 'px';
    }
  }

  window.addEventListener('resize', resizeVideo);
  resizeVideo();
});

3. 总结

通过以上步骤，我们可以轻松实现前端视频全屏适配。在实际应用中，可以根据需要调整代码，以适应不同的场景和需求。希望这篇文章能对大家有所帮助！

-- 展开阅读全文 --