去年，我写了一篇关于使用 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 Live Streaming (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 库。如果您愿意，您也可以选择下载 Video.js 并将其本地存储在您的 Web 服务器上。
<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 条评论