Dash.js 使用记录Dash.js 使用记录初始化打包后将生成的dist文件夹中的dash.all.min.js

Dash.js 使用记录

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

初始化

从仓库拉取项目

git clone https://github.com/Dash-Industry-Forum/dash.js.git

安装项目依赖

npm install

启动示例demo

npm run start

项目打包

npm run build

打包后将生成的dist文件夹中的dash.all.min.js拿到需要使用的项目中即可使用

React项目使用记录

将dash.all.min.js放在静态资源库之后，在./public/index.html中进行引用。

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

在./src/index.js中声明全局变量

const {dashjs} = window;

接下来就可以在项目中使用dash.js了

import React from 'react';
import './DashPlayer.css';
import { Button } from "antd";


class DashPlayer extends React.Component {
  componentDidMount() {
    console.log('myVideo Mount')
    this.loadMpd();
  }
  loadMpd() {
    const video = this.refs.myVideo;
    var url = "https://dash.akamaized.net/digitalprimates/fraunhofer/480p_video/heaac_2_0_with_video/Sintel/sintel_480p_heaac2_0.mpd";
    var player = window.dashjs.MediaPlayer().create();
    player.initialize(video, url, true);
  }
  render() {
    return (
      <div className="App" >
        <div>
          <video id="videoPlayer" controls height="600" ref='myVideo' ></video>
        </div>
      </div >
    );
  }
}

export default DashPlayer;

本次项目中调用dash.js的方法也可以用做react项目中调用无法通过npm安装的第三方依赖的使用方法。