h5 video标签用法的实例代码

什么是h5 video标签

HTML5中的video标签是用于在网页中嵌入音频或视频内容的标准方式。视频文件作为源文件，可以通过video标签实现在网页中的播放。

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

以上代码中，我们用的是video标签，它的属性包括视频的宽度和高度，文件源链接，和控制。其中控制属性可以让我们省去设计自定义的播放器。

基本的h5 video标签的用法

基本的video标签代码如下：

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

以上代码使用了controls属性默认展示了默认的播放器控制界面。用户可以控制播放、暂停、计时、音量等功能。<source>是用来定义媒体源文件的。源文件可以是MP4、WebM或Ogg格式的视频文件。如果浏览器不支持MP4格式的视频，就尝试使用WebM格式，如果还不行，就使用Ogg。

自定义视频控件界面

如果想要自定义视频控件，我们可以用JavaScript来控制video标签。在HTML中添加一块包裹整个视频控件的div元素：

<div id="video-player">
  <video id="my-video" width="640" height="264">
    <source src="video.mp4" type="video/mp4">
  </video>
  <button id="play-pause-button">Play</button>
  <input id="volume-control" type="range" min="0" max="1" step="0.05" value="1">
</div>

以上代码中，我们添加了一个button元素和一个input元素。这两个元素用于控制播放和音量控制。接下来，我们使用JavaScript来实现video标签的播放、暂停和音量控制功能：

let video = document.getElementById("my-video");
let playButton = document.getElementById("play-pause-button");
let volumeControl = document.getElementById("volume-control");

playButton.onclick = function() {
  if (video.paused) {
    video.play();
    playButton.innerHTML = "Pause";
  } else {
    video.pause();
    playButton.innerHTML = "Play";
  }
};

volumeControl.oninput = function() {
  video.volume = volumeControl.value;
};

视频事件的实现

video标签内置了一些事件处理程序，用于指示播放、暂停、错误和加载和等状态的更改。以下是实现播放事件和时间更新的方法：

let video = document.getElementById("my-video");

video.onplay = function() {
  console.log("Playing");
};

video.onpause = function() {
  console.log("Paused");
};

video.ontimeupdate = function() {
  console.log(video.currentTime);
};

以上代码中，onsplay事件是当视频开始播放时触发，onpause事件是当视频暂停时触发，ontimeupdate事件是在视频播放时触发，它会持续更新视频播放的当前时间。