HTML5的

基础视频嵌入示例

代码详细解释
src
属性
：指定视频文件的路径。这里使用相对路径
videos/sample.mp4
，实际开发中应替换为您的视频文件URL。建议使用绝对路径或CDN链接以确保加载稳定。
controls
属性
：启用浏览器默认的视频控制条（播放/暂停按钮、进度条、音量控制等）。如果不添加此属性，视频将没有可见的控制界面，用户无法手动操作。
poster
属性
：设置视频的封面图。在视频加载或播放前显示的图像，通常是一张代表视频内容的图片（如
poster.jpg
）。这能提升用户体验，避免页面出现空白。
width
和
height
属性
：定义视频的显示尺寸。这里设置为800×450像素。但为了响应式设计，我们在CSS中使用了
width: 100%; max-width: 800px;
，这样视频在小屏幕上会自动缩放。
preload
属性
：控制视频的预加载行为。
metadata
表示只预加载视频的元数据（如时长、尺寸），而不是整个视频文件。这有助于节省带宽，尤其在移动设备上。其他值包括
none
（不预加载）和
auto
（自动预加载整个视频）。
muted
属性
：视频默认静音。这是许多浏览器（如Chrome）对自动播放的要求，否则自动播放会被阻止。
loop
属性
：视频播放结束后自动循环播放。
autoplay
属性
：视频加载后自动播放。但请注意，现代浏览器（如Chrome、Safari）通常要求视频必须静音（
muted
）才能自动播放，否则会忽略此属性。
后备内容
：

# 转换为WebM (VP9编码，高效压缩)
ffmpeg -i source.mov -c:v libvpx-vp9 -b:v 1M -c:a libopus sample.webm

# 转换为Ogg (Theora编码)
ffmpeg -i source.mov -c:v libtheora -q:v 5 -c:a libvorbis sample.ogv
解释
：
-c:v
指定视频编码器，
-profile:v baseline
确保H.264的兼容性（适用于旧设备），
-pix_fmt yuv420p
是H.264的标准像素格式。转换后，将这些文件上传到服务器，并在中引用。
2. 浏览器特定兼容性
IE11及Edge Legacy
：这些浏览器对MP4支持良好，但不支持WebM。确保MP4是首选源。IE11需要
controls
属性，否则视频不可见。测试时，使用IE的开发者工具模拟旧版。
Safari (iOS/macOS)
：Safari对MP4支持最佳，但不支持WebM。iOS Safari要求视频必须有
controls
或通过JavaScript触发播放。自动播放在iOS上严格限制，必须用户交互（如点击）才能启动。
Firefox
：支持WebM和Ogg，但对MP4的支持依赖系统解码器。如果MP4不播放，提供WebM作为首选。
Chrome/Edge (Chromium-based)
：支持所有格式，但对自动播放有严格政策（需
muted
）。
兼容性代码增强示例
（添加JavaScript检测和回退）：

解释
：
canPlayType
方法返回字符串表示支持程度（如”probably”、”maybe”、”“）。如果返回空字符串，则不支持。事件监听器处理错误，iOS检测确保兼容。
3. 移动端兼容性
iOS (Safari)
：视频全屏播放默认使用原生播放器。添加
playsinline
属性防止自动全屏：