Aliplayer
← 返回

截图

Aliplayer2.1.0以上版本支持视频播放过程中的截图功能，图片类型为image/jpeg，返回当前播放时间、base64和二进制的图片数据

开启截图功能

默认是不开启截图功能

H5开启截图功能

h5播放flv视频，在safari浏览器下不支持截图功能，即使启用了，截图按钮也不会出现

在skinLayout数组里添加snapshot UI

    skinLayout:[
      {name:"bigPlayButton", align:"blabs", x:30, y:80},
       {
        name: "H5Loading", align: "cc"
      },
      {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
      {name: "infoDisplay", align: "cc"},
      {
        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: 20, y: 25},
          {name:"streamButton", align:"tr",x:10, y:23},
          {name:"speedButton", align:"tr",x:10, y:23},
          {name: "volume", align: "tr", x: 20, y: 25},
          {name: "snapshot", align: "tr", x: 20, y: 25}
        ]
      }
    ]
Flash开启截图功能

Flash通过snapshot属性开启，设置snapshot:true

H5添加允许跨域访问的Header

H5的截图是通过Canvas实现的，播放域名需添加允许跨域访问的Header, 可以参考CDN设置跨域访问

订阅截图事件

截图完成时会触发snapshoted事件，并返回截图数据：

  • time: 截图的视频时间点
  • base64: 所截图的base64串可以直接用于img显示
  • binary: 所截图的二进制数据可以用于上传
player.on("snapshoted", function(data) {

     console.log(data.paramData.time);
     console.log(data.paramData.base64);
     console.log(data.paramData.binary);

 });
设置截图的大小和质量

通过setSanpshotProperties(width,height,rate)方法设置截取图片的大小和图片质量, 大小默认为100%

player.setSanpshotProperties("300px","200px",0.9)
H5截图可以添加文字水印

可以设置snapshotWatermark属性，包含属性有：

名称 说明
left 到左边的距离
top 左上角的高度，会包含文字的高度
text 水印文字
font 设置文字格式,可以多个属性一起设置，中间空格
font-style font-weight font-size font-family
strokeColor 设置用于笔触的颜色
fillColor 填充绘画的颜色 
snapshotWatermark:{
    left:"100",
    top:"100",
    text:"测试水印",
    font:"italic bold 48px 宋体",
    strokeColor:"red"
    fillColor:'green'
  }