前端html开发如何引入外部视频代码范例

1. 使用 <video> 标签

要引入外部视频，首先要在HTML文档中使用 <video> 标签。以下是一个基础示例：

<video src="your_video_url.mp4" controls width="640" height="360">
  Your browser does not support the video tag.
</video>

• src 属性指定视频文件的URL地址。

• controls 属性会添加播放、暂停、音量调节等基本播放控件。

• width 和 height 属性设置视频播放器的尺寸。

• 在标签内部的文本是备用内容，当浏览器不支持 <video> 标签时显示。

2. 多种格式支持

由于不同的浏览器支持不同的视频编码格式，为了确保跨浏览器兼容性，通常需要提供多个视频源。可以使用 <source> 子标签来实现这一点：

<video controls width="640" height="360">
  <source src="your_video_url.mp4" type="video/mp4">
  <source src="your_video_url.webm" type="video/webm">
  <source src="your_video_url.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

这里包含了MP4、WebM和Ogg三种常见格式，浏览器会自动选择其能识别的第一个格式进行播放。

3. 高级特性

除了基本的播放功能，<video> 标签还支持许多高级特性：

• 自动播放：通过 autoplay 属性可以让视频加载完成后立即开始播放。

• 循环播放：使用 loop 属性可以使视频播放结束后重新开始。

• 预加载：通过 preload 属性可以控制视频加载策略，如 auto（默认）、metadata（仅加载元数据）或 none（不预先加载）。

• 播放事件监听：通过JavaScript可以监听视频的播放状态变化，如 play, pause, ended 等事件。

4. 全屏播放

大部分现代浏览器都支持全屏模式，可以通过JavaScript调用 requestFullscreen() 方法实现：

var myVideo = document.getElementById("myVideo");
myVideo.addEventListener("click", function() {
  if (this.requestFullscreen) {
    this.requestFullscreen();
  } else if (this.mozRequestFullScreen) { /* Firefox */
    this.mozRequestFullScreen();
  } else if (this.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    this.webkitRequestFullscreen();
  }
});