html加载视频

HTML加载视频详解

使用HTML5 <video>

基本语法

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

常用属性说明

属性	作用
src	视频文件路径
controls	显示播放控件
autoplay	自动播放
loop	循环播放
muted	静音播放
width/height	设置宽高
poster	视频封面图

多格式兼容方案

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

自定义控制栏

<video id="myVideo" src="video.mp4"></video>
<button onclick="document.getElementById('myVideo').play()">播放</button>
<button onclick="document.getElementById('myVideo').pause()">暂停</button>

使用Video.js库

引入方式

<link href="https://cdn.jsdelivr.net/npm/video.js@7/dist/video-js.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/video.js@7/dist/video.min.js"></script>

初始化代码

<video id="myVideo" class="video-js" data-setup='{}'>
  <source src="video.mp4" type="video/mp4">
</video>

配置选项

配置项	说明
fluid	响应式布局
controls	是否显示控制栏
autoplay	是否自动播放
preload	预加载策略（none/metadata/auto）

使用Object或Embed标签

Object标签方案

<object width="640" height="360" data="video.mp4" type="video/mp4">
  <param name="autoplay" value="false">
  您的浏览器不支持Object标签
</object>

Embed标签方案

<embed src="video.mp4" type="video/mp4" width="640" height="360">

兼容性对比表

特性	<video>	Object/Embed
HTML5标准	是	否
跨浏览器支持	IE9+/现代浏览器	IE8+
可定制控件	强	弱
事件处理	完善	有限

相关问题与解答

Q1：如何实现视频自适应不同屏幕尺寸？
A：推荐使用Video.js的fluid配置项，配合CSS百分比布局：

<video id="myVideo" class="video-js vjs-fluid" data-setup='{"fluid": true}'>...</video>

.video-js {
  width: 100%;
  height: auto;
}

Q2：如何处理视频加载失败的情况？
A：可以通过JavaScript监听error事件，并显示备用内容：

const video = document.getElementById('myVideo');
video.addEventListener('error', function() {
  this.parentNode.innerHTML = '<div>视频加载失败，请稍后重试