如何在Angular中引入AliPlayer

1、可以参照官网H5相关的教程

2、在index.html页面中引入：

  <script src="https://g.alicdn.com/de/prismplayer/2.8.2/hls/aliplayer-vod-anti-min.js"></script><link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" /><script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js"></script>

版本号处改为自己想使用的版本号

3、在需要使用Aliplayer的页面的HTML代码中加入

<div class="prism-player" id="player-con"></div>

对应TS页面中的AfterViewInit事件中加入

    // 摘自阿里云DEMOthis.player = new Aliplayer({"id": "player-con","source": "//player.alicdn.com/video/aliyunmedia.mp4","width": "100%","height": "500px","autoplay": true,"isLive": false,"cover": "//xxx.xxxx.com/xxx.jpg","rePlay": false,"videoHeight": "600","playsinline": true,"preload": true,"autoPlayDelay": "5","autoPlayDelayDisplayText": "这是标题","language": "en-us","controlBarVisibility": "hover","videoWidth": "800","useH5Prism": true});

注：在此踩了个坑，把上面的内容加在了构造中，结果报了『没有为播放器指定容器』的错误，网上查到的基本都是Vue相关的答案。而后，想到没有指定容器，即是容器还没有初始化，因此移至AfterViewInit中进行初始化。

如何在Angular中引入AliPlayer相关推荐

angular和react_如何在Angular中验证默认和自定义React形式
angular和react by Luuk Gruijs Luuk Gruijs着如何在Angular中验证默认和自定义React形式 (How to validate default and cu ...
如何在Revit中引入WPF界面（通俗易懂）
欢迎加入BIM行业开发交流1群群号:711844216(满),二群群号:1016453207 背景小伙伴们在做revit二次开发时,为了丰富开发内容,会有引入界面的需求.作为窗体程序开发,基本上有 ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
如何在React中引入阿里图标库的图标
一.周所周知在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
如何在C#中引入CPLEX的dll（CPLEX系列-教程一）
以前写在CSDN上的文章.转到博客园之后,打算把这个教程移过来,顺便完善后面的教程.主要是在Asp.Net+EF6里面使用cplex,完成一个最优生产计划的决策.当时在查找如何在C#中引用cplex时 ...
如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
关于如何在vue中引入jquery？
相信大家有时候都会遇到在vue的项目中引入jquery,但是不会失效,今天就带领大家手把手在vue项目中引入jquery,亲测有效! 1.安装jquery npm install jquery --s ...
如何在typescript中引入jquery
引入jQuery之前的操作在typescript中引入jQuery时首先要创建一个typescript项目(直接新建的typescript文件无法通过此方法引入) 一.创建typescript项目 ...
html5页面引入jquery,如何在javascript中引入jQuery？
jquery是一个用来代替JavaScript来快捷书写前端脚本语言的库,jquery可以大大的简化复杂的js代码,使开发人员专注于实现页面的效果. jquery的导入方式有两种,一种是本地导入,一种 ...
如何在html 中引入其它html文件
这里给出三种 html文件引入其它html文件的方法: 1.IFrame引入 <IFRAME NAME="content_frame" width=100% height= ...

如何在Angular中引入AliPlayer

如何在Angular中引入AliPlayer相关推荐

最新文章

热门文章