阿里云web播放器使用示例

initPlayer(playerData) {
      if (!playerData) return false;
      var sys=this.sys
      var player = new Aliplayer(
        {
          source:"http://video.cdn.ait-center.com/fd785f8981284e8b8068a5b05e460569/fae853ec8754489bad697240b3fd3ade-43f9a233aa979fc17c590bdf68fa3649-fd-encrypt-stream.m3u8",
          // vid: playerData.video_id,
          // playauth: playerData.playauth,
          cover: playerData.cover,
          id: "J_prismPlayer",
          // autoplay: false,
          // width: sys.w+'px',
          // height: sys.h+'px',
          // format: "m3u8",
          // preload: true, //播放器自动加载,目前仅h5可用。
          // encryptType: 1,
          // x5_type: "h5",
          // useFlashPrism: true,
          // useH5Prism: false,
          useHlsPluginForSafari: true, //Safari浏览器可以启用Hls插件播放,
          // skinRes:"@/static/skin/",
          // skinLayout: [
          //   { name: "bigPlayButton", align: "cc", x: 30, y: 80 },
          //   {
          //     name: "controlBar",
          //     align: "blabs",
          //     x: 0,
          //     y: 0,
          //     children: [
          //       { name: "progress", align: "tlabs", x: 0, y: 0 }, //播放进度控制
          //       { name: "playButton", align: "tl", x: 15, y: 26 }, //开始播放控件
          //       { name: "timeDisplay", align: "tl", x: 10, y: 24 }, //播放时间控件
          //       { name: "fullScreenButton", align: "tr", x: 10, y: 25 }, //全屏控件
          //       { name: "streamButton", align: "tr", x: 10, y: 23 }, //清晰度控件
          //       { name: "volume", align: "tr", x: 10, y: 25 } //音量控件
          //     ]
          //   }
          // ],
          /************************** */
          "format": "m3u8",
          "mediaType": "video",
          "encryptType": 1,
          "width": sys.w+'px',
          "height": sys.h+'px',
          "autoplay": false,
          "rePlay": false,
          // "playsinline": true,
          "preload": true,
          "language": "zh-cn",
          "controlBarVisibility": "click",
          "useH5Prism": true,
          "definition":'FD,LD,SD,HD',
          "defaultDefinition":'LD',
          // "components": [{
          //   "name": 'RateComponent',
          //   "type": AliPlayerComponent.RateComponent
          // }],
          "skinLayout": [
            { name: "bigPlayButton", align: "cc", x: 30, y: 80 },
            {
              "name": "H5Loading",
              "align": "cc"
            },
            {
              "name": "errorDisplay",
              "align": "tlabs",
              "x": 0,
              "y": 0
            },
            {
              "name": "infoDisplay"
            },
            {
              "name": "tooltip",
              "align": "blabs",
              "x": 0,
              "y": 56
            },
            {
              "name": "thumbnail"
            },
            {
              "name": "controlBar",
              "align": "blabs",
              "x": 0,
              "y": 0,
              "children": [
                {
                  "name": "progress",
                  "align": "blabs",
                  "x": 0,
                  "y": 44
                },
                {
                  "name": "playButton",
                  "align": "tl",
                  "x": 15,
                  "y": 12
                },
                {
                  "name": "timeDisplay",
                  "align": "tl",
                  "x": 10,
                  "y": 7
                },
                {
                  "name":"speedButton",
                  "align":"tr",
                  "x":10,
                  "y":9
                },
                { 
                  "name": "setting", 
                  "align": "tr", 
                  "x": 15, 
                  "y": 12,
                  "children": [

                  ],
                }, //清晰度控件
                // {
                //   "name": "fullScreenButton",
                //   "align": "tr",
                //   "x": 10,
                //   "y": 12
                // },
                // {
                //   "name": "volume",
                //   "align": "tr",
                //   "x": 5,
                //   "y": 10
                // }
              ]
            }
          ]
        },
        function(player) {
          console.log(player);
        }
      );
      console.error("player_status",player._status);
      console.error("player",player);
      player.on('ready',function(e){//播放器视频初始化按钮渲染完毕
          console.log('ready:',e);
          player.play();
      });
      player.on('play',function(e){//视频由暂停恢复为播放时触发
          console.log('play:',e);
      });
      player.on('pause',function(e){//视频暂停时触发
          console.log('pause:',e);
      });
      player.on('canplay',function(e){//能够开始播放音频/视频时发生,会多次触发,仅H5播放器
          console.log('canplay:',e);
      });
      player.on('playing',function(e){//播放中,会触发多次
          console.log('playing:',e);
      });
      player.on('ended',function(e){//当前视频播放完毕时触发
         console.log('ended:',e);
      });
      player.on('hideBar',function(e){//控制栏自动隐藏事件
          console.log('hideBar:',e);
      });
      player.on('showBar',function(e){//控制栏自动显示事件。
          console.log('showBar:',e);
      });
      player.on('waiting',function(e){//数据缓冲事件。
         console.log('waiting:',e);
      });
      player.on('timeupdate',function(e){//播放位置发生改变时触发,仅H5播放器。可通过getCurrentTime方法,得到当前播放时间。
           console.log('timeupdate:',e);
      });
      player.on('snapshoted',function(e){//截图完成时间。
          console.log('snapshoted:',e);
      });
      player.on('requestFullScreen',function(e){//全屏事件,仅H5支持。
          console.log('requestFullScreen:',e);
      });
      player.on('cancelFullScreen',function(e){//取消全屏事件,iOS下不会触发,仅H5支持。
          console.log('cancelFullScreen:',e);
          player.setPlayerSize(sys.w.sys.h)
      });
      player.on('error',function(e){//错误事件
          console.error('error:',e);
      });
      player.on('startSeek',function(e){//开始拖拽,参数返回拖拽点的时间。
          console.log('startSeek:',e);
      });
      player.on('completeSeek',function(e){//完成拖拽,参数返回拖拽点的时间。
          console.log('completeSeek:',e);
      });

      this.Aliplayer = player;
    },
    //销毁播放器
    disposePlayer(e) {
      this.Aliplayer.dispose();
    },
Categories: