要在手机浏览器上打开全屏视频,你可以使用HTML5的<video>
标签结合JavaScript来实现。以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏视频</title>
</head>
<body>
<video id="myVideo" width="100%" height="auto" controls>
<source src="your-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button onclick="openFullscreen()">全屏播放</button>
<script src="script.js"></script>
</body>
</html>
function openFullscreen() {
const video = document.getElementById('myVideo');
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) { /* Firefox */
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) { /* IE/Edge */
video.msRequestFullscreen();
}
}
<video>
标签用于嵌入视频,id="myVideo"
用于JavaScript引用。<source>
标签指定视频文件的路径和类型。openFullscreen
函数通过调用requestFullscreen
方法将视频元素全屏显示。requestFullscreen
、mozRequestFullScreen
、webkitRequestFullscreen
和msRequestFullscreen
等方法来兼容不同的浏览器。<source>
标签来提供不同格式的视频文件,以确保兼容性。通过以上方法,你可以在手机浏览器上实现全屏视频播放。
领取专属 10元无门槛券
手把手带您无忧上云