html5视频代码怎么用

HTML5 是一种用于结构化和呈现互联网内容的标记语言，它提供了一种方式来嵌入视频内容到网页中，而无需使用任何插件或第三方软件，在 HTML5 中，我们可以使用 <video> 标签来嵌入视频。

1\. 基本的视频嵌入

最基本的 HTML5 视频嵌入代码如下：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在这个例子中，<video> 标签定义了一个视频播放器。width 和 height 属性定义了播放器的尺寸。controls 属性添加了播放、暂停和音量控制。

<source> 标签定义了视频文件的来源。src 属性指定了视频文件的路径，type 属性指定了视频文件的格式，在这个例子中，我们同时提供了 MP4 和 Ogg Theora 两种格式的视频文件，以兼容不同的浏览器。

如果浏览器不支持 <video> 标签，将显示 <video> 标签内的内容，在这个例子中，我们将显示 "Your browser does not support the video tag."。

2\. 自定义控件

HTML5 还允许我们自定义视频控件，我们可以添加播放、暂停和全屏按钮：

<video id="my-video" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
<div id="video-controls">
  <button id="play-pause">Play</button>
  <button id="fullscreen">Fullscreen</button>
</div>
<script>
var myVideo = document.getElementById("my-video");
var playPauseButton = document.getElementById("play-pause");
var fullscreenButton = document.getElementById("fullscreen");
playPauseButton.addEventListener("click", function() {
  if (myVideo.paused) {
    myVideo.play();
    playPauseButton.innerHTML = "Pause";
  } else {
    myVideo.pause();
    playPauseButton.innerHTML = "Play";
  }
});
fullscreenButton.addEventListener("click", function() {
  if (myVideo.requestFullscreen) {
    myVideo.requestFullscreen();
  } else if (myVideo.mozRequestFullScreen) { // Firefox
    myVideo.mozRequestFullScreen();
  } else if (myVideo.webkitRequestFullscreen) { // Chrome, Safari and Opera
    myVideo.webkitRequestFullscreen();
  } else if (myVideo.msRequestFullscreen) { // IE/Edge
    myVideo.msRequestFullscreen();
  }
});
</script>

在这个例子中，我们首先获取了 <video> 元素和两个按钮的引用，我们为播放/暂停按钮添加了一个点击事件监听器，当用户点击这个按钮时，视频将在播放和暂停状态之间切换，我们还为全屏按钮添加了一个点击事件监听器，当用户点击这个按钮时，视频将在全屏和非全屏状态之间切换。

3. 其他属性和方法

除了上述的基本功能外，HTML5 <video> 标签还有许多其他的属性和方法，

poster 属性：指定视频播放器的封面图片。

preload 属性：指定页面加载时是否预加载视频，可能的值有 "none"（不预加载）、"metadata"（只预加载元数据）和 "auto"（自动预加载）。

loop 属性：指定视频是否循环播放，如果设置为 "true"，视频将在结束播放后重新开始播放，如果设置为 "false"，视频将在结束播放后停止，默认值是 "false"。