当前位置：首页 > HTML

h5实现视频播放

2026-01-12 16:57:55HTML

使用HTML5的video标签实现视频播放

HTML5提供了内置的<video>标签，可以直接在网页中嵌入视频内容而无需插件。基本语法如下：

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持HTML5视频标签
</video>

常用属性配置

controls属性显示默认播放控件（播放/暂停、音量、全屏等） autoplay属性让视频自动播放（注意：许多浏览器会阻止自动播放） loop属性使视频循环播放 muted属性默认静音 poster属性指定视频封面图

<video width="640" height="360" controls autoplay loop muted poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>

支持多种视频格式

不同浏览器支持的视频格式不同，建议提供多种格式源：

MP4 (H.264编码)：广泛支持
WebM：开源格式，Chrome/Firefox支持
Ogg：开源格式，部分浏览器支持

使用JavaScript控制播放

可以通过JavaScript API控制视频播放行为：

const video = document.getElementById('myVideo');

// 播放
video.play(); 

// 暂停
video.pause();

// 跳转到特定时间
video.currentTime = 10;

// 监听事件
video.addEventListener('ended', function() {
  console.log('视频播放结束');
});

响应式视频设计

使用CSS使视频适应不同屏幕尺寸：

video {
  max-width: 100%;
  height: auto;
}

自定义播放器界面

如需自定义播放器界面，可以隐藏默认控件并创建自定义控制元素：

<video id="myVideo" width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
</video>

<div class="controls">
  <button onclick="playPause()">播放/暂停</button>
  <input type="range" id="seekBar" value="0">
</div>

<script>
function playPause() {
  const video = document.getElementById('myVideo');
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}
</script>

流媒体协议支持

对于大型视频或直播流，可以使用HLS或DASH协议：

<!-- 使用hls.js库播放HLS流 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    const video = document.getElementById('video');
    const hls = new Hls();
    hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
    });
  }
</script>

浏览器兼容性处理

检测浏览器是否支持HTML5视频并提供回退方案：

if (document.createElement('video').canPlayType) {
  // 支持HTML5视频
} else {
  // 回退到Flash或其他方案
  document.write('<embed src="movie.swf" width="640" height="360">');
}