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

html播放视频

admin
行业动态
2025-04-29
2575

HTML5中通过标签嵌入视频，设置src指定视频源，添加controls显示控件，支持autoplay、loop等属性实现播放

HTML播放视频基础

HTML5 `<video>`标签基本用法

<video src="path/to/video.mp4" controls></video>

src：视频文件路径（支持 MP4、WebM、Ogg 等格式）
controls：显示播放控件（播放/暂停、进度条、音量等）

常用属性与功能

属性	说明
`autoplay`	自动播放（部分浏览器需用户交互后才能生效）
`loop`	循环播放
`muted`	静音播放（可绕过浏览器自动播放限制）
`preload`	预加载策略（`none`/`metadata`/`auto`）
`poster`	视频封面图片路径
`width`/`height`	播放器尺寸（可响应式设计）

多源兼容性处理

<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>

作用：适配不同浏览器内核（如 Chrome 支持 WebM，Safari 支持 MP4）
备选方案：若浏览器不支持，显示备用内容（如提示文字或 Flash 播放器）

自定义样式与全屏

<video id="myVideo" style="width:100%; max-width:600px;" controls>
  <source src="video.mp4" />
</video>
<script>
  // 点击全屏按钮
  document.getElementById('myVideo').requestFullscreen();
</script>`

CSS控制：通过 width/height 或百分比调整尺寸
全屏API：调用 requestFullscreen() 方法（需用户触发事件）

高级功能扩展

功能	实现方式
字幕支持	`<track>` 标签指定 `.vtt` 文件（如 `<track src="subtitles.vtt" kind="subtitles">`）
广告插入	使用 `<source>` 动态切换视频源或 JavaScript 控制播放逻辑
画中画模式	调用 `pictureInPicture()` 方法（需浏览器支持）

常见问题与解答

问题1：如何让视频循环播放并自动重载？

解答：
添加 loop 属性可实现循环播放，若需每次循环重新加载（避免缓存导致进度条异常），可通过 JavaScript 重置 src：

html播放视频第1张

const video = document.querySelector('video');
video.addEventListener('ended', () => {
  video.src = video.src + '?t=' + Date.now(); // 添加时间戳强制刷新
});

问题2：如何禁用默认控件并自定义UI？

解答：
移除 controls 属性，通过 JavaScript 监听事件并操作播放状态：

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