本文为您提供了使用Web端播放器功能的操作步骤及SDK示例,通过本文内容您可以快速了解如何通过SDK使用Web端播放器功能。

连续播放

当前视频播放完毕时,自动播放下一个视频需要按使用的播放器类型和切换的地址格式,采用不同的实现方式。
  • 直接地址方式
    H5和Flash的行为都是一致的,需要订阅ended事件, 在ended事件里,调用loadByUrl方法, 参数为下一个视频的地址。示例如下:
    function endedHandle()
    {
      var newUrl = "";
      player.loadByUrl(newUrl);
    }
    player.on("ended", endedHandle);
  • vid+playauth播放方式
    • H5在ended事件里调用replayByVidAndPlayAuth方法,参数为vid和新的playauth值。示例如下:
      function endedHandle()
      {
       var newPlayAuth = "";
       player.replayByVidAndPlayAuth(vid,newPlayAuth);
      }
      player.on("ended", endedHandle);
    • Flash没有提供切换vidplayauth的方法,需要销毁重新创建播放器。示例如下:
      function endedHandle()
      {
         var newPlayAuth = "";
         player.dispose(); //销毁
         $('#J_prismPlayer').empty();//id为html里指定的播放器的容器id
          //重新创建
         player = new Aliplayer({
                   id: 'J_prismPlayer',
                   autoplay: true,
                   playsinline:true,
                   vid: vid,
                   playauth:newPlayAuth,
                   useFlashPrism:true
              });
         }
      }
      player.on("ended", endedHandle);
      注意 playauth的有效期只有100s, 调用replayByVidAndPlayAuth方法时,需要重新获取视频播放凭证
  • 地址协议不一样切换地处理
    如果原来播放的是mp4格式的视频,现在新的地址是hls的视频地址,这种情况只能重新创建播放器。示例如下:
    function endedHandle()
    {
        var newUrl = ""; //新的播放地址
        player.dispose(); //销毁
         //重新创建
       setTimeout(function(){
         player = new Aliplayer({
                  id: 'J_prismPlayer',
                  autoplay: true,
                  playsinline:true,
                  source:newUrl
             });
          }
       },1000);
    }
    player.on("ended", endedHandle);

清晰度切换

当前清晰度切换只有在使用阿里云点播和转码服务时通过vid方式播放时会自动开启。

通过设置qualitySort属性,启用时升序还是降序:
  • desc表示按倒序排序(从大到小排序)。
  • asc表示按正序排序(从小到大排序)。
说明
  • H5播放器可以通过设置format属性选择播放mp4或mp3播放格式,默认为mp4格式播放。
  • 清晰度切换会记住用户当前选择的清晰度,下次重新打开播放视频时,会优先选择上次选择的清晰度,没有则按默认逻辑选择低清晰度播放。
  • 用户选择的清晰度不能播放器时,会自动切换到下一个清晰度并提示,仅H5支持。

截图

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

  • Flash开启截图功能

    Flash通过snapshot属性开启,设置snapshot值为true,RTMP流不支持截图。

  • H5开启截图功能
    在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"},
        {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: "fullScreenButton", align: "tr", x: 10, y: 12},
            {name:"subtitle", align:"tr",x:15, y:12},
            {name:"setting", align:"tr",x:15, y:12},
            {name: "volume", align: "tr", x: 15, y: 10},
            {name: "snapshot", align: "tr", x: 5, y: 12},
          ]
        }
      ]
    H5截图是需要设置video的允许匿名跨域访问属性。示例如下:
      extraInfo:{
        crossOrigin:"anonymous"
      }
    说明 H5播放flv视频,在safari浏览器下不支持截图功能,即使启用了,截图按钮也不会出现。
  • 设置截图的大小和质量
    通过setSanpshotProperties(width,height,rate)方法设置截取图片的大小和图片质量, 大小默认为100%。示例如下:
    player.setSanpshotProperties(300,200,0.9)
  • 订阅截图事件
    截图完成时会触发snapshoted事件,并返回截图数。示例如下:
    player.on("snapshoted", function(data) {
         console.log(data.paramData.time);
         console.log(data.paramData.base64);
         console.log(data.paramData.binary);
     });
    参数说明:
    • time:截图的视频时间点。
    • base64:所截图的base64串可以直接用于img显示。
    • binary:所截图的二进制数据可以用于上传。
  • H5添加允许跨域访问的Header

    H5的截图是通过Canvas实现的,播放域名需添加允许跨域访问的Header,详情请参见关于跨域访问配置说明

  • 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'
      }

