HTML | DOM 视频播放方法

HTML与DOM提供了视频播放的方法，使得我们可以轻松地在网页中添加视频播放功能，下面我们来介绍这些方法。

HTML 视频播放

HTML提供了<video>标签，通过设置其属性src来指定视频文件的URL，即可完成简单的视频播放。

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

controls属性可添加视频控制条，其它属性可设置视频的大小、预加载、自动播放等。

DOM 视频操作

通过DOM可获取视频标签，并在其上进行操作和设置。

// 获取video标签
const videoPlayer = document.querySelector('#my-video');

// 播放、暂停
videoPlayer.play();
videoPlayer.pause();

// 调节音量
videoPlayer.volume = 0.5;

// 添加时间监听
videoPlayer.addEventListener('play', () => {
  console.log('正在播放');
});

// 设置播放速度
videoPlayer.playbackRate = 2;

在视频播放时，我们也可以获取视频的当前时间、总时长并进行操作。

// 获取视频当前播放时间、总时长
const currentTime = videoPlayer.currentTime;
const duration = videoPlayer.duration;

// 改变视频播放时间
videoPlayer.currentTime = 10;

// 添加时间监听
videoPlayer.addEventListener('timeupdate', () => {
  console.log(`当前播放时间：${videoPlayer.currentTime}秒`);
});

总结

通过HTML与DOM，我们可以轻松地实现网页视频播放，同时也能在代码中对视频进行各种操作和设置，丰富了网页的交互体验和功能。