使用 DASH.js 在 HTML5 应用程序中嵌入 MPEG-DASH 自适应流式处理视频Embedding an MPEG-DASH Adaptive Streaming Video in an HTML5 Application with DASH.js

概述Overview

MPEG-DASH 是视频内容自适应流式处理的 ISO 标准,为希望传送高质量自适应视频流式处理输出的开发人员提供了显著的好处。MPEG-DASH is an ISO standard for the adaptive streaming of video content, which offers significant benefits for developers wanting to deliver high-quality, adaptive video streaming output. 使用 MPEG-DASH,当网络阻塞时,视频流会自动调整到较低清晰度。With MPEG-DASH, the video stream adjusts automatically to a lower definition when the network becomes congested. 这将减少在播放器下载下几秒钟要播放内容(又称缓冲)时观众看到“暂停”视频的可能性。This reduces the likelihood of the viewer seeing a "paused" video while the player downloads the next few seconds to play (aka buffering). 当网络拥塞减少时,视频播放器将转而恢复到较高质量的流。As network congestion reduces, the video player will in turn return to a higher-quality stream. 这种适应所需带宽的能力也会导致视频开始的速度更快。This ability to adapt the bandwidth required also results in a faster start time for video. 这意味着可以在快速下载较低质量段播放最初的几秒钟,并在已缓冲足够内容后提升到更高质量。That means that the first few seconds can be played in a fast-to-download lower quality segment and then step up to a higher quality once sufficient content has been buffered.

Dash.js 是用 JavaScript 编写的开源 MPEG-DASH 视频播放器。Dash.js is an open-source MPEG-DASH video player written in JavaScript. 其目标是提供可以在需要视频播放的应用程序中自由重用的功能强大的跨平台播放器。Its goal is to provide a robust, cross-platform player that can be freely reused in applications that require video playback. 它在支持 W3C 媒体源扩展 (MSE) 的任何浏览器(目前为 Chrome、Microsoft Edge 和 IE11,其他浏览器已指示有意支持 MSE)中提供 MPEG-DASH 播放。It provides MPEG-DASH playback in any browser that supports the W3C Media Source Extensions (MSE), today that is Chrome, Microsoft Edge, and IE11 (other browsers have indicated their intent to support MSE). 有关 DASH.js、js 的详细信息,请参阅 GitHub dash.js 存储库。For more information about DASH.js, js see the GitHub dash.js repository.

创建基于浏览器的流式处理视频播放器Creating a browser-based streaming video player

要使用所需控件(如播放、暂停、快退等)创建显示视频播放器的简单网页,需要:To create a simple web page that displays a video player with the expected controls such a play, pause, rewind etc., you need to:

  1. 创建一个 HTML 页Create an HTML page
  2. 添加视频标记Add the video tag
  3. 添加 dash.js 播放器Add the dash.js player
  4. 初始化播放器Initialize the player
  5. 添加一些 CSS 样式Add some CSS style
  6. 在实现 MSE 的浏览器中查看结果View the results in a browser that implements MSE

只需几行 JavaScript 代码,即可完成初始化播放器。Initializing the player can be completed in just a handful of lines of JavaScript code. 使用 dash.js,将 MPEG-DASH 视频嵌入到基于浏览器的应用程序中确实就这么简单。Using dash.js, it really is that simple to embed MPEG-DASH video in your browser-based applications.

创建 HTML 页Creating the HTML Page

第一步是创建一个包含 video 元素的标准 HTML 页面,将此文件保存为 basicPlayer.html,如以下示例所示:The first step is to create a standard HTML page containing the video element, save this file as basicPlayer.html, as the following example illustrates:

    <!DOCTYPE html>
    <html>
      <head><title>Adaptive Streaming in HTML5</title></head>
      <body>
        <h1>Adaptive Streaming with HTML5</h1>
        <video id="videoplayer" controls></video>
      </body>
    </html>

添加 DASH.js 播放器Adding the DASH.js Player

要将 dash.js 引用实现添加到应用程序,需要从最新版本的 dash.js 项目中找到 dash.all.js 文件。To add the dash.js reference implementation to the application, you need to grab the dash.all.js file from the latest version of dash.js project. 此文件应保存到应用程序的 JavaScript 文件夹中。This should be saved in the JavaScript folder of your application. 此文件是一个易用文件,将所有必要的 dash.js 代码一起提取到单个文件中。This file is a convenience file that pulls together all the necessary dash.js code into a single file. 如果浏览 dash.js 存储库,将找到各个文件、测试代码以及更多内容,但如果只想使用 dash.js,那么 dash.all.js 文件就是你所需的文件。If you have a look around the dash.js repository, you find the individual files, test code and much more, but if all you want to do is use dash.js, then the dash.all.js file is what you need.

