如何在Angular中引入AliPlayer

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

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

  
  
  

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

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

对应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中进行初始化。

 

你可能感兴趣的:(Angular,技术)