dash.js

构建状态 (CircleCI):

加入 Slack 上的 #dashjs 频道！

从 v3.x 迁移到 v4.0

如果您正在从 dash.js v3.x 迁移到 dash.js v4.x，请阅读此处的迁移文档。

概述

这是一个通过 JavaScript 和兼容浏览器播放 MPEG DASH 的参考客户端实现。在我们的wiki上了解更多关于 DASH IF 参考客户端的信息。

如果您的目的是使用播放器代码而不向该项目贡献，那么请使用 MASTER 分支，其中包含已批准和稳定的公开发布版本。

如果您的目标是改进或扩展代码并向该项目贡献，那么您应该在 DEVELOPMENT 分支中进行更改并提交拉取请求。阅读我们的 CONTRIBUTION.md 文件，了解贡献过程的详细说明。

所有新工作都应在开发分支中进行。主分支现在仅用于标记构建。

演示和参考播放器

所有这些参考构建和压缩文件都可通过 http 和 https 访问。

示例

多个 dash.js 示例涵盖了广泛的常见用例。

参考播放器

如果您想直接访问而无需编写任何 JavaScript，可以使用已发布的预构建参考播放器。

/dev 分支的每日构建参考播放器是预发布版本，但包含最新的修复。如果您正在调试播放问题，这是一个很好的起点。

CDN 托管文件

最新的压缩文件已托管在全球 CDN 上，可以免费用于生产环境：

此外，所有发布版本都可以通过以下 URL 获取。将 "vx.x.x" 替换为发布版本，例如 "v3.1.0"。

文档

完整的 API 文档描述了所有公共方法、接口、属性和事件。

如需帮助，请加入我们的 Slack 频道、我们的邮件列表，并阅读我们的 wiki。

教程

有关特定主题的详细信息可以在我们的教程中找到：

入门

标准设置方法使用 JavaScript 初始化并向 dash.js 提供视频详细信息。MediaPlayerFactory 提供了一种替代的声明式设置语法。

标准设置

在 HTML 中创建一个 video 元素。为了我们的目的，请确保包含 controls 属性。

<video id="videoPlayer" controls></video>

将 dash.all.min.js 添加到 body 的末尾。

<body>
  ...
  <script src="yourPathToDash/dash.all.min.js"></script>
</body>

现在是重要的部分。我们需要创建一个 MediaPlayer 并初始化它。


var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoPlayer"), url, true);

完成后，它应该看起来类似这样：

<!doctype html>
<html>
    <head>
        <title>Dash.js 很棒</title>
        <style>
            video {
                width: 640px;
                height: 360px;
            }
        </style>
    </head>
    <body>
        <div>
            <video id="videoPlayer" controls></video>
        </div>
        <script src="yourPathToDash/dash.all.min.js"></script>
        <script>
            (function(){
                var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
                var player = dashjs.MediaPlayer().create();
                player.initialize(document.querySelector("#videoPlayer"), url, true);
            })();
        </script>
    </body>
</html>

模块设置

我们将dash.js发布到npm。在samples/modules目录中可以找到在不同模块打包工具中使用dash.js的示例。

MediaPlayerFactory设置

在网页中构建Dash.js播放器的另一种方法是使用MediaPlayerFactory。MediaPlayerFactory将自动在适当标记的视频元素上实例化并初始化MediaPlayer模块。

在你的html中创建一个视频元素，并将你的mpd文件路径作为src提供。同时确保你的视频元素有data-dashjs-player属性。

<video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls>
</video>

将dash.all.min.js添加到body的末尾。

<body>
  ...
  <script src="yourPathToDash/dash.all.min.js"></script>
</body>

完成后，它应该看起来类似这样：

<!doctype html>
<html>
    <head>
        <title>Dash.js 很棒</title>
        <style>
            video {
                width: 640px;
                height: 360px;
            }
        </style>
    </head>
    <body>
        <div>
            <video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls>
            </video>
        </div>
        <script src="yourPathToDash/dash.all.min.js"></script>
    </body>
</html>

开发者快速入门

安装核心依赖
- 安装nodejs
检出项目仓库（默认分支：development）
- git clone https://github.com/Dash-Industry-Forum/dash.js.git
安装依赖
- npm install
构建、监视文件变化并启动样例页面，其中包含指向参考播放器和其他示例（基本示例、字幕、广告、直播等）的链接。
- npm run start