要将 dash.js 播放器添加到你的应用程序,请将脚本标记添加到 basicPlayer.html 的 head 部分中:To add the dash.js player to your applications, add a script tag to the head section of basicPlayer.html:

    <!-- DASH-AVC/265 reference implementation -->
    < script src="js/dash.all.js"></script>

接下来,创建一个函数以便在加载页面时初始化播放器。Next, create a function to initialize the player when the page loads. 在加载 dash.all.js 的代码行后添加以下脚本:Add the following script after the line in which you load dash.all.js:

    <script>
    // setup the video element and attach it to the Dash player
    function setupVideo() {
      var url = "http://wams.edgesuite.net/media/MPTExpressionData02/BigBuckBunny_1080p24_IYUV_2ch.ism/manifest(format=mpd-time-csf)";
      var context = new Dash.di.DashContext();
      var player = new MediaPlayer(context);
                      player.startup();
                      player.attachView(document.querySelector("#videoplayer"));
                      player.attachSource(url);
    }
    </script>

此函数首先创建一个 DashContext。This function first creates a DashContext. 此项用于为特定运行时环境配置应用程序。This is used to configure the application for a specific runtime environment. 从技术角度看,它定义在构造应用程序时,依赖关系注入框架应使用的类。From a technical point of view, it defines the classes that the dependency injection framework should use when constructing the application. 在大多数情况下,将使用 Dash.di.DashContext。In most cases, you use Dash.di.DashContext.

接下来,实例化 dash.js 框架的主类 MediaPlayer。Next, instantiate the primary class of the dash.js framework, MediaPlayer. 此类包含所需的核心方法(如播放和暂停)、管理与 video 元素的关系,还管理媒体演示描述 (MPD) 文件的解释,该文件说明了要播放的视频。This class contains the core methods needed such as play and pause, manages the relationship with the video element and also manages the interpretation of the Media Presentation Description (MPD) file, which describes the video to be played.

调用 MediaPlayer 类的 startup() 函数可确保播放器已准备好播放视频。The startup() function of the MediaPlayer class is called to ensure that the player is ready to play video. 除了其他用处以外,此函数还可确保已加载所有必需的类(如上下文所定义)。Among other things, the function ensures that all the necessary classes (as defined by the context) have been loaded. 播放器准备就绪后,便可以使用 attachView() 函数将 video 元素附加上去。Once the player is ready, you can attach the video element to it using the attachView() function. startup 函数使 MediaPlayer 可以将视频流注入到该元素,还可以根据需要控制播放。The startup function enables the MediaPlayer to inject the video stream into the element and also control playback as necessary.

将 MPD 文件的 URL 传递到 MediaPlayer,以便它了解应播放的视频。Pass the URL of the MPD file to the MediaPlayer so that it knows about the video it is expected to play. 刚刚创建的 setupVideo() 函数需要在完全加载页后执行一次。The setupVideo() function just created will need to be executed once the page has fully loaded. 可通过使用 body 元素的 onload 事件来执行此操作。Do this by using the onload event of the body element. <body> 元素更改为:Change your <body> element to:

    <body onload="setupVideo()">

最后,使用 CSS 设置 video 元素的大小。Finally, set the size of the video element using CSS. 在自适应流式处理环境中,这一点尤其重要,因为当播放适应不断变化的网络条件时,所播放的视频的大小可能会更改。In an adaptive streaming environment, this is especially important because the size of the video being played may change as playback adapts to changing network conditions. 在此简单演示中,直接通过将以下 CSS 添加到页面的 head 部分来强制将 video 元素设为可用浏览器窗口的 80%:In this simple demo simply force the video element to be 80% of the available browser window by adding the following CSS to the head section of the page:

    <style>
    video {
      width: 80%;
      height: 80%;
    }
    </style>

播放视频Playing a Video

要播放视频,请将浏览器指向 basicPlayback.html 文件,并单击所显示的视频播放器上的“播放”。To play a video, point your browser at the basicPlayback.html file and click play on the video player displayed.

媒体服务学习路径Media Services learning paths

媒体服务 v3(最新版本)Media Services v3 (latest)

查看最新版本的 Azure 媒体服务!Check out the latest version of Azure Media Services!

媒体服务 v2(旧版)Media Services v2 (legacy)

另请参阅See Also

开发视频播放器应用程序Develop video player applications

GitHub dash.js 存储库GitHub dash.js repository