19
社区成员
发帖
与我相关
我的任务
分享基于HBuilderX的MUI开发的H5视频播放器示例代码和打包的安卓apk截图展示
一、示例源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>传奇开心果视频播放器</title>
<!-- 引入 mui 的 CSS 和 JS 文件 -->
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
video {
max-width: 100%;
height: auto;
}
.centered-container {
text-align: center;
margin-top: 20px;
}
img {
width: 100px; /* 设置图片宽度 */
height: 100px; /* 设置图片高度 */
margin: 0 auto; /* 水平居中 */
}
.subtext {
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<video width="100%" height="auto" controls>
<source src="videos/qingdao.mp4" type="video/mp4">
<source src="videos/qingdao.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
<div class="centered-container">
<img src="images/logo.jpg" alt="传奇开心果Logo">
<p>基于HBuilderX的MUI编写的传奇开心果H5视频播放器</p>
<p class="subtext">2024年国庆节于瓜州的家中创意编程</p>
</div>
<script>
// 使用 mui 初始化
mui.init();
</script>
</body>
</html>
二、特色说明
通过设置页面实现了以下效果，并且具有良好的用户体验和视觉效果。视频播放器使用了 max-width: 100% 和 height: auto 的样式设置，确保视频在不同设备上都能够自适应屏幕宽度。这意味着无论是在手机、平板，还是桌面浏览器上，视频播放器都会自动调整其宽度以适应当前屏幕的宽度。同时保持原有的宽高比，从而避免了视频被拉伸或压缩的情况。这种自适应设计，使得用户在不同设备上观看视频时能够获得一致的观看体验。图片设置了固定的宽度和高度（width: 100px 和 height: 100px），并使用了 margin: 0 auto 来实现水平居中对齐，这样可以确保图片始终保持其原始尺寸，不会因为缩放而失真，同时通过水平居中对齐图片在页面中的位置，更加美观。不会出现偏移的情况，这对于展示品牌 Logo 或其他重要图像来说非常重要。确保了视觉的一致性和专业性。文字内容使用了 .centered-container 类，其中 text-align: center 实现了水平居中对齐，这使得所有的文本内容（包括主标题和子文本）都在页面中居中显示，增强了页面的整体美感。同时，通过为子文本设置 .subtext 类，并增加 margin-top: 10px ，使得子文本与主文本之间有一定的间距，从而区分了不同的信息层次，提高了可读性和视觉清晰度。页面整体布局采用了 flex 布局，使得所有内容都垂直居中对齐，并且水平居中对齐，这种布局方式不仅简洁美观，还具有很好的响应式特性。无论是在手机、平板还是桌面浏览器上，页面的内容都能够自动调整，保持良好的视觉效果。此外，通过使用 mui 框架，页面还具备了一些额外的交互效果。如触摸事件的支持，使得页面在移动设备上的操作更加流畅和自然。综上所述，通过这些设置，页面不仅实现了视频播放器的自适应屏幕宽度、图片的水平居中对齐，以及文字内容的清晰展示，还保证了页面整体布局的简洁美观。这些设计细节不仅提升了用户的观看体验，还增强了页面的专业性和视觉吸引力。使其在多种设备上都能展现出最佳的效果，无论是从用户体验的角度，还是从视觉设计的角度来看，这样的页面设计都是非常优秀的。
三、源代码解释说明
1. 引入 mui 的 CSS 和 JS 文件：
引入了 mui 的 CSS 和 JS 文件，以便使用 mui 提供的样式和功能。
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
2. 全局样式：
body 使用了 flex 布局，使内容垂直居中对齐。
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
这使得页面中的所有内容都垂直居中对齐。
3. 视频播放器样式：
视频播放器设置了最大宽度为100%，高度自适应。
video {
max-width: 100%;
height: auto;
}
这使得视频播放器在不同设备上都能自适应屏幕宽度。
4. 居中容器样式：
.centered-container 设置了文本居中对齐，并在顶部添加了20像素的边距。
.centered-container {
text-align: center;
margin-top: 20px;
}
这使得容器内的所有内容都水平居中对齐。
5. 图片样式：
图片设置了固定宽度和高度，并水平居中对齐。
img {
width: 100px; /* 设置图片宽度 */
height: 100px; /* 设置图片高度 */
margin: 0 auto; /* 水平居中 */
}
这使得图片保持原始尺寸，并水平居中对齐。
6. 子文本样式：
.subtext 设置了较小的字体大小，并在顶部添加了10像素的边距。
.subtext {
font-size: 14px;
margin-top: 10px;
}
这使得子文本更小，并与主文本之间有一定的间距。
7.HTML 结构：
视频播放器使用了
<video width="100%" height="auto" controls>
<source src="videos/qingdao.mp4" type="video/mp4">
<source src="videos/qingdao.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
这使得浏览器可以选择最适合的视频格式。
8. 居中容器包含了一个图片和两个段落。
<div class="centered-container">
<img src="images/logo传奇开心果.jpg" alt="传奇开心果Logo">
<p>基于HBuilderX的MUI编写的传奇开心果H5视频播放器</p>
<p class="subtext">2024年国庆节于瓜州的家中创意编程</p>
</div>
这使得图片和文字都水平居中对齐，并且子文本与主文本之间有一定的间距。
9. 初始化 mui：
使用 mui.init() 初始化 mui 框架。
<script>
// 使用 mui 初始化
mui.init();
</script>
这确保了 mui 框架的功能正常运行。
总结
通过这些设置，页面实现了以下效果：
视频播放器自适应屏幕宽度。
图片保持原始尺寸并水平居中对齐。
文字内容水平居中对齐，并且子文本与主文本之间有一定的间距。
页面整体布局简洁美观，适合在多种设备上展示。
...全文
请发表友善的回复…
发表回复
传奇开心果编程 2024-10-08
- 打赏
- 举报
调试必须使用支持h5的浏览器，比如谷歌浏览器、Microsoft Edge 浏览器微、火狐浏览器等
