div布局——简单视频播放的页面

以下是一个使用HTML和CSS创建简单视频播放页面的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单视频播放页面</title>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000;
    }
    .video-container {
        position: relative;
        width: 800px;
        height: 450px;
    }
    video {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 确保视频填充整个容器 */
    }
    .controls {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px 0;
        background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
        color: #fff;
    }
    .controls button {
        padding: 10px;
        margin: 0 5px;
        background: transparent;
        border: 1px solid #fff;
        color: #fff;
        cursor: pointer;
    }
</style>
</head>
<body>
 
<div class="video-container">
    <video id="myVideo" controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
    <div class="controls">
        <button onclick="playOrPause()">播放/暂停</button>
        <button onclick="skip(-10)">后退 10 秒</button>
        <button onclick="skip(10)">前进 10 秒</button>
    </div>
</div>
 
<script>
function playOrPause() {
    var video = document.getElementById('myVideo');
    if (video.paused) {
        video.play();
    } else {
        video.pause();
    }
}
 
function skip(seconds) {
    var video = document.getElementById('myVideo');
    video.currentTime += seconds;
}
</script>
 
</body>
</html>

这段代码创建了一个简单的视频播放页面，包含视频播放器和用于控制播放（播放/暂停、前进和后退）的按钮。视频播放器位于.video-container类中，并且使用了CSS样式使其在页面中水平垂直居中，并具有半透明的控制条。JavaScript函数playOrPause和skip用于控制视频的播放和跳过部分。

div布局——简单视频播放的页面

评论已关闭

推荐阅读