H5直播时移

  • 开通直播时移
    • 直播时移功能首先需要到阿里云直播服务里开通,详情请参见直播时移
    • 播放器开启时移功时需要设置如下属性:
      名称 说明
      isLive 设置值为:true
      liveTimeShiftUrl 时移信息查询URL。
      liveStartTime 直播开始时间。
      liveOverTime 直播结束时间。
      liveShiftSource 直播时移hls地址。
      说明 只有在source为flv直播流是需要设置。
  • 直播时移UI
    直播时移的UI构成主要是可时移区域的进度条, 时间显示:时间显示
    说明 时间区域从左到右分别为: 当前播放时间、直播结束时间、当前直播时间。
  • 调整直播结束时间
    在播放过程中可以通过调用liveShiftSerivce.setLiveTimeRange方法调整直播开始/结束时间时,UI会做相应的变化。示例如下:
    player.liveShiftSerivce.setLiveTimeRange(“”,’2018/01/04 20:00:00’)
  • flv直播和hls时移切换

    由于延时的原因,请在直播流用flv格式, 时移流用hls格式。

    Aliplayer SDK支持这种模式:
    • source属性指定flv直播地址。
    • liveShiftSource属性指定hls的地址。
    示例如下:
    {
     source:'http://localhost/live/test.flv',
     liveShiftSource:'http://localhost/live/test.m3u8',
    }
    另外需要指定recreatePlayer函数回调,用于切换flv直播时重新创建播放器。示例如下:
    var player = "";
    var create = function(){
       player = new Aliplayer({
          source:'http://localhost/live/test.flv',
          liveShiftSource:'http://localhost/live/test.m3u8',
          recreatePlayer:function(){
          create();
          },
          .....
         },
         function(player){
          console.log('播放器已经创建');
        });
    }

旋转和镜像

  • 提供两个属性videoHeightvideoWidth用于设置视频的宽度和高度,高度和宽度一般比容器的小,这样旋转和镜像时不会溢出到父容器外面,示例如下:
     width: '100%', //容器的大小
     height: '100%', //容器的大小
     videoHeight:"200px", //视频的高度大小
    效果
  • 方法说明
    参数 说明
    setRotate 设置旋转:参数为旋转角度e.g: setRotate(90), 正数为正时针旋转, 负数为逆时针旋转。
    getRotate 获取旋转。
    setImage 设置镜像,参数为镜像类型, 可选值为:
    • horizon:垂直镜像
    • vertical:水平镜像
  • 浏览器适配
    • 支持PC端和iOS端的浏览器。
    • 支持Android端(chrome浏览器、fixfore浏览器)。
    • 微信和大部分浏览器,由于视频被劫持播放,使用自带的播放器,所以不支持此功能。

多清晰度播放

  • source通过json结构指定多路清晰度流的地址的地址,示例如下:
    source:'{"HD":"http://common.qupai.me/player/qupai.mp4","SD":"http://common.qupai.me/player/qupai.mp4"}'
  • key对应的text值。示例如下:
       "OD": "原画"
       "FD": "流畅"
       "LD":"标清"
       "SD": "高清"
       "HD": "超清"
       "2K": "2K"
       "4K": "4K"
    说明 如果key值不在这个预定义的值里,将key值做为text值,直接显示在UI上。

注意事项

  • 当H5播放视频时浏览器控制台出现No 'Access-Control-Allow-Origin' header is present on the requested resource.,详情请参见跨域访问配置
  • 当Flash播放器出现CNAME或资源跨域访问错误时,详情请参见跨域访问配置
  • Android系统微信或QQ浏览器上播放视频时,由于腾讯X5浏览器会挟持视频自动全屏播放,详情请参见如何启用H5的同层播放

其他功能使用