h5实现video

H5实现Video的方法

在HTML5中，使用<video>标签可以轻松实现视频播放功能。以下是具体的实现方法和相关属性：

基本用法

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

src属性指定视频文件的路径，controls属性添加默认的视频控制条（播放/暂停、音量、全屏等）。

多格式支持

为了兼容不同浏览器，可以提供多种视频格式：

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

浏览器会按顺序尝试加载第一个可播放的格式，最后的文本是后备内容。

常用属性

• width和height：设置视频显示尺寸
• autoplay：自动播放（移动端可能受限）
• loop：循环播放
• muted：静音播放
• poster：设置视频封面图

<video src="video.mp4" controls width="640" height="360" poster="poster.jpg"></video>

JavaScript控制

通过JavaScript API可以实现更复杂的控制：

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

// 播放
myVideo.play(); 

// 暂停
myVideo.pause();

// 跳转到指定时间
myVideo.currentTime = 10;

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

自定义控制界面

隐藏默认控制条，使用自定义按钮：

<video id="myVideo" src="video.mp4"></video>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>

<script>
  const video = document.getElementById('myVideo');
  document.getElementById('playBtn').addEventListener('click', () => video.play());
  document.getElementById('pauseBtn').addEventListener('click', () => video.pause());
</script>

全屏控制

// 进入全屏
function requestFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

移动端注意事项

• iOS Safari需要添加playsinline属性才能内联播放
• 自动播放通常需要配合muted属性
• 部分浏览器限制自动播放功能

<video src="video.mp4" controls playsinline webkit-playsinline></video>

通过以上方法，可以在HTML5中实现灵活的视频播放功能，并根据需要自定义各种交互行为。