- 使用 HTML5 的
<video> (推荐，现代、简单、跨平台) - 使用第三方 JavaScript 播放器库 (如 Video.js, Plyr 等，功能更丰富,样式更美观)
下面我将为你提供这两种方法的详细代码示例和讲解。
（图片来源网络，侵删）
使用 HTML5 的 <video> 标签 (最简单直接)
这是目前最标准、最推荐的方法，现代浏览器（如 Chrome, Firefox, Edge, Safari）都原生支持它。
核心代码
你只需要在 ASP 页面的 HTML 部分加入 <video> 标签即可。
<video width="640" height="360" controls>
<source src="你的视频文件.mp4" type="video/mp4">
<source src="你的视频文件.webm" type="video/webm">
您的浏览器不支持 HTML5 视频标签。
</video>
参数解释
width和height: 设置视频播放器的宽度和高度。controls: 非常重要，这个属性会显示浏览器自带的播放控件（播放/暂停、音量、进度条、全屏等）。<source>: 标签用于提供多个视频源，浏览器会尝试按顺序播放第一个它所支持的格式，这能兼容更多浏览器。src: 视频文件的路径。type: 指定视频文件的 MIME 类型,这可以帮助浏览器更快地选择正确的播放器。
- 标签内的文本 (
您的浏览器不支持...): 如果浏览器不支持<video>标签,则会显示这段提示文本。
完整的 ASP 示例
这是一个完整的 .asp 文件示例,它直接在页面上嵌入了一个视频播放器。
video_player.asp
（图片来源网络，侵删）
<%@ Language=VBScript %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">ASP 在线视频播放示例</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding-top: 50px; }
video { border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<h1>使用 HTML5 video 标签播放视频</h1>
<%
' --- 视频文件路径配置 ---
' 这里使用相对路径，假设你的视频文件和这个ASP文件在同一个目录下
' 也可以使用绝对路径，如 "http://www.yourdomain.com/videos/sample.mp4"
Dim videoPathMP4, videoPathWebm
videoPathMP4 = "sample.mp4"
videoPathWebm = "sample.webm"
%>
<video width="640" height="360" controls>
<!--
推荐提供两种格式：MP4 (兼容性最好) 和 WebM (开源，性能好)
你可以根据自己的视频情况提供一种或多种格式。
-->
<source src="<%= videoPathMP4 %>" type="video/mp4">
<source src="<%= videoPathWebm %>" type="video/webm">
您的浏览器不支持 HTML5 视频，请升级您的浏览器。
</video>
<p>这是一个使用 HTML5 原生视频标签的简单示例。</p>
</body>
</html>
如何部署：
- 将你的视频文件（
sample.mp4,sample.webm）和这个video_player.asp文件放在你网站的同一个文件夹下。 - 通过 IIS 或其他 Web 服务器运行这个 ASP 文件。
使用第三方 JavaScript 播放器 (功能更强大)
如果你需要更美观的皮肤、更丰富的功能（如画中画、倍速播放、广告插播等），可以使用第三方播放器库。Video.js 是一个非常流行且功能强大的选择。
步骤 1：引入播放器库
你需要在 HTML 的 <head> 部分引入 Video.js 的 CSS 和 JavaScript 文件，最简单的方式是使用 CDN（内容分发网络）。
步骤 2：修改 HTML 结构
Video.js 提供了一套特定的 HTML 结构，你需要用 video-js 类来初始化播放器。
（图片来源网络，侵删）
步骤 3：初始化播放器
在 <body> 的底部，使用 <script> 标签来初始化你的 Video.js 播放器实例。
完整的 ASP 示例 (使用 Video.js)
video_player_videojs.asp
<%@ Language=VBScript %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">ASP 使用 Video.js 播放视频</title>
<!-- 1. 引入 Video.js CSS -->
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
<!-- 自定义样式 -->
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding-top: 50px; background-color: #f0f0f0; }
.video-container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
h1 { color: #333; }
</style>
</head>
<body>
<div class="video-container">
<h1>使用 Video.js 播放器</h1>
<%
' --- 视频文件路径配置 ---
Dim videoPathMP4
videoPathMP4 = "sample.mp4"
%>
<!-- 2. 使用 Video.js 的 HTML 结构 -->
<video
id="my-video"
class="video-js vjs-default-skin"
controls
preload="auto"
width="640"
height="360"
data-setup="{}">
<source src="<%= videoPathMP4 %>" type="video/mp4">
<p class="vjs-no-js">
要播放此视频，你需要启用 JavaScript，并安装支持 HTML5 video 的播放器。
<a href="https://videojs.com/html5-video-support/" target="_blank">
查看哪些浏览器支持
</a>
</p>
</video>
</div>
<!-- 3. 引入 Video.js JavaScript 并初始化 -->
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
</body>
</html>
代码解释：
<link href="...video-js.css" />: 引入 Video.js 的核心样式文件,定义了播放器的外观。<video id="my-video" class="video-js ...">: 这是 Video.js 的标准写法。id: 给视频元素一个唯一的 ID，方便 JavaScript 操作。class="video-js vjs-default-skin":video-js是必须的类，用于识别和初始化播放器。vjs-default-skin应用默认的皮肤样式。data-setup="{}": 这个属性告诉 Video.js 自动对这个视频元素进行初始化。
<p class="vjs-no-js">: 如果用户禁用了 JavaScript,会显示这段提示。<script src="...video.min.js"></script>: 引入 Video.js 的核心库，通常放在</body>之前,确保页面内容已经加载。
重要注意事项
-
视频文件格式和兼容性
- MP4 (H.264 视频 + AAC 音频): 这是目前兼容性最好的格式,几乎所有现代浏览器都支持。
- WebM (VP8/VP9 视频 + Vorbis/Opus 音频): 由谷歌支持的开源格式，性能通常优于 MP4。
- OGG (Theora 视频 + Vorbis 音频): 另一个开源格式,但在移动端支持不如前两者。
- 最佳实践: 像 HTML5 示例中那样，同时提供 MP4 和 WebM 两种格式,可以覆盖绝大多数用户。
-
视频文件路径
- 相对路径: 如
videos/sample.mp4，如果视频和 ASP 文件在不同目录,需要正确导航。 - 绝对路径: 如
http://www.yourdomain.com/videos/sample.mp4或https://...，使用绝对路径可以避免路径混淆问题,尤其是在使用重写规则或虚拟目录时。 - 流媒体: 如果你的视频很大，直接放在服务器上让用户下载播放（称为 Progressive Download）是可以的，但对于长视频，更好的方式是使用专门的流媒体服务器（如 Adobe Media Server, Wowza, 或基于 HTTP 的 HLS/DASH 协议），这超出了简单 ASP 页面的范围。
- 相对路径: 如
-
服务器支持
- 确保你的 Web 服务器（如 IIS）已经正确配置了 ASP 支持。
- 确保服务器能够正确提供视频文件的 MIME 类型，IIS 和 Apache 默认都已配置好常见的视频类型（如
.mp4,.webm），但如果遇到问题，可能需要手动添加 MIME 类型映射。
| 特性 | HTML5 <video>
| |
|---|---|---|
| 易用性 | 非常简单，原生支持 | 稍复杂，需要引入外部库 |
| 功能 | 基础功能（播放、暂停、音量等） | 非常丰富（皮肤、插件、事件等） |
| 兼容性 | 现代浏览器支持良好 | 通过 Polyfill 可以支持旧浏览器 |
| 定制性 | 样式定制有限 | 高度可定制，外观和功能均可灵活配置 |
| 性能 | 原生，性能好 | 优秀，但比原生多了一层抽象 |
对于绝大多数 ASP 网站应用，方法一（HTML5 <video> 已经足够且是首选，如果你需要更专业的播放体验，方法二（Video.js） 是一个绝佳的选择。
