参考资料

1. Html网页 Web 安全色
2. Html转C#/JSP有哪些
3. HTML使用表格 布局
4. HTML 图像
5. HTML 内联 元素
6. HTML 标签
7. HTML 符号实体
8. Html/JS互转有哪些

HTML 视频(Videos)播放格式化

详细介绍

HTML5 引入了 <video> 元素，用于在网页中嵌入视频内容，无需使用插件如 Flash。现代浏览器都支持 HTML5 视频播放。

主要标签

<video> 标签

• 用于定义视频内容

• 主要属性：

  • src：指定视频源文件

  • controls：显示播放控件

  • autoplay：自动播放

  • loop：循环播放

  • muted：静音

  • poster：视频封面图像

  • width/height：设置尺寸

  • preload：预加载设置

<source> 标签

• 用于指定多个视频源文件

• 主要属性：

  • src：视频文件路径

  • type：视频文件类型

基本用法

1. <video controls width="640" height="360">
2.   <source src="movie.mp4" type="video/mp4">
3.   <source src="movie.webm" type="video/webm">
4.   您的浏览器不支持 HTML5 视频。
5. </video>

实例

基本视频播放器

1. <video src="video.mp4" controls>
2.   您的浏览器不支持 HTML5 视频。
3. </video>

多源格式视频

1. <video controls width="640" height="360" poster="poster.jpg">
2.   <source src="video.mp4" type="video/mp4">
3.   <source src="video.webm" type="video/webm">
4.   <source src="video.ogv" type="video/ogg">
5.   您的浏览器不支持 HTML5 视频。
6. </video>

自动播放和循环

1. <video autoplay loop muted>
2.   <source src="video.mp4" type="video/mp4">
3. </video>

功能扩展

JavaScript 控制

1. const myVideo = document.getElementById("myVideo");
3. // 播放
4. myVideo.play();
6. // 暂停
7. myVideo.pause();
9. // 跳转到特定时间
10. myVideo.currentTime = 30;
12. // 全屏
13. myVideo.requestFullscreen();

CSS 扩展样式

1. /* 自定义视频播放器样式 */
2. video {
3.   background-color: #000;
4.   border-radius: 8px;
5.   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
6.   margin: 20px auto;
7.   display: block;
8. }
10. /* 自定义控制条 */
11. video::-webkit-media-controls-panel {
12.   background: rgba(0,0,0,0.5);
13. }
15. video::-webkit-media-controls-play-button,
16. video::-webkit-media-controls-mute-button {
17.   background: #fff;
18.   border-radius: 50%;
19. }
21. /* 响应式视频 */
22. .video-container {
23.   position: relative;
24.   padding-bottom: 56.25%; /* 16:9 比例 */
25.   height: 0;
26.   overflow: hidden;
27. }
29. .video-container video {
30.   position: absolute;
31.   top: 0;
32.   left: 0;
33.   width: 100%;
34.   height: 100%;
35. }

响应式视频容器 HTML

1. <div class="video-container">
2.   <video controls>
3.     <source src="video.mp4" type="video/mp4">
4.   </video>
5. </div>