7.21，日常学习分享之visual之个人网页制作-CSDN博客

本文链接：https://blog.csdn.net/2301_77510406/article/details/149510353

首先：标头

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>天安门视频播放</title>
    <style>

这里是html在visual的开头，也就是主要结构

<!DOCTYPE html>：声明文档类型为 HTML5。
<html>：HTML 文档的根标签。
<head>：包含文档元数据，不直接显示在页面上。
<meta charset="UTF-8">：设置字符编码为 UTF-8。
<title>：设置浏览器标签页显示的标题。
<style>：开始内联 CSS 样式定义。

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h3 {
    color: #333;
    text-align: center;
    margin-top: 0;
}
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
    margin-bottom: 20px;
}
video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

其次：这里说的是一个网页挂载视频的网页设计

所以上面代码我们做的是一个视频，包括他的位置，颜色，视频播放器宽度等等下面说明

body 样式：设置页面整体字体、背景色、边距。
container 类：创建居中的白色内容区域，带圆角和阴影。
h3 标题：设置标题颜色、居中对齐。
video-container 类：使用padding-bottom: 56.25%实现 16:9 的响应式视频比例（通过 padding 撑开高度）。
video 标签：绝对定位填充父容器，实现响应式视频尺寸。

</head>
<body>
    <div class="container">
        <h3>天安门视频播放</h3>
        
        <div class="video-container">
            <video id="tiananmenVideo" controls poster="https://picsum.photos/1200/675?grayscale&blur=2">
                <source src="天安门.mp4" type="video/mp4">
                您的浏览器不支持HTML5视频播放，请更新浏览器。
            </video>
        </div>
        
        <div class="controls">
            <button onclick="playVideo()">播放</button>
            <button onclick="pauseVideo()">暂停</button>
            <button onclick="increaseVolume()">音量+</button>
            <button onclick="decreaseVolume()">音量-</button>
            <button onclick="restartVideo()">重新播放</button>
            <button onclick="toggleFullscreen()">全屏</button>
        </div>
        
        <div class="info">
            <p>视频名称: 天安门.mp4</p>
            <p>提示: 请确保视频文件与本HTML文件在同一目录下</p>
        </div>
    </div>

这里接上自动分析
video 标签：
- id="tiananmenVideo"：用于 JavaScript 获取元素。
- controls：显示浏览器默认的视频控制条。
- poster：视频加载前显示的封面图（随机灰度模糊图）。
- <source>：指定视频源文件（需与 HTML 文件在同一目录）。
controls 容器：包含 6 个自定义控制按钮，通过onclick绑定 JavaScript 函数。
info 容器：显示视频信息和使用提示。

    <script>
        const video = document.getElementById('tiananmenVideo');
        
        // 播放视频
        function playVideo() {
            video.play();
        }
        
        // 暂停视频
        function pauseVideo() {
            video.pause();
        }
        
        // 增加音量
        function increaseVolume() {
            video.volume = Math.min(1, video.volume + 0.1);
        }
        
        // 降低音量
        function decreaseVolume() {
            video.volume = Math.max(0, video.volume - 0.1);
        }
        
        // 重新播放
        function restartVideo() {
            video.currentTime = 0;
            video.play();
        }
        
        // 切换全屏
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                video.requestFullscreen().catch(err => {
                    alert(`全屏请求错误: ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        }
        
        // 视频加载错误处理
        video.addEventListener('error', function() {
            alert('视频加载失败，请检查文件路径是否正确。');
        });
    </script>
</body>
</html>

最后：这里我们设置通用播放器的功能，这里可以直接照抄，但是说明播放的视频路径要与代码放同一路径，并且视频地址要放在代码里面，