当前位置：首页 > 行业动态 > 正文

html5播放视频

HTML5用标签嵌入视频，支持MP4/WebM格式，需设置controls属性

HTML5 视频基础语法

HTML5 的 <video> 标签用于嵌入视频，基本结构如下： 

<video src="video.mp4" controls></video>
  • src：指定视频文件路径（支持 MP4、WebM、Ogg 等格式）。
  • controls：显示默认播放控件（播放/暂停、进度条、音量等）。

常用属性与功能

属性 说明
autoplay 自动播放（需谨慎使用，可能被浏览器限制）
loop 循环播放
muted 静音播放（可绕过浏览器自动播放限制）
preload 预加载策略（none、metadata、auto）
width/height 设置视频尺寸（可响应式设计，如 width=100%）

浏览器兼容性与格式支持

不同浏览器对视频格式的支持不同,需提供多种格式：
| 浏览器 | 支持格式 |
|—————|————————-|
| Chrome | MP4、WebM、Ogg |
| Firefox | WebM、Ogg |
| Safari | MP4 |
| Edge/IE11 | MP4、WebM（需代码兼容） |

解决方案： 

<video controls>  
  <source src="video.mp4" type="video/mp4">  
  <source src="video.webm" type="video/webm">  
  <source src="video.ogv" type="video/ogg">  
  您的浏览器不支持 HTML5 视频。  
</video>

自定义控件与事件

通过 JavaScript 和 CSS 可定制播放控件： 

<video id="myVideo" src="video.mp4"></video>  
<button onclick="playPause()">播放/暂停</button>  
<script>  
  const video = document.getElementById('myVideo');  
  function playPause() {  
    if (video.paused) {  
      video.play();  
    } else {  
      video.pause();  
    }  
  }  
</script>

常用事件：

  • play：播放时触发
  • pause：暂停时触发
  • ended：播放结束时触发
  • timeupdate：播放进度变化时触发（用于同步进度条）

高级功能与优化

  1. 字幕与章节： 
    <track src="subtitles.vtt" kind="subtitles" lang="zh">
  2. 图片替代：当视频未加载时显示封面图： 
    <video poster="poster.jpg" controls>...</video>
  3. 响应式设计：结合媒体查询调整尺寸： 
    video {  
  max-width: 100%;  
  height: auto;  
}

相关问题与解答

问题1：HTML5 视频支持哪些格式？
答：主流格式为 MP4（H.264 编码）、WebM（VP8/VP9 编码）、Ogg（Theora 编码），需根据目标浏览器选择适配格式。

问题2：如何实现自定义播放控件？
答：隐藏默认控件（移除 controls 属性），通过 JavaScript 监听事件并操作 play()、pause()、currentTime 等方法，配合 HTML/CSS 设计按钮

视频
0

相关文章