我是 html 5 自适应流媒体的新手,那里的信息非常矛盾。我想在我的 Windows 服务器云上创建一个测试环境,流式传输一个 2 小时的 h264 文件,并使用 html5 播放器在我的本地计算机上播放。
问题:为什么我需要 Dash.js 来播放 Mpeg dash 视频?我必须在服务器(听起来很明显)或客户端(听起来很奇怪)中安装 Dash.js 吗?
我是 html 5 自适应流媒体的新手,那里的信息非常矛盾。我想在我的 Windows 服务器云上创建一个测试环境,流式传输一个 2 小时的 h264 文件,并使用 html5 播放器在我的本地计算机上播放。
问题:为什么我需要 Dash.js 来播放 Mpeg dash 视频?我必须在服务器(听起来很明显)或客户端(听起来很奇怪)中安装 Dash.js 吗?
DASH videos, like any other videos, involve two parts: a serve serves the videos and a player consumes them and presents them to the user. I will explain what is needed on both sides.
Pieces of DASH videos can be delivered over HTTP or HTTPS by any modern web server - Apache, ngnix, IIS and others. No plugin or additional software is needed on the server side to serve DASH videos - they are just files and every web server knows how to serve files. You may need to do some configuration, however.
Most web servers have a list of MIME types of the files they are allowed to serve - you do usually need to add DASH videos to this list, since the default settings tend to be restrictive for security reasons and do not allow DASH videos to be streamed.
Here is an example web.config for IIS that allows DASH videos to be served:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".m4s" />
<mimeMap fileExtension=".m4s" mimeType="video/mp4" />
<remove fileExtension=".mpd" />
<mimeMap fileExtension=".mpd" mimeType="application/dash+xml" />
<remove fileExtension=".m4f" />
<mimeMap fileExtension=".m4f" mimeType="video/mp4" />
<remove fileExtension=".m4a" />
<mimeMap fileExtension=".m4a" mimeType="video/mp4" />
</staticContent>
</system.webServer>
</configuration>
The different video/mp4
elements are there since different DASH encoders name their files differently.
Some DASH players, especially web-based ones, may also require the server to support cross-origin resource sharing (CORS). This is a security mechanism that helps prevent malicious websites from operating by enabling you to choose what sites your content can be displayed on. The exact CORS headers your server needs to provide also depend on the player - in some situations, additional headers are used and must be explicitly enabled. I will leave the details of CORS out of scope of this answer. Here is a simple example IIS configuration that allows any website to consume the served videos:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
You need a player, obviously. There exist different types of players: stand-alone desktop apps (e.g. VLC), player SDKs for Android/iOS apps (e.g. ExoPlayer and Microsoft PlayReady Client SDK) and players for websites (e.g. dash.js and Bitdash). On Windows 10, Internet Explorer will even include a built-in player for DASH videos.
This is where dash.js comes in - it is a player. You put it in your website if you want your website to play videos. There are also different players available.
Depending on how you wish to offer content to the end-user you choose a player and, if not a stand alone player, embed it into your app or website. You provide the URL to the player and it will do its thing. Simple.
Website-based players require the server to support CORS but stand-alone or app-hosted players do not require it.
dash.js
流式传输 MPEG-DASH 视频您需要它,因为 Web 浏览器本身并不支持 DASH,因为它们不需要这样做。但是, Web 浏览器需要支持媒体源扩展(MSE)。对于确实实现了 MSE 的(较新的)浏览器版本,它们的“基本”支持的媒体源(如 MP4)可以通过包含 dash.js 等 Javascript 库来由 DASH 进行补充。这比要求用户安装 Flash Player 等插件来播放非基本媒体类型的旧例程更加灵活(并且面向未来)。
您还询问是否dash.js
需要在服务器端或客户端安装某些东西。Sander 已经写过任何可能需要提供文件的服务器端设置,所以我将添加一个关于如何在客户端实现它的解释。
从dash.js
GitHub 页面:
<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script>
...
<style>
video {
width: 640px;
height: 360px;
}
</style>
...
<body>
<div>
<video data-dashjs-player autoplay src="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd" controls></video>
</div>
</body>
请注意,如果您也想进行 Clear Key 加密,则需要dash.all.min.js
从安全上下文(例如 TLS)中为机器人提供视频文件。如果您想使用xhtml
format 而不是html
,则需要在元素="true"
的每个布尔属性之后添加。<video>