去年，我写了一篇关于使用 Linux 创建视频流服务器的文章。该项目使用实时消息协议 (RTMP)、Nginx Web 服务器、Open Broadcast Studio (OBS) 和 VLC 媒体播放器。
我使用 VLC 播放我们的视频流，这对于小型本地部署来说可能还可以，但在大规模部署中不太实用。首先，您的观众必须使用 VLC，并且 RTMP 流可能会提供不一致的播放。这就是 Video.js 发挥作用的地方！Video.js 是一个开源 JavaScript 框架，用于创建自定义 HTML5 视频播放器。Video.js 功能非常强大，并且被许多非常流行的网站使用——这主要是由于其开放性以及易于上手和运行。
Video.js 入门
这个项目基于我去年撰写的视频流项目。由于该项目设置为服务 RTMP 流，要使用 Video.js，您需要对 Nginx 配置进行一些调整。HTTP 实时流式传输（HLS）是由 Apple 开发的广泛使用的协议，它可以更好地为多种设备提供流服务。HLS 将获取您的流，将其分解为块，并通过专门的播放列表提供服务。这允许更容错的流，可以在更多设备上播放。
首先，创建一个目录来存放 HLS 流，并授予 Nginx 写入权限
mkdir /mnt/hls
chown www:www /mnt/hls接下来，启动您的文本编辑器，打开 Nginx.conf 文件，并在 application live 部分下添加以下内容
application live {
live on;
# Turn on HLS
hls on;
hls_path /mnt/hls/;
hls_fragment 3;
hls_playlist_length 60;
# disable consuming the stream from nginx as rtmp
deny play all;
}请注意 HLS 片段和播放列表长度设置。您可能希望稍后根据您的流媒体需求调整它们，但这对于入门来说是一个很好的基准。接下来，我们需要确保 Nginx 能够监听来自我们播放器的请求，并了解如何将其呈现给用户。因此，我们希望在 nginx.conf 文件的底部添加一个新部分。
server {
listen 8080;
location / {
# Disable cache
add_header 'Cache-Control' 'no-cache';
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/dash+xml mpd;
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /mnt/;
}
}访问 Video.js 的 入门 页面，下载最新版本并查看发行说明。在那个页面上，Video.js 还有一个很棒的入门模板，您可以使用它来创建一个非常基本的 Web 播放器。我将分解该模板的重要部分，并插入您需要的部分，以使您的新 HTML 播放器使用您的流。
head 中的链接从内容分发网络 (CDN) 链接到 Video.js 库。如果您愿意，您也可以选择在您的 Web 服务器本地下载和存储 Video.js。
<head>
<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>现在进入播放器的真正核心部分。body 部分设置视频播放器将如何显示的参数。在 video 元素中，您需要定义播放器的属性。您希望它有多大？您是否希望它有一个海报（即缩略图）？它是否需要任何特殊的播放器控件？此示例定义了一个简单的 600x600 像素播放器，其中包含一个合适的（对我而言）缩略图，其中包含 Beastie（BSD 守护进程）和 Tux（Linux 企鹅）。
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="600"
height="600"
poster="BEASTIE-TUX.jpg"
data-setup="{}"
>现在您已经设置了播放器的外观，您需要告诉它要播放什么。Video.js 可以处理多种不同的格式，包括 HLS 流。
<source src="http://MY-WEB-SERVER:8080/hls/STREAM-KEY.m3u8" type="application/x-mpegURL" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>录制您的流
保留您的流的副本非常容易。只需将以下内容添加到 nginx.conf 文件中 application live 部分的底部
# Enable stream recording
record all;
record_path /mnt/recordings/;
record_unique on;确保 record_path 存在并且 Nginx 具有写入权限
chown -R www:www /mnt/recordings流式传输结束
就是这样！您现在应该拥有一个漂亮的新型 HTML5 友好型实时视频播放器。有很多很棒的资源可以扩展您的所有视频制作冒险。如果您有任何问题或建议，请随时通过 Twitter 与我联系或在下面发表评论。
10 条评论