HTML 视频(Videos)播放

参考资料

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");
2. // 播放
3. myVideo.play();
5. // 暂停
6. myVideo.pause();
8. // 跳转到特定时间
9. myVideo.currentTime = 30;
11. // 全屏
12. 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>