介绍
ember-videojs-dash 是一个基于 Ember.js 平台的 npm 包，用于在 Web 页面中播放 MPEG-DASH (Dynamic Adaptive Streaming over HTTP) 流媒体视频。它集成了 Video.js 和 dash.js，提供了多种播放器控件和可拓展的组件。
本篇文章将会介绍如何使用 ember-videojs-dash 包，并提供示例代码。
安装
使用 npm 安装 ember-videojs-dash：
npm install ember-videojs-dash --save-dev
使用
要使用 ember-videojs-dash 包，需要在 HTML 中引入 Video.js 和 dash.js 库，并在 Ember 模板中添加视频播放器控件。
引入库文件
可以从 Video.js 和 dash.js 的 CDN 进行引入，
<!-- 引入 Video.js 库 --> <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.min.js"></script> <!-- 引入 dash.js 库 --> <script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
如果需要更高版本或者本地引入请参照官方文档。
添加播放器控件
在 Ember 模板中添加 Component 代码如下：
{{!-- 模板.hbs 文件 --}}
{{ember-videojs-dash
src="https://example.com/demo.mpd"
controls=true
autoplay=false
}}-- -------------------- ---- -------
-- ------------ --
------ ----- ---- --------
------ ------- ------------------------
----------- --------------------
-- ------- -----
-------------- -
------ -
---- -
-- -- ------ -----
-
-
--
---属性
ember-videojs-dash 支持的属性非常多，以下是一些常用属性。
src: 视频链接。必填项。
controls: 是否显示控件。默认为 true。
autoplay: 是否自动播放。默认为 false。
aspectRatio: 视频宽高比。
更多属性可以参考官方文档。
示例代码
为了更好的理解，我们创建一个简单的 demo。
<!-- 引入 Video.js 和 dash.js 库 -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<!-- 在 Ember 应用中添加组件 -->
{{my-video-player}}-- -------------------- ---- -------
-- ------------ --
------ ----- ---- --------
------ ------- ------------------------
----------- --------------------
-- ------- -----
-------------- -
------ -
---- -
-- -- ------ -----
-
-
--
-- -----
------------ -
--- -------- - -----------------------------------------------------------
--- ------------- - ----------------- -
------ -
------------------ ------
------------------ ------
-
-- ---------------------------
--- ------- - ----------------- -
--------- ------
--------- -----
-------- --
---- ---------
----- -----------------------
--
-- ---------------
--- ----------- - ----------------------- ---------
----------------------- -------------
--
----------- -
------------------
--
---如果以上代码工作正常，你应该能看到一个可播放的视频。完整代码可以在 GitHub 上获得。
结语
在本篇文章中，我们探讨了如何使用 ember-videojs-dash 包，以及如何添加视频播放器控件。希望这篇文章能够帮助读者更好地理解和使用 ember-videojs-dash 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f981e8991b448e0c61