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" rel="external nofollow" 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事件中加入
// 摘自阿里云DEMO this.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中进行初始化。