videojs m3u8
时间: 2024-12-27 16:20:41 浏览: 13
### 如何在 Video.js 中使用 M3U8 格式播放视频
为了使 Video.js 支持 M3U8 格式的视频播放,通常需要引入 `videojs-contrib-hls` 插件。不过,在 Video.js 7 版本之后,默认已经包含了 HLS (HTTP Live Streaming) 的支持功能[^1]。
下面是一个简单的 HTML 文件示例,展示了如何配置 Video.js 来加载并播放 M3U8 格式的流媒体文件:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video.js with M3U8</title>
<!-- 引入 Video.js CSS -->
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<body>
<!-- 定义 video 元素,并指定 class 和 data-setup 属性以便初始化 player -->
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="//vjs.zencdn.net/v/oceans.png" data-setup='{}'>
<!-- 设置 src 并指明 type 是 application/x-mpegURL 表示这是一个 HLS 流 -->
<source src="http://yourdomain.com/path/to/playlist.m3u8" type="application/x-mpegURL">
</video>
<!-- 引入 Video.js JS 库 -->
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
</body>
</html>
```
在这个例子中,通过 `<source>` 标签内的 `type="application/x-mpegURL"` 参数告知浏览器该资源为 HLS 类型的直播或点播内容。对于现代版本的 Video.js 而言,无需额外安装插件即可实现对 M3U8 文件的支持。
阅读全文