html5播放网络视频

HTML5 播放网络视频详解

基础语法与标签

HTML5 引入 <video> 标签，支持直接嵌入视频,基础结构如下：

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

• src: 指定视频路径（支持 MP4、WebM、Ogg 等格式）。
• controls: 显示默认播放控件（播放/暂停、进度条、音量等）。

关键属性与功能

多源兼容与备用方案

通过 <source> 标签提供多种格式,提升浏览器兼容性：

<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>

• type: 声明视频格式,帮助浏览器选择支持的源。
• : 若所有源均不支持,显示文本提示。

事件与交互控制

通过 JavaScript 监听视频事件,实现自定义功能：

自定义控件与样式

隐藏默认控件，通过 CSS 和 JavaScript 自定义：

<video id="customVideo" controlsList="nodownload nofullscreen">
  <source src="video.mp4">
</video>
<div class="custom-controls">
  <button id="playBtn">播放</button>
  <button id="pauseBtn">暂停</button>
</div>

video {
  background: #000; / 自定义背景 /
}
.custom-controls {
  margin-top: 10px; / 自定义布局 /
}

const video = document.getElementById('customVideo');
video.removeAttribute('controls'); // 隐藏默认控件
document.getElementById('playBtn').addEventListener('click', () => video.play());
document.getElementById('pauseBtn').addEventListener('click', () => video.pause());

兼容性与错误处理

1. 检测浏览器支持：

   const canPlay = video.canPlayType('video/mp4'); // 返回 "probably"/"maybe"/""
   if (canPlay === '') {
     alert('当前浏览器不支持该视频格式');
   }

2. 错误处理：

   video.onerror = function(e) {
     console.error('视频加载失败：', e);
     alert('无法播放视频，请检查网络或文件格式');
   };

高级功能：字幕与章节

1. 添加字幕（WebVTT 格式）：

   <video controls>
     <source src="video.mp4">
     <track src="subtitles.vtt" kind="subtitles" lang="zh">
   </video>

   • <track>: 支持多语言字幕，kind 可为 subtitles、captions。
2. 嵌入章节（Cues）：

   <video controls>
     <source src="video.mp4">
     <track src="chapters.vtt" kind="chapters" label="章节">
   </video>

   • 章节文件: 使用 WEBVTT 格式定义时间点与标题。

相关问题与解答

问题 1：如何解决视频跨域加载问题？

解答：
跨域加载视频时，需确保服务器允许跨域访问，可通过设置 HTTP 响应头 Access-Control-Allow-Origin: 或指定域名，在 Nginx 配置中添加：

location /videos/ {
  add_header 'Access-Control-Allow-Origin' '';
}

若无法修改服务器,可使用代理服务器中转请求。

问题 2：如何实现全屏播放？

解答：
使用 JavaScript 的 requestFullscreen() 方法：

const video = document.querySelector('video');
document.getElementById('fullscreenBtn').addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullScreen) { // Safari/Chrome 前缀
    video.webkitRequestFullScreen();
  } else if (video.mozRequestFullScreen) { // Firefox 前缀
    video.mozRequestFullScreen();
  }
});

需在按钮点击时调用，并